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

 

这两天把html5的Drag 、File API 和XMLHttpRequest Level 2的一些东西看了下,写了几个小demo,可以实现文件拖放进入浏览器,文件预览以及文件上传,打算过几天好好整理下,然后推到github上做个开源小项目。

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

  1. 请求未初始化 
  2. 服务器连接已建立 
  3. 请求已接收 
  4. 请求处理中 
  5. 请求已完成,且响应已就绪 

我们是通过onreadystatechange来进行判断的,我们可以得到的状态只有4个。就是从服务器链接已建立到请求完成。昨天也搜索了下网络,对这个状态的分析并不是很多,奶牛自己测试了下,分享下。

首先,正常情况下,我们可以得到4个阶段的情况,一个成功的请求并得到响应的readyState及status如下:

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

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

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

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

通过结果我们可以看出,我们的请求已经发出,但是由于服务器对接收到的请求并没有应答,因此我们并没有得到服务器的响应状态,并且服务器的处理状态我们也不得而知,也就是为什么没有readyState3的原因,而在readyState4的阶段,我们得到的status是0,这也就是我们需要来处理的状态,即readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0),这个状态我们应该归结为error、abort、timeout还是其它呢?

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

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

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

在XMLHttpRequest Level 2里面有新增加一个timeout的设置及处理方法,超时是指request请求并没有在规定的时间内完成的一种情况,设置方法如下:

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

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

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

当然,在非极端的情况下,也就是说在变化阶段2、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)的状态可以用上文中的方法进行处理。

Leave Your Comments

:wx :k :good :fd :gz more »