Ajax 不是用于浏览器与服务端进行通信的工具，而是以 XMLHttpRequest 为核心，包括 HTML/XHTML、CSS、JavaScript、DOM、XML以及XSLT的一种用于实现网页局部刷新的集合技术。
Ajax 中的 x 表示 XML，是 Ajax 早期接收响应数据的形式，但由于 JSON 的流行，XML 已经基本被 JSON 替代。
1、Ajax 基本流程
- 通过 JavaScript 创建 XMLHttpRequest 对象
- 利用 XMLHttpRequest 对象向 web 服务器发送请求
- 通过 JavaScript 读取并处理服务端响应的数据
- 根据处理结果操作 DOM 刷新页面的相应区域
2、核心：XMLHttpRequest 对象
XMLHttpRequest 用于与服务器交互，是浏览器与服务端进行通信的工具。通过 XMLHttpRequest 对象可以在不刷新页面的情况下请求特定 URL，获取数据。
要使用 XMLHttpRequest 对象与服务端交互，首先需要创建一个 xhr 对象
// 通过构造函数创建 xhr 对象
// 所有现代浏览器都内置了该构造函数
let xhr = new XMLHttpRequest();
然后调用 xhr 对象的 open() 方法初始化一个请求
// open() 方法最多可接收五个参数
// 其中最常用的是前两个，分别表示请求方式和请求地址
const method = 'GET';
const url = 'https://www.bilibili.com/index/ding.json';
// 第三个参数表示是否异步请求，默认为 true，一般不用这个参数
const async = true;
// 初始化一个请求
xhr.open(method, url);
初始化请求之后就可以调用 xhr.send() 方法发送请求了，但此时我们还应该为 xhr 对象绑定一些事件处理函数，以对服务端的响应进行处理。处理响应的方法可以根据需求绑定在 readystatechange 、loadend 或其他事件上面。
绑定的方式有两种，一是通过 xhr.addEventListener() 方法绑定事件处理函数，如
// 这种方式可以为同一事件绑定多个事件处理函数
xhr.addEventListener('readystatechange', function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response);
} else {
console.log(xhr.status)
}
}
})
二是通过设置 xhr 对象相应的属性来绑定事件处理函数，如
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response);
} else {
console.log(xhr.status)
}
}
}
事件处理函数并非一定要在 xhr.send() 方法调用之前绑定，也可以在 xhr.send() 调用之后，或者 xhr.open() 调用之前，具体要看个人习惯。
xhr 对象需要调用 send() 才会发起请求。xhr.send() 方法接收一个可选的参数做为请求的主体，但是当请求方式为 GET 或 HEAD 时，请求主体会被忽略。
xhr.send();
xhr.send('foo=bar&lorem=ipsum');
xhr.send(new Blob());
// 不支持 Object、Array 类型的参数，需转化为 JSON 字符串
xhr.send({name: '六月初六'}); // 错误的方式
xhr.send(JSON.stringify{name: '六月初六'}); // 正确的方式
除了上面提到的，xhr 对象还有很多其他的属性和方法，详见 MDN 文档。
