在前几篇分析了jquery的ajax异步和同步,以及异常的一些处理,感觉还没有把ajax的readyState和status说清楚.今天就来说说ajax状态的那点事。
jquery ajax函数源代码是这样的:
var getXmlHttpRequest = function () { if (window.XMLHttpRequest) { //主流浏览器提供了XMLHttpRequest对象 return new XMLHttpRequest(); } else if (window.ActiveXObject) { //低版本的IE浏览器没有提供XMLHttpRequest对象 //所以必须使用IE浏览器的特定实现ActiveXObject return new ActiveXObject("Microsoft.XMLHTTP"); } }; var xhr = getXmlHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { //获取成功后执行操作 //数据在xhr.responseText } }; xhr.open("TYPE", "URL", true); xhr.send("");
什么是readyState
readyState是XMLHttpRequest对象的一个属性,用来标识当前XMLHttpRequest对象处于什么状态。
readyState总共有5个状态值,分别为0~4,每个值代表了不同的含义,如下表所示:
0 未初始化状态:此时,已经创建了一个XMLHttpRequest对象
1 准备发送状态:此时,已经调用了XMLHttpRequest对象的open方法,并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端
2 已经发送状态:此时,已经通过send方法把一个请求发送到服务器端,但是还没有收到一个响应
3 正在接收状态:此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收到
4 完成响应状态:此时,已经完成了HTTP响应的接收
什么是status
status是XMLHttpRequest对象的一个属性,表示响应的HTTP状态码。
在HTTP1.1协议下,HTTP状态码总共可分为5大类,如下表所示:
1XX 服务器收到请求,需要继续处理。例如101状态码,表示服务器将通知客户端使用更高版本的HTTP协议。
2XX 请求成功。例如200状态码,表示请求所希望的响应头或数据体将随此响应返回。
3XX 重定向。例如302状态码,表示临时重定向,请求将包含一个新的URL地址,客户端将对新的地址进行GET请求。
4XX 客户端错误。例如404状态码,表示客户端请求的资源不存在。
5XX 服务器错误。例如500状态码,表示服务器遇到了一个未曾预料的情况,导致了它无法完成响应,一般来说,这个问题会在程序代码出错时出现。
抛出问题
为什么onreadystatechange的函数实现要同时判断readyState和status呢?
我们知道 readyState === 4 已经表示了请求响应成功了,为什么还要后续的status呢?带着问题,我们开始来做一些试验吧。
只使用readyState判断
javascript端的实现代码如下:
var getXmlHttpRequest = function () { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } }; var xhr = getXmlHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { alert(xhr.responseText); } }; xhr.open("GET", "/data.aspx", true); xhr.send("");
我们在服务端抛出异常:
public partial class data : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { throw new Exception("Error"); } }
运行javascript代码,提示窗口出现了如下:
服务响应出错了,但还是返回了信息,这并不是我们想要的结果。打开Fiddler监控,可以看到data.aspx返回的是500响应,但由于只使用readystate做判断,它不理会放回的结果是500还是200,只要响应成功返回了,就执行接下来的javascript代码,结果将造成各种不可预料的错误。所以只使用readyState判断是行不通的。
换另外一个角度想,状态码返回200就表示这次响应是成功的了,那么是不是可以不使用readyState,单独只使用status做判断呢?好,带着问题,继续来做试验吧。
只使用status判断
javascript端的代码实现如下:
var getXmlHttpRequest = function () { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } }; var xhr = getXmlHttpRequest(); xhr.onreadystatechange = function () { if (xhr.status === 200) { alert("readyState=" + xhr.readyState + xhr.responseText); } }; xhr.open("GET", "/data.aspx", true); xhr.send("");
事实上,结果却不像预期那样。响应码确实是返回了200,但是总共弹出了3次窗口!第一次是“readyState=2”的窗口,第二次是“readyState=3Test”的窗口,第三次是“readyState=4Test”的窗口。由此,可见onreadystatechange函数的执行不是只在readyState变为4的时候触发的,而是readyState的每次变化都会触发,所以就出现了前面说的那种情况。可见,单独使用status判断也是行不通的。
进一步思考