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

- 日理万妓 2022-01-05 05:29 493阅读 0赞

今天主要是讨论下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)的状态可以用上文中的方法进行处理。

转载于:https://www.cnblogs.com/porter/p/10395745.html