AJAX&JSON

AJAX

概念： Asynchronous JavaScript and XML （异步的 JavaScript 和 XML）

• 同步：客户端必须等待服务器端的响应。在等待的期间不能做其他操作。
• 异步：客户端不需要等待服务器的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

实现方式：

1. 原生的JS实现方式（了解）

2. JQuery实现方式

   1. $.ajax()

$.ajax({
    url: "ajaxServlet",//请求路径
    method: "POST",//请求方式
    // data:"username=tom&age=3",//请求参数
    data: {"username": "jack", "age": 23},
    success: function (data) {//响应成功后的回调函数
        alert(data);
    },
    error: function () {//如果请求响应出现错误，会执行的回调函数
        alert("出错了")
    },
    dataType: "text"//设置接收到的响应数据的格式
})

2. $.get() ：发送get请求

   语法：jQuery.get(url, [data], [callback], [type])

$.get("ajaxServlet", {"username": "lucy", "age": 18}, function (data) {
	alert(data);
}, "text")

3. $.post() ：发送post请求

JSON

数据语法

//基本定义
let person = {"name": "张三", "age": 23, "gender": "男"};

//获取name的值
let name = person.name;
// let name = person["name"];

//嵌套格式 {} --> []
let persons = {
    persons: [
        {"name": "张三", "age": 23},
        {"name": "李四", "age": 23},
        {"name": "王五", "age": 23}
    ]
};

let name1 = persons.persons[2].name;//王五

//嵌套格式 [] --> {}
let ps = [
    {"name": "张三", "age": 23},
    {"name": "李四", "age": 23},
    {"name": "王五", "age": 23}
]

let name2 = ps[1].name;//李四

遍历

let person = {"name": "张三", "age": 23};

let persons = [
    {"name": "张三", "age": 23},
    {"name": "李四", "age": 23},
    {"name": "王五", "age": 23}
];


//获取person对象中所有的键和值
// for in 循环
for (let key in person) {
    alert(key + ":" + person[key]);
}

//获取persons中的所有值
for (let i = 0; i < persons.length; i++) {
    let p = persons[i];
    for (const key in p) {
        alert(key + ":" + p[key]);
    }
}

JSON数据和java对象的相互转换

使用步骤

1. 导入jackson依赖

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.12.2</version>
</dependency

2. 创建Jackson核心对象 ObjectMapper

JSON转为java对象

​ 调用 ObjectMapper 的相关方法进行转换

​ readValue(String content, Class<T> valueType)

java对象转为JSON

3. 调用 ObjectMapper 的相关方法进行转换
   • writeValueAsString(obj) ：将对象转为字符串。
   • writeValue(参数1,obj)
     • 参数1：
     • File：将obj对象转换为json字符串，保存到指定的文件中。
     • Writer：将obj对象转换为json字符串，并将json数据填充到字符输出流中
     • OutputStream：将obj对象转换为json字符串，并将json数据填充到字节输出流中
4. 注解：
   1. @JsonIgnore 忽略属性
   2. @JsonFormat 属性的值格式化 参数：pattern
5. 复杂java对象的转换
   1. List：数组
   2. Map：和对象的格式是一样的

服务器响应的数据，在客户端使用时，想要做json数据格式使用

1. $.get(type)：将最后一个参数type类型指定为"json"

2. 在服务器端设置MIME类型

   response.setContentType("application/json;charset=UTF-8");