今日内容
1. AJAX：增强用户体验
2. JSON：一种数据格式
1. AJAX：
- 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML
- 异步和同步：客户端和服务器端相互通信的基础上
- 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
- 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
- 百度百科解释：
- Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
- 通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
- 传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。
- 目的：归根结底就是跟服务器进行数据的交换，++提升用户的体验++
- 实现方式：
- 原生的JS实现方式（了解）
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 建立连接
/*
参数：
1. 请求方式：GET、POST
* get方式，请求参数在URL后边拼接。send方法为空参
* post方式，请求参数在send方法中定义
2. 请求的URL：
3. 同步或异步请求：true（异步）或 false（同步）
*/
xmlhttp.open("GET","ajaxServlet?username=tom",true);
//3.发送请求
xmlhttp.send();
//4.接受并处理来自服务器的响应结果
//获取方式 ：xmlhttp.responseText
//什么时候获取？当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
xmlhttp.onreadystatechange=function()
{
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
- JQeury实现方式(掌握)
- $.ajax()
- 语法：$.ajax({键值对});
- 常用参数：
- url
- type
- data
- success：function(){}
//使用$.ajax()发送异步请求
$.ajax({
url:"ajaxServlet1111" , // 请求路径
type:"POST" , //请求方式
//data: "username=jack&age=23",//请求参数
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦...")
},//表示如果请求响应出现错误，会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式
});
- $.get()：发送get请求
- 语法：$.get(url, [data], [callback], [type])
- 参数：
- url：请求路径【必须写的参数】
- data：请求参数
- callback：回调函数
- type：响应结果的类型(学完Json就可以设置)
- 默认text
- $.post()：发送post请求
- 语法：$.post(url, [data], [callback], [type])
- 参数：
- url：请求路径
- data：请求参数
- callback：回调函数
- type：响应结果的类型
- 代码演示：
//AjaxServlet.java中
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1. 获取请求参数
String username = req.getParameter("username");
//处理业务逻辑，耗时
/*try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}*/
//2. 打印username
System.out.println(username);
//3. 响应
resp.getWriter().write("hello : " + username);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
}
//02-JQuery实现方式2_get.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
//定义方法
function fun() {
//使用$.get发送异步请求
/*$.get("ajaxServlet", {username : "rose"}, function (data) {
alert(data); //hello : rose
}, "text");*/
//使用$.post发送异步请求
$.post("ajaxServlet", {username : "rose"}, function (data) {
alert(data);
}, "text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input>
</body>
</html>
2. JSON：
- 概念： JavaScript Object Notation JavaScript对象表示法
//Java对象
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
//JavaScript对象表示法
var p = {"name":"张三","age":23,"gender":"男"};
- json现在多用于存储和交换文本信息的语法
- 进行数据的传输
- JSON 比 XML 更小、更快，更易解析。
- 语法：
- 基本规则
- 数据在名称/值对中：json数据是由键值对构成的
- 键用引号(单双都行)引起来，也可以不使用引号
- 值得取值类型：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中）–>可以嵌套
{"persons":[{},{}]}- 对象（在花括号中）–>可以嵌套
{"address":{"province"："陕西"....}}- null->不常用
- 数据由逗号分隔：多个键值对由逗号分隔
- 花括号保存对象：使用{}定义json 格式
- 方括号保存数组：[]
- 代码演示：
<script>
//1. 定义基本格式
var person = {"name" : "张三", "age" : 23, "gender" : true};
//alert(person);
//2. 嵌套格式 {}->[]
var persons = {"persons" : [
{"name" : "张三", "age" : 23},
{"name" : "小红", "age" : 45}
]};
//3. 嵌套格式 []->{}
var ps = [
{"name" : "张三", "age" : 23},
{"name" : "小红", "age" : 45}
];
</script>
- 获取数据:
- json对象.键名
- json对象[“键名”]
- 数组对象[索引]
- (1,2,3)的代码演示：
<script>
//1. 定义基本格式
var person = {"name" : "张三", "age" : 23, "gender" : true};
//alert(person);
//获取name的值
//var name = person.name;//写法1
var name = person["name"];//写法2
//alert(name);
//2. 嵌套格式 {}->[]
var persons = {"persons" : [
{"name" : "张三", "age" : 23},
{"name" : "小红", "age" : 45}
]};
//获取name=小红的值
var name1 = persons.persons[1].name;
//alert(name1);
//3. 嵌套格式 []->{}
var ps = [
{"name" : "张三", "age" : 23},
{"name" : "小红", "age" : 45}
];
//获取name=张三的值
var name2 = ps[0].name;
alert(name2);
</script>
- 遍历
- for in 循环遍历基本格式
- 注：person.key来遍历值不行，，因为相当于person.“name”–>所以才会有person[]这种格式来获取值
- 数组的格式需要使用双层for循环嵌套
- 外层就是数组遍历方式，里面还是用for in的方式
//1.定义基本格式
var person = {"name": "张三", age: 23, 'gender': true};
var ps = [{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}];
//获取person对象中所有的键和值
//for in 循环
/* for(var key in person){
//这样的方式获取不行。因为相当于 person."name"
//alert(key + ":" + person.key);//错
alert(key+":"+person[key]);
}*/
//获取ps中的所有值
for (var i = 0; i < ps.length; i++) {
var p = ps[i];
for(var key in p){
alert(key+":"+p[key]);
}
}
- JSON数据和Java对象的相互转换
- JSON解析器：(封装好的一些工具类)
- 常见的解析器：Jsonlib，Gson，fastjson，jackson[springMVN内置的]
- JSON转为Java对象
- 导入jackson的相关jar包
- 创建Jackson核心对象 ObjectMapper
- 调用ObjectMapper的相关方法进行转换
- ++readValue(json字符串数据,Class)++
- 代码演示：
- Java对象(如map)转换JSON【常用】[++服务器端获取到很多数据，携带到客户端去++]
- 使用步骤：
- 导入jackson的相关jar包
- 创建Jackson核心对象 ObjectMapper
- 调用ObjectMapper的相关方法进行转换
- 转换方法：
- writeValue(参数1，obj):
- 参数可以如下：
- File：将obj对象转换为JSON字符串，并保存到指定的文件中
- Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
- OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
- writeValueAsString(obj):将对象转为json字符串
- 代码演示：
- 注解：
- @JsonIgnore：忽略属性
- @JsonFormat：属性值得格式化
- @JsonFormat(pattern = “yyyy-MM-dd”)
- 案例：在上面代码Person类中，添加一个时间
- 如果是不想让时间从Java对象转换JSON
- 就在Person类中，生日属性上面加上@JsonIgnore注解
- 如果要将转换为JSON的时间格式转换
- 就在Person类中，生日属性上面加上@JsonFormat注解
- 代码演示：
- 复杂java对象转换
- List：数组格式一样（与JSON取值类型中）
- 代码演示:
- Map：对象格式一致（与JSON取值类型中）
- 代码演示：
@Test
public void test5() throws IOException {
//JSON转为Java对象
String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";
//2. 转换
ObjectMapper mapper = new ObjectMapper();
Person person = mapper.readValue(json, Person.class);
System.out.println(person); //Person{name='张三', age=23, gender='男'}
}
//Person.java中
public class Person {
private String name;
private int age;
private String gender;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
@Override
public String toString() {
return "Person{" +
"name='" + name + '\'' +
", age=" + age +
", gender='" + gender + '\'' +
'}';
}
}
//JacksonTest.java中的test1
public class JacksonTest {
//Java对象转为JSON字符串
@Test
public void test1() throws IOException {
//1. 创建Person对象
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
//2. 创建Jackson的核心对象 ObjectMapper
ObjectMapper mapper = new ObjectMapper();
//3. 转换
/*
转换方法：
writeValue(参数1， obj)：
参数1：
File：将obj对象转换为JSON对象，并保存到指定的文件中
Writer：将obj对象转换为JSON对象，并将JSON数据填充到字符输出流中
OutputStream：将obj对象转换为JSON对象，并将JSON数据填充到字节输出流中
writeValueAsString(obj)：将对象转为json字符串
*/
String json = mapper.writeValueAsString(p);
//System.out.println(json); //{"name":"张三","age":23,"gender":"男"}
//writeValue，将数据写到d://b.txt文件中
//mapper.writeValue(new File("d://b.txt"), p);
//writeValue，将数据关联到Writer中（d://d.txt文件）
//mapper.writeValue(new FileWriter("d://d.txt"), p);
//writeValue,将数据关联到OutputStream中（d://e.txt文件中）
mapper.writeValue(new FileOutputStream("d://e.txt"), p);
}
}
//Person.java中补充的
//@JsonIgnore 忽略该属性
@JsonFormat(pattern = "yyyy-MM-dd")
private Date brithday;
public Date getBrithday() {
return brithday;
}
public void setBrithday(Date brithday) {
this.brithday = brithday;
}
//JacksonTest.java中的test2
@Test
public void test2() throws IOException {
//1. 创建Person对象
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
p.setBrithday(new Date());
//2. 转换
ObjectMapper mapper = new ObjectMapper();
String s = mapper.writeValueAsString(p);
System.out.println(s);
}
//结果：
//不加注解时候：
{"name":"张三","age":23,"gender":"男","brithday":1589267541621}
//加@JsonIgnore注解时候：
{"name":"张三","age":23,"gender":"男"}
//加@JsonFormat注解时候
{"name":"张三","age":23,"gender":"男","brithday":"2020-05-12"}
@Test
public void test3() throws IOException {
//1. 创建Person对象
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
p.setBrithday(new Date());
Person p1 = new Person();
p1.setName("李四");
p1.setAge(34);
p1.setGender("男");
p1.setBrithday(new Date());
Person p2 = new Person();
p2.setName("小红");
p2.setAge(40);
p2.setGender("女");
p2.setBrithday(new Date());
//创建List对象，来存上面三个对象（重复，有序）
List<Person> pList = new ArrayList<>();
pList.add(p1);
pList.add(p);
pList.add(p2);
//2. 转换
ObjectMapper mapper = new ObjectMapper();
String s = mapper.writeValueAsString(pList);
//[{}, {}, {}]
System.out.println(s); //[{"name":"张三","age":23,"gender":"男"},{"name":"李四","age":34,"gender":"男"},{"name":"小红","age":40,"gender":"女"}]
}
@Test
public void test4() throws IOException {
//1. 创建map对象（无序，唯一）
Map<String, Object> map = new HashMap<>();
map.put("name", "张三");
map.put("gender", "男");
map.put("age", 23);
//2. 转换
ObjectMapper mapper = new ObjectMapper();
String s = mapper.writeValueAsString(map);
System.out.println(s); //{"gender":"男","name":"张三","age":23}
}
案例：
- 校验用户名是否存在
- 服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
- $.get(type):将最后一个参数type指定为"json"
- 在服务器端设置MIME类型(application/json)
response.setContentType("application/json;charset=utf-8");- 注：MIME是什么？
- MIME的常见形式是一个主类型加一个子类型，用斜线分隔。比如text/html、application/javascript、image/png等。
- 在访问网页时，MIME type帮助浏览器识别一个HTTP请求返回的是什么内容的数据，应该如何打开、如何显示。
- 看到了吧，两者有共同的用途：用来标注信息的格式。
- 代码演示：
- 05-regist.html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
//在页面加载完成之后
$(function () {
//给username绑定blur事件
$("#username").blur(function () { //失去焦点触发请求
//获取username文本输入框的值
var username = $(this).val();
//发送ajax请求
//期望服务器响应回来的数据格式，有该用户时：{"userExist" : true, "msg" : "此用户名太受欢迎，请更换一个"}
//期望服务器响应回来的数据格式，没有该用户时：{"userExist" : false, "msg" : "此用户可用"}
$.get("findUserServlet", {username : username}, function (data) { //默认text，所以要换为json格式
//判断userExist键的值是否为true
//获取span
var span = $("#s_username");
if(data.userExist){
//用户名存在
span.css("color", "red");
span.html(data.msg);
}else{
//用户名不存在
span.css("color", "green");
span.html(data.msg);
}
}, "json");
})
})
</script>
</head>
<body>
<form>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<span id="s_username"></span>
<br>
<input type="password" name="password" placeholder="请输入密码"><br>
<input type="submit" name="注册"><br>
</form>
</body>
</html>
- FindUserServlet中
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1. 获取用户名
String username = req.getParameter("username");
//2. 调用service层判断用户是否存在（这里简化了，一般是service调用DAO然后去查询数据库）
//期望服务器响应回来的数据格式，有该用户时：{"userExist" : true, "msg" : "此用户名太受欢迎，请更换一个"}
//期望服务器响应回来的数据格式，没有该用户时：{"userExist" : false, "msg" : "此用户可用"}
//设置resp的字符格式
resp.setContentType("text/html;charset=utf-8");
//设置响应的数据格式为json-->这样就不用在$.get()第四个参数上写"json"
//resp.setContentType("application/json;charset=utf-8");
Map<String, Object> map = new HashMap<>();
if("tom".equals(username)){
//存在
map.put("userExist", true);
map.put("msg", "此用户名太受欢迎，请更换一个");
}else if("".equals(username)){
//非空判断
map.put("userExist", true);
map.put("msg", "不能为空");
}else {
//不存在
map.put("userExist", false);
map.put("msg", "此用户可用");
}
//将map转为json，并且传递给客户端
//将msp转为json
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(resp.getWriter(), map);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
}