虽然这种方式已经过时了,但是依然还有很多人在用。因此,把它作为了解的知识点,当看到别人在用时,知道是什么意思就可以了。
1. 先了解 ajax 状态码
在创建ajax对象,配置ajax 对象,发送请求,以及接收完服务器端响应数据,这个过程中的每一个步骤都会对应一个数值,这个数值 就是 ajax 状态码。
状态码一共有5个:
0:请求未初始化(已经创建了ajax对象,还没有调用open()去配置)
1:请求已经建立,但是还没有发送(已经调用了open(),但是还没有调用send())
2:请求已经发送(已经调用了send())
3:请求正在处理中,通常响应中已经有部分数据可以用了
4:响应已经完成,可以获取并使用服务器的响应了
2. 获取 ajax 状态码
xhr.readyState // 这个属性中存储了 ajax 状态码
如果我们在send()方法的后面,直接输出这个属性的值,实际上是看不到效果的,所以ajax 对象为我们提供了一个事件 – onreadystatechange 事件
2.1 onreadystatechange 事件
当Ajax 状态码发生变化的时候,系统会自动触发该事件。
我们可以在 事件处理函数中,输出 xhr.readyState 的值,这样我们就可以看到这个属性值的变化了
注意: 这个事件应该写在send()方法的前面,应该先添加这个事件,然后再发送请求。这个时候,事件已经添加成功了,就能够被触发了,也能监听当发送请求时,状态码的变化
// 当ajax 状态码发生变化时,就会触发该事件
xhr.onreadystatechange = function() {
// 2
// 3
// 4 都有可能出现
console.log(xhr.readyState);
}
xhr.send()
// ajax 请求已经发送出去了,此时ajax 状态码处于不断变化的状态
2.2 获取服务器端的响应 的 另一种方式:判断状态码后获取
获取服务器端响应的第一种方式是: 添加xhr的onload事件,给该事件添加事件处理函数
该方式示例如下,切记一定要把onreadystatechange
事件写到send函数前面:
// 当ajax 状态码发生变化时,就会触发该事件
xhr.onreadystatechange = function() {
// console.log(xhr.readyState); // 该行代码仅作为调试,可以省略
// 对ajax 状态码进行判断,如果状态码为4,就代表数据已经接收完成了
if (xhr.readyState == 4) {
console.log(xhr.responseText); // 获得服务器端相应的数据
}
}
xhr.send()
3. 两种获取服务器端响应方式的区别
区别描述 | onload事件 | onreadystatechange事件 |
---|---|---|
是否需要兼容 IE 低版本 | 不兼容 | 兼容 |
是否需要判断Ajax 状态码 | 不需要 | 需要 |
被调用次数 | 一次 | 多次 |
ps:推荐使用onload 事件 的方式,代码上更加简便,不需要对ajax状态码进行判断,且该事件只会被调用一次