關於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)的狀態能夠用上文中的方法進行處理。