Ajax关于readyState和status的讨论_js

熟悉web开发的程序员想必对Ajax也不会陌生。现在已经有很多js框架封装了ajax实现，例如jquery的ajax函数，调用起来非常方便。当然本文不打算讲框架的使用，我们将从Ajax的JavaScript源码实现开始。

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("");

可以看到，xhr对象是通过onreadystatechange来监听Ajax的最终完成情况，这里也迎来了这次要重点讨论的主角：readyState和status。

什么是readyState

readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。

readyState总共有5个状态值，分别为0~4，每个值代表了不同的含义，如下表所示：

什么是status

status是XMLHttpRequest对象的一个属性，表示响应的HTTP状态码。

在HTTP1.1协议下，HTTP状态码总共可分为5大类，如下表所示：

http://www.gaodaima.com/30499.html

抛出问题

为什么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("");

这个演示DEMO使用ASP.NET Webform框架，现在我们在后台data.aspx做一些手脚，不如让它报错试试！C#代码如下：

 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("");

这次将在data.aspx后台做处理，让它只返回一个字符串，实现如下：

 public partial class data : System.Web.UI.Page {     protected void Page_Load(object sender, EventArgs e)     {         Response.Write("Test");         Response.End();     } }

一切都是那么地自然，是不是只要弹出一个写着一行"readyState=4Test"的字符串的提示框，就表示结果成立了？把它跑起来了吧，结果已经就离我们不远了！

事实上，结果却不像预期那样。响应码确实是返回了200，但是总共弹出了3次窗口！第一次是“readyState=2”的窗口，第二次是 “readyState=3Test”的窗口，第三次是“readyState=4Test”的窗口。由此，可见onreadystatechange函 数的执行不是只在readyState变为4的时候触发的，而是readyState的每次变化都会触发，所以就出现了前面说的那种情况。可见，单独使用 status判断也是行不通的。

进一步思考

由上面的试验，我们可以知道判断的时候readyState和status缺一不可。那么readyState和status的先后判断顺序会不会 有影响呢？我们可以将status调到前面先判断，代码如 xhr.status === 200 && xhr.readyState === 4。

事实上，这对于最终的结果是没有影响的，但是中间的性能就不同了。由上一个试验我们知道，readyState的每次变化都会触发 onreadystatechange函数，假如先判断status，那么每次都会多判断一次status的状态。虽然性能上影响甚微，不过我们还是应该 抱着追求极致代码的想法，把readyState的判断放在前面。

欢迎大家阅读《Ajax关于readyState和status的讨论_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)