Ajax --- 获取服务器端的响应
虽然这种方式已经过时了,但是依然还有很多人在用。因此,把它作为了解的知识点,当看到别人在用时,知道是什么意思就可以了。
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状态码进行判断,且该事件只会被调用一次
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgaebca
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13