ajax和json的基本使用

一、ajax

多种技术的统称。a - asynchronous（可通过xhr对象来发送异步请求）、j - javascript 、a - and、x - xml（指响应格式）

当网站页面提交表单发送一些请求时,原本的方法会导致整个页面刷新，会导致一些很不好的体验，例如视频网站的评论和弹幕功能。ajax可以在不用重新加载整个网页的情况下，更新部分网页内容。

(一) XMLHttpRequest对象基本使用

XMLHttpRequest是js中的对象，他可以用来向服务器发送请求，但不会导致页面的刷新。

1. 创建xhr对象

var xhr = new XMLHttpRequest();

2. 发送请求

xhr.open("get|post",请求地址，true|false);//发送请求前准备
xhr.send();//真正发送请求

3. 接受响应

xhr.responseText

需要的响应通常不是一个完整的html，而是一个html片段，或是一个字符串。

4. open的第三个参数

• true 默认值 – 异步请求, send 方法不会阻塞，页面其他代码，视频都不会等待响应，继续执行。
• false – 同步请求 响应没有返回之前，页面代码、视频都会暂停，直到响应返回为止，send方法在此期间一直处于阻塞状态。
• 由于响应返回需要时间，所以异步请求需要使用事件的机制来接收响应：

新的方法：响应返回会触发onload事件，执行事件所对应的函数
xhr.onload = function(){
};

以前的方法：发送请求时会触发，相应返回时会触发，响应完全返回时也会触发
xhr.onreadystatechange = function() {
    //xhr.readyState // 状态 
    // xhr 创建时 状态为0
    // xhr.send 0-->1
    // xhr. 1--> 2 2-->3
    // 3--> 4 表示响应完全返回
    if(xhr.readyState == 4) {

    }
}

5. post 请求

• get 请求只有请求行和请求头
• post 请求行、请求头、请求体

var xhr = new XMLHttpRequest();
xhr.onload = function(){};

// 发请求
xhr.open("post", url, true);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); // 告诉服务器，请求体的格式是：表单格式
xhr.send("请求体内容"); // 参数名=参数值&参数名=参数值

6. 优化xhr对象的使用

// url 请求地址 例如：/commentServlet
// param 请求参数 例如： "comment=" + document.getElementById("c").value
// callback 回调函数 例如：
function c (x) {
    document.getElementById("result").innerText = x.responseText;
}

post("/commentServlet", "comment=" + document.getElementById("c").value, c)

funciton post(url, param, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() { // 当 onload 事件发生时，才会执行 c 函数
        callback(xhr); // 调用 c 函数
    };
    xhr.open("post", url, true);
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    xhr.send(param);
}

7. 响应格式

主流的响应格式有两种：

1. xml (可扩展标记语言)

<response>
    <time>2019-1-19 11:43:33</time>
    <author>张三</author>
    <content>还不错</content>
    <score>11</score>
</response>

var xml = xhr.responseXML;
xml.getElementsByTagName("time")[0].innerText;

XMLHttpRequest 完整api
2. json (js-javascript、o-object 对象、n-notation 标记)
json解析更方便，并且还支持更多的类型，字符串、数字、布尔值、数组、对象

{
    "time":"2019-1-19 11:43:33",
    "author":"张三",
    "content": "还不错",
    "score": 11
}
var obj = ...
obj.time

8. json

(1) js 对象和 json 字符串相互转换

var js对象 = JSON.parse(json字符串);
var json字符串 = JSON.stringify(js对象);

(2) 把 java 对象转换为 json 字符串, 或反之

转换json的第三方 api， gson（谷歌）、jackson（spring）、fastjson（阿里）

jackson方式转换：

1. java转json

导包：

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

重要的类：

ObjectMapper om = new ObjectMapper();
String json = om.writeValueAsString(java对象);

注意事项：

• 如果要对日期进行控制，在日期属性上添加注解: @JsonFormat(pattern=“日期格式”, timezone=“GMT+08”)

• 如果要忽略某个属性：在属性上添加一个 @JsonIgnore 注解

• 如果要转换后改变属性名：@JsonProperty(“新属性名”)

• java中的map，domain ==> 都会转为 json 的对象 { }

• java中的list, set, 数组 ==> 都会转为 json 的数组 [ ]

2. json转java

ObjectMapper om = new ObjectMapper();
类型 java对象 = om.readValue(json字符串, 类.class);