Ajax关于readyState和status的讨论

　　熟悉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，每一个值表明了不一样的含义，以下表所示：

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

　　这个演示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的判断放在前面。

　　若是你有新的想法，欢迎留言讨论。

参考资料: 锋利的JQuery, http状态码维基百科