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
对象还有很多其他的属性和方法,详见 XMLHttpRequest 对象。