AJAX
1. 概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML
1. 异步和同步: 客户端和服务器端相互通信的基础上
* 同步: 客户端必须等待放服务器端的响应. 在等待的期间客户端不能做其他操作.
* 异步: 客户端不需要等待服务器的响应. 在服务器处理请求的过程中, 客户端可以进行其他的操作.
2. 特点:
1. Ajax 是一种无需重新加载整个页面的情况下, 能够更新部分网页的技术
2. 通过在后台与服务器进行少量数据交换, Ajax 可以使网页实现异步更新. 这意味着可以在不重新加载整个页面的情况下, 对页面的某部分进行更新.
3. 传统的网页(不使用 Ajax)如果需要更新内容, 必须重载整个网页页面.
2. 实现方式:
1. 原生的JS实现方式(了解)
* 代码:
// 发送异步请求
// 1. 创建核心对象
var xmlhttp;
if (window.XMLHttpRequest){
// 高版本浏览器创建对象
xmlhttp = new XMLHttpRequest();
} else {
// 低版本浏览器创建对象
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(){
// 判断就绪状态是否为4, 判断status响应的状态码是否为200
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// 获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
2. JQuery实现方式
1. $.ajax()
* 语法: $.ajax({键值对})
* 代码:
// 使用$.ajax发送异步请求
$.ajax({
url: "ajaxServlet", // 请求路径
type: "post", // 请求方式, 默认是get, 就是不写的情况
// contentType: "application/json", // 发送的数据, mime类型
async: "true", // 异步或同步, true异步, false同步, 默认异步
// data: "username=jack&age=23", //请求参数, 第一种方式
data: {"username": "jack", "age": 23}, // 请求参数, 第二种方式
dataType: "text", // 设置接受到的响应数据的格式, mime类型
success: function(data){ // 响应成功后的回调
alert(data);
},
error: function(error){ // 表示如果请求响应出现错误, 会执行的回调函数
alert("出错啦...")
}
});
2. $.post(): 发送post请求
* 语法: $.post(url, [data], [callback], [type])
* 参数:
* url: 请求路径
* data: 请求参数
* callback: 回调函数
* type: 响应结果的类型
* 代码:
$.post("ajaxServlet", {"username": "rose"}, function(data){
alert(data);
}, "text");
3. $.get(): 发送get请求
* 语法: $.get(url, [data], [callback], [type])
* 参数:
* url: 请求路径
* data: 请求参数
* callback: 回调函数
* type: 响应结果的类型
* 代码:
$.get("ajaxServlet", {"username": "rose"}, function(data){
alert(data);
}, "text");JSON
1. 概念: JavaScript Object Notation JavaScript对象表示法
var p = {"name": "张三", "age": 23, "gender": "男"};
* json现在多用于存储和交换文本信息的语法
* 进行数据的传输
* JSON 比 XML 更小、更快、更易解析.
2. 语法:
1. 基本规则:
* 数据在名称/值对中: json数据是由键值对构成
* 键用引号(单双都行)引起来, 也可以不适用引号
* 值得取值类型:
1. 数字(整数或浮点数)
2. 字符串(在双引号中)
3. 逻辑值(true 或 false)
4. 数组(在方括号中) {"persons": [{}, {}]}
5. 对象(在花括号中)(json对象) {"address": {"province": "陕西"...}}
6. null
* 数据由逗号分隔: 多个键值对由逗号分隔
* 花括号保存对象: 使用{}定义json 格式
* 方括号保存数组: []
* 代码:
// 1. 定义json
var person = {"name": "张三", "age":18, "gender": true};
// 2. 嵌套格式 {}-->[]
var persons = {
"persons": [
{"name": "张三", "age": 18, "gender": true},
{"name": "张三", "age": 18, "gender": true},
{"name": "张三", "age": 18, "gender": true}
]
};
// 3. 嵌套格式
var ps = [
{"name": "张三", "age": 18, "gender": true},
{"name": "张三", "age": 18, "gender": true},
{"name": "张三", "age": 18, "gender": true}
];
2. 获取数据:
1. json对象.键名
2. json对象["键名"]
3. 数组对象[索引]
4. 代码, 获取数据:
// 获取张三
var name = person.name;
var name = person["name"];
// 获取王五
var name = persons.persons[2].name;
// 获取李四
var name = ps[1].name;
5. 代码, 遍历获取数据:
// 获取person对象中所有的键和值
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]);
}
}
3. JSON数据和Java对象的相互转换
* JSON解析器:
* 创建的JSON解析器: Jsonlib, Gson, fastjson, jackson
1. JSON转为Java对象
1. 使用步骤:
1. 导入jackson的相关jar包
2. 创建jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
1. 转换方法:
* readValue(json数据, Class):
* 代码:
// JSON字符串, 转换为Java, Person对象
// 1. 定义Json字符串
String json = "{\"name\": \"张三\", \"age\": 23, \"gender\": \"男\"}";
// 2. 创建ObjectMapper对象
ObjectMapper om = new ObjectMapper();
// 3. 转换为Java对象 Person对象
Person person = om.readValue(json, Person.class);
System.out.println(person); // Person{name='张三', age=23, gender='男'}
2. Java对象转换JSON
1. 使用步骤:
1. 导入jackson的相关jar包
2. 创建jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
1. 转换方法:
* writeValue(参数1, obj):
参数1:
File: 将obj对象转换为JSON字符串, 并保存到指定的文件中
Writer: 将obj对象转换为JSON字符串, 并将JSON数据填充到字符输出流中
OutputStream: 将obj对象转换为JSON字符串, 并将JSON数据填充到字节输出流中
* writeValueAsString(obj): 将对象转为json字符串
2. 代码:
// 1. 创建Person对象
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
// 2. 创建Jackson的核心对象 ObjectMapper
ObjectMapper om = new ObjectMapper();
String json = om.writeValueAsString(p);
System.out.println(json); // {"name":"张三","age":23,"gender":"男"}
// writeValue, 将数据写到/Users/xiaoge/Desktop/a.txt文件中
om.writeValue(new File("/Users/xiaoge/Desktop/a.txt"), p);
// 桌面上多了一个a.txt内容为{"name":"张三","age":23,"gender":"男"}
// writeValue, 将数据关联到Writer中
om.writeValue(new FileWriter("/Users/xiaoge/Desktop/c.txt"), p);
// 桌面上多了一个c.txt内容为{"name":"张三","age":23,"gender":"男"}
3. 注解:
1. @JsonIgnore: 排除属性
2. @JsonFormat: 属性值得格式化
@JsonFormat(pattern = "yyyy-MM-dd") // 属性格式化
3. 代码, 定义类时, 在属性 或 方法上加注解:
1. person类属性
private String name;
private Integer age;
private String gender;
// @JsonIgnore 忽略该属性, 把该对象实例, 转换为JSON时, 该属性忽略
@JsonFormat(pattern = "yyyy-MM-dd") // 属性格式化
private Date birthday;
2. 忽略属性 和 格式化属性, 转换的json值:
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
p.setBirthday(new Date());
// 2. 转换
ObjectMapper om = new ObjectMapper();
String json = om.writeValueAsString(p);
System.out.println(json);
// 没加注解: {"name":"张三","age":23,"gender":"男","birthday":1581492798086}
// @JsonIgnore: {"name":"张三","age":23,"gender":"男"}
// @JsonFormat: {"name":"张三","age":23,"gender":"男","birthday":"2020-02-12"}
4. 复杂java对象转换:
1. List: 数组
* 代码:
// 1. 创建Person对象
Person p1 = new Person();
p1.setName("张三");
p1.setAge(23);
p1.setGender("男");
p1.setBirthday(new Date());
Person p2 = new Person();
p2.setName("李四");
p2.setAge(23);
p2.setGender("男");
p2.setBirthday(new Date());
Person p3 = new Person();
p3.setName("王五");
p3.setAge(23);
p3.setGender("男");
p3.setBirthday(new Date());
// 创建集合
List<Person> ps = new ArrayList<Person>();
ps.add(p1);
ps.add(p2);
ps.add(p3);
// 2. 转换
ObjectMapper om = new ObjectMapper();
String json = om.writeValueAsString(ps);
/*
[
{"name": "张三", "age": 23, "gender": "男", "birthday": "2020-02-12"},
{"name": "李四", "age": 23, "gender": "男", "birthday": "2020-02-12"},
{"name": "王五", "age": 23, "gender": "男", "birthday": "2020-02-12"},
]
*/
System.out.println(json);
2. Map: 对象格式一致
* 代码:
// 1. 创建集合
Map<String, Object> map = new HashMap<String, Object>();
map.put("name", "张三");
map.put("age", 23);
map.put("gender", "男");
// 2. 转换
ObjectMapper om = new ObjectMapper();
String json = om.writeValueAsString(map);
/*
{"name": "张三", "age": 23, "gender": "男"}
*/
System.out.println(json);服务器响应的数据, 在客户端使用时, 要想当做json数据格式使用
1. $.get(type): 将最后一个参数type指定为"json"
2. $.post(type): 将最后一个参数type指定为"json"
3. $.ajax(dataType): 键dataType指定为"json"
4. JSON.parse(服务器返回的数据); 将服务器返回的数据转换成"json"
5. 在服务器端设置MIME类型: response.setContentType("application/json;charset=utf-8");
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
