首頁 >web前端 >js教程 >在Ajax裡使用readyState與status差異有哪些

在Ajax裡使用readyState與status差異有哪些

php中世界最好的语言原創: 2018-04-02 10:06:201936瀏覽

這次帶給大家在Ajax裡使用readyState與status區別有哪些，在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的判断放在前面。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

在Ajax裡使用readyState與status差異有哪些

相關文章