关于XMLHttpRequest状态的讨论及处理方法

今天主要是讨论下XMLHttpRequest的响应状态问题。咱们知道，XMLHttpRequest的响应阶段有5个，分别是：

请求未初始化
服务器链接已创建
请求已接收
请求处理中
请求已完成，且响应已就绪

 

咱们是经过onreadystatechange来进行判断的，咱们能够获得的状态只有4个。就是从服务器连接已创建到请求完成。昨天也搜索了下网络，对这个状态的分析并非不少，奶牛本身测试了下，分享下。

首先，正常状况下，咱们能够获得4个阶段的状况，一个成功的请求并获得响应的readyState及status以下：

readyState:1   status:0
readyState:2   status:200
readyState:3   status:200
readyState:4   status:200

也就是说，当请求到达“请求已接收”阶段的时候就已经反馈回来了http status，就是咱们看到的200，这个是正常的状态。

咱们来设想这样一种情景：咱们请求交互的服务器与咱们的网络并不连通，或者说目标服务器已经下线、服务器无响应，会是种什么状态呢？应该如何处理呢？这是否是响应超时呢？咱们来测试下：

readyState:1   status:0
POST http://127.0.0.1/upload
readyState:2   status:0
readyState:4   status:0

经过结果咱们能够看出，咱们的请求已经发出，可是因为服务器对接收到的请求并无应答，所以咱们并无获得服务器的响应状态，而且服务器的处理状态咱们也不得而知，也就是为何没有readyState3的缘由，而在readyState4的阶段，咱们获得的status是0，这也就是咱们须要来处理的状态，即readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)，这个状态咱们应该归结为error、abort、timeout仍是其它呢？

奶牛把它分类到其它里面，处理方法在onreadystatechange里面处理。

xhr.onreadystatechange = function() {
     console.log("readyState:"+xhr.readyState+"   status:"+xhr.status);
     if (xhr.readyState == 4 && xhr.status == 200) {
          console.log("Request successful!");};
     if(xhr.readyState == 4 && xhr.status == 0){
          console.log("No response from server!");
     };
};

对于服务器无应答无响应或者错误状态的处理方法都应放在onreadystatechange，http status有不少，可参考http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

在XMLHttpRequest Level 2里面有新增长一个timeout的设置及处理方法，超时是指request请求并无在规定的时间内完成的一种状况，设置方法以下：

xhr.timeout = 3000;
xhr.ontimeout = function(event){
    　　　　alert('time out !');
    　　}

这样子，若是在3秒内交互未完成，则提示超时并终止，咱们假设一种极端的状况，既在1ms内服务器未能完成请求，这种状态很容易获得，咱们来看下反馈信息

readyState:1   status:0
POST http://127.0.0.1/upload
readyState:4   status:0

 

固然，在非极端的状况下，也就是说在变化阶段二、3的时候若是超时，则readyState == 4的时候也有 status ==0 ，因此，咱们能够把超时归结到readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)的状态，可是并不能把readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)的状态说是超时，由于超时是在服务器有反馈的时候才有效的，即在readyState ==2 时候status有具体响应值的时候，因此readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)的状态是包含超时状态的。

而对于readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)的状态能够用上文中的方法进行处理。