DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> jQuery Ajax的readyState和status的區別和使用詳解
jQuery Ajax的readyState和status的區別和使用詳解
編輯:AJAX基礎知識      日期:2017/4/13 9:50:41

在前幾篇分析了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的判斷放在前面。

以上所述是小編給大家介紹的jQuery Ajax的readyState和status的區別和使用詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved