探討Ajax中有關readyState（狀態值）和status（狀態代碼)的問題_AJAX相關

先看下面一段代碼，然後給大家詳細介紹，Ajax中有關readyState（狀態值）和status（狀態代碼)的問題，具體內容如下所示：

var getXmlHttpRequest = function () {try{//主流瀏覽器提供了XMLHttpRequest對象return new XMLHttpRequest();}catch(e){//低版本的IE瀏覽器沒有提供XMLHttpRequest對象，IE6以下//所以必須使用IE瀏覽器的特定實現ActiveXObjectreturn new ActiveXObject("Microsoft.XMLHTTP");}};var xhr = getXmlHttpRequest();// readyState 0=>初始化 1=>載入 2=>載入完成 3=>解析 4=>完成// console.log(xhr.readyState); 0xhr.open("TYPE", "URL", true);// console.log(xhr.readyState); 1xhr.send();// console.log(xhr.readyState); 1xhr.onreadystatechange = function () {// console.log(xhr.status); //HTTP狀態嗎// console.log(xhr.readyState); 2 3 4if(xhr.readyState === 4 && xhr.status === 200){alert(xhr.responseText);}};

1.Ajax：readyState（狀態值）和status（狀態代碼）的區別

readyState，是指運行AJAX所經曆過的幾種狀態，無論訪問是否成功都將響應的步驟，可以理解成為AJAX運行步驟，使用“ajax.readyState”獲得

status，是指無論AJAX訪問是否成功，由HTTP協議根據所提交的資訊，伺服器所返回的HTTP頭資訊代碼，使用“ajax.status”獲得
總體理解：可以簡單的理解為state代表一個整體的狀態。而status是這個大的state下面具體的小的狀態。

2.什麼是readyState

readyState是XMLHttpRequest對象的一個屬性，用來標識當前XMLHttpRequest對象處於什麼狀態。

readyState總共有5個狀態值，分別為0~4，每個值代表了不同的含義

0：初始化，XMLHttpRequest對象還沒有完成初始化

1：載入，XMLHttpRequest對象開始發送請求

2：載入完成，XMLHttpRequest對象的請求發送完成

3：解析，XMLHttpRequest對象開始讀取伺服器的響應

4：完成，XMLHttpRequest對象讀取伺服器響應結束

3.什麼是status

status是XMLHttpRequest對象的一個屬性，表示響應的HTTP狀態代碼

在HTTP1.1協議下，HTTP狀態代碼總共可分為5大類

1xx：資訊響應類，表示接收到請求並且繼續處理

2xx：處理成功響應類，表示動作被成功接收、理解和接受

3xx：重新導向響應類，為了完成指定的動作，必須接受進一步處理

4xx：用戶端錯誤，客戶請求包含語法錯誤或者是不能正確執行

5xx：服務端錯誤，伺服器不能正確執行一個正確的請求

100——客戶必須繼續發出請求

101——客戶要求伺服器根據請求轉換HTTP協議版本

200——交易成功

201——提示知道新檔案的URL

202——接受和處理、但處理未完成

203——返回資訊不確定或不完整

204——請求收到，但返回資訊為空白

205——伺服器完成了請求，使用者代理程式必須複位當前已經瀏覽過的檔案

206——伺服器已經完成了部分使用者的GET請求

300——請求的資源可在多處得到

301——刪除請求資料

302——在其他地址發現了請求資料

303——建議客戶訪問其他URL或訪問方式

304——用戶端已經執行了GET，但檔案未變化

305——請求的資源必須從伺服器指定的地址得到

306——前一版本HTTP中使用的代碼，現行版本中不再使用

307——申明請求的資源臨時性刪除

400——錯誤請求，如語法錯誤

401——請求授權失敗

402——保留有效ChargeTo頭響應

403——請求不允許

404——沒有發現檔案、查詢或URl

405——使用者在Request-Line欄位定義的方法不允許

406——根據使用者發送的Accept拖，請求資源不可訪問

407——類似401，使用者必須首先在Proxy 伺服器上得到授權

408——用戶端沒有在使用者指定的餓時間內完成請求

409——對當前資源狀態，請求不能完成

410——伺服器上不再有此資源且無進一步的參考地址

411——伺服器拒絕使用者定義的Content-Length屬性請求

412——一個或多個要求標頭欄位在當前請求中錯誤

413——請求的資源大於伺服器允許的大小

414——請求的資源URL長於伺服器允許的長度

415——請求資源不支援要求項目格式

416——請求中包含Range要求標頭欄位，在當前請求資源範圍內沒有range指示值，請求也不包含If-Range要求標頭欄位

417——伺服器不滿足請求Expect頭欄位指定的期望值，如果是Proxy 伺服器，可能是下一級伺服器不能滿足請求

500——伺服器產生內部錯誤

501——伺服器不支援要求的函數

502——伺服器暫時不可用，有時是為了防止發生系統過載

503——伺服器過載或暫停維修

504——關口過載，伺服器使用另一個關口或服務來響應使用者，等待時間設定值較長

505——伺服器不支援或拒絕支要求標頭中指定的HTTP版本

4.思考問題：為什麼onreadystatechange的函數實現要同時判斷readyState和status呢？

第一種思考方式：只使用readyState

var getXmlHttpRequest = function () {if (window.XMLHttpRequest) {return new XMLHttpRequest();}else if (window.ActiveXObject) {return new ActiveXObject("Microsoft.XMLHTTP");}};var xhr = getXmlHttpRequest();xhr.open("get", "1.txt", true);xhr.send();xhr.onreadystatechange = function () {if (xhr.readyState === 4) {alert(xhr.responseText);}};

服務響應出錯了，但還是返回了資訊，這並不是我們想要的結果

如果返回不是200，而是404或者500，由於只使用readystate做判斷，它不理會放回的結果是200、404還是500，只要響應成功返回了，就執行接下來的javascript代碼，結果將造成各種不可預料的錯誤。所以只使用readyState判斷是行不通的。

第二種思考方式：只使用status判斷

var getXmlHttpRequest = function () {try{return new XMLHttpRequest();}catch(e){return new ActiveXObject("Microsoft.XMLHTTP");}};var xhr = getXmlHttpRequest();xhr.open("get", "1.txt", true);xhr.send();xhr.onreadystatechange = function () {if (xhr.status === 200) {alert("readyState=" + xhr.readyState + xhr.responseText);}};

事實上，結果卻不像預期那樣。響應碼確實是返回了200，但是總共彈出了3次視窗！第一次是“readyState=2”的視窗，第二次是“readyState=3”的視窗，第三次是“readyState=4”的視窗。由此，可見onreadystatechange函數的執行不是只在readyState變為4的時候觸發的，而是readyState（2、3、4）的每次變化都會觸發，所以就出現了前面說的那種情況。可見，單獨使用status判斷也是行不通的。

5.由上面的實驗，我們可以知道判斷的時候readyState和status缺一不可。那麼readyState和status的先後判斷順序會不會有影響呢？我們可以將status調到前面先判斷，代碼如 xhr.status === 200 && xhr.readyState === 4

事實上，這對於最終的結果是沒有影響的，但是中間的效能就不同了。由實驗我們知道，readyState的每次變化都會觸發onreadystatechange函數，假如先判斷status，那麼每次都會多判斷一次status的狀態。雖然效能上影響甚微，不過還是應該抱著追求極致代碼的想法，把readyState的判斷放在前面。

xhr.readyState === 4 && xhr.status === 200

以上所述是小編給大家介紹的 探討Ajax中有關readyState（狀態值）和status（狀態代碼)的問題，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！