jQuery Ajax的readyState和status的区别和使用详解

在前几篇分析了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判断也是行不通的。

进一步思考

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

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

以上所述是小编给大家介绍的jquery ajax的readystate和status的区别和使用详解，希望对大家有所帮助