1. AJAX的背景

AJAX(Async JavaScript And XML)：用JavaScript发送请求和接收响应

浏览器本身是可以发送请求和接收响应，所以浏览器在window上加了一个XMLHttpRequest函数，

用此构造函数可以构造出一个对象，JavaScript通过此对象实现发送请求，接收响应

2. 发送请求

第一步，构造XMLHttpRequest对象

const xml = new XMLHttpRequest();

第二步，初始化请求

xml.open(method,url)

第三步，监听XMLHttpRequest对象的onreadystatechange事件，当readyState属性发生变化时，调用callback

xml.onreadystatechange = callback

第四步，发送请求

xml.send()

示例代码：

const xml = new XMLHttpRequest();
xml.open('GET', 'a.json');
xml.onreadystatechange = () => {
    if (xml.readyState === 4 && xml.status >= 200 && xml.readyState < 300) {
        console.log(xml.response)
    }
}
xml.send()

3. XMLHttpRequest 对象常用属性及方法

readyState，返回数字，表示请求的状态码，具体值如下

值	状态	描述
0	UNSENT	创建了XMLHttpRequest对象，还未调用open()
1	OPENED	open()已调用
2	HEADERS_RECEIVED	send()已调用
3	LOADING	刚开始下载
4	DONE	下载已完成

onreadystatechange，当readyState属性发生变化时，调用callback
response，表示返回的响应体
status，数字，请求的响应状态（即http的状态码）
setRequestHeader()，设置HTTP请求头，必须在open之后，send之前调用
ontimeout，当请求超时调用对应的callback
onload，XMLHttpRequest请求成功完成时触发
onerror，当request出错时触发，只有在网络层级出现错误时才会调用此函数，如果错误只出现在应用层（比如发送一个HTTP的错误码），这个方法将不会被调用

例如，如果是请求路径出错，返回404，此时触发的是onload方法，所以，我们需要监听readyState，当readyState为4，且status为2XX时表示请求成功

4. JSON（JavaScript Object Notation）

通常发送请求是为了得到JSON文件

JSON支持的数据类型：

string，只支持双引号

number，支持科学计数法

boolean，true和false

null

object

array

不支持函数，不支持变量，

JSON.parse，将符合JSON语法的字符串转成JavaScript对象。由于只有以上6种，所以转成的数据也只有6种，如果不符合JSON语法，直接抛出异常，通常用try catch捕获异常

JSON.stringify，将javaScript数据转成符合JSON语法的字符串，由于JavaScript数据类型比JSON多，所以不一定能转成功

详情可查看中文官网

AJAX 基础

1. AJAX的背景

2. 发送请求

3. XMLHttpRequest 对象常用属性及方法

4. JSON（JavaScript Object Notation）