首页 > 编程笔记 > JavaScript笔记 > Ajax
阅读:19
XMLHttpRequest.readyState属性:跟踪异步请求的状态
在 JavaScript 中,每当 ajax 请求被发送到服务器时,我们需要根据请求响应状态来执行一定的操作,readyState 属性存储 XMLHttpRequest 对象的状态信息。每当 readyState 属性改变时,就会触发 readystatechange 事件,然后将相应的处理代码放在 onreadystatechange 事件处理函数中。
如果 readyState 属性值为 4,则说明响应完毕,那么就可以安全的读取响应的数据。
考虑到各种特殊情况,更安全的方法是同时监测 HTTP 状态码,只有当 HTTP 状态码为 200 时,才说明 HTTP 响应顺利完成。
在调用 abort() 方法前,应先清除 onreadystatechange 事件处理函数,因为 IE 和 Mozilla 在请求中止后也会激活这个事件处理函数。如果给 onreadystatechange 属性设置为 null,则 IE 会发生异常,所以为它设置一个空函数。
异步响应状态
使用 readyState 属性可以实时跟踪异步响应状态。当该属性值发生变化时,会触发 readystatechange 事件,调用绑定的回调函数。readyState 属性值说明如表所示。返回值 | 说明 |
---|---|
0 | 未初始化。表示对象已经建立,但是尚未初始化,尚未调用 open() 方法 |
1 | 初始化。表示对象已经建立,尚未调用 send() 方法 |
2 | 发送数据。表示 send() 方法已经调用,但是当前的状态及 HTTP 头未知 |
3 | 数据传送中。已经接收部分数据,因为响应及 HTTP 头不安全,这时通过 responseBody 和 responseText 获取部分数据会出现错误 |
4 | 完成。数据接收完毕,此时可以通过 responseBody 和 responseText 获取完整的响应数据 |
考虑到各种特殊情况,更安全的方法是同时监测 HTTP 状态码,只有当 HTTP 状态码为 200 时,才说明 HTTP 响应顺利完成。
示例
下面示例中,修改请求为异步响应请求,然后通过 status 属性获取当前的 HTTP 状态码。如果 readyState 属性值为 4,且 status(状态码)属性值为 200,则说明 HTTP 请求和响应过程顺利完成,这时可以安全、异步的读取数据。window.onload = function () { //页面初始化 var b = document.getElementsByTagName("input")[0]; b.onclick = function () { var url = "server.php"; //设置请求的地址 var xhr = createXHR(); //实例化XMLHttpRequest对象 xhr.open("POST", url, true); //建立间接,要求异步响应 xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); //设置为表单方式提交 xhr.onreadystatechange = function () { //绑定响应状态事件监听函数 if (xhr.readyState == 4) { //监听readyState状态 if (xhr.status == 200 || xhr.status == 0) { //监听HTTP状态码 console.log(xhr.responseText); //接收数据 } } } xhr.send("callback=functionName"); //发送请求 } }
中止请求
使用 abort() 方法可以中止正在进行的请求。用法如下:
xhr.onreadystatechange = function () {}; //清理事件响应函数
xhr.abort(); //中止请求
在调用 abort() 方法前,应先清除 onreadystatechange 事件处理函数,因为 IE 和 Mozilla 在请求中止后也会激活这个事件处理函数。如果给 onreadystatechange 属性设置为 null,则 IE 会发生异常,所以为它设置一个空函数。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频