Ajax中readyState和status有什么區(qū)別

Ajax中readyState和status有什么區(qū)別，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

具體內(nèi)容如下所示：

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

1.Ajax：readyState（狀態(tài)值）和status（狀態(tài)碼）的區(qū)別

readyState，是指運(yùn)行AJAX所經(jīng)歷過的幾種狀態(tài)，無論訪問是否成功都將響應(yīng)的步驟，可以理解成為AJAX運(yùn)行步驟，使用“ajax.readyState”獲得

status，是指無論AJAX訪問是否成功，由HTTP協(xié)議根據(jù)所提交的信息，服務(wù)器所返回的HTTP頭信息代碼，使用“ajax.status”獲得
總體理解：可以簡單的理解為state代表一個整體的狀態(tài)。而status是這個大的state下面具體的小的狀態(tài)。

2.什么是readyState

readyState是XMLHttpRequest對象的一個屬性，用來標(biāo)識當(dāng)前XMLHttpRequest對象處于什么狀態(tài)。

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

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

1：載入，XMLHttpRequest對象開始發(fā)送請求

2：載入完成，XMLHttpRequest對象的請求發(fā)送完成

3：解析，XMLHttpRequest對象開始讀取服務(wù)器的響應(yīng)

4：完成，XMLHttpRequest對象讀取服務(wù)器響應(yīng)結(jié)束

3.什么是status

status是XMLHttpRequest對象的一個屬性，表示響應(yīng)的HTTP狀態(tài)碼

在HTTP1.1協(xié)議下，HTTP狀態(tài)碼總共可分為5大類

1xx：信息響應(yīng)類，表示接收到請求并且繼續(xù)處理

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

3xx：重定向響應(yīng)類，為了完成指定的動作，必須接受進(jìn)一步處理

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

5xx：服務(wù)端錯誤，服務(wù)器不能正確執(zhí)行一個正確的請求

100——客戶必須繼續(xù)發(fā)出請求

101——客戶要求服務(wù)器根據(jù)請求轉(zhuǎn)換HTTP協(xié)議版本

200——交易成功

201——提示知道新文件的URL

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

203——返回信息不確定或不完整

204——請求收到，但返回信息為空

205——服務(wù)器完成了請求，用戶代理必須復(fù)位當(dāng)前已經(jīng)瀏覽過的文件

206——服務(wù)器已經(jīng)完成了部分用戶的GET請求

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

301——刪除請求數(shù)據(jù)

302——在其他地址發(fā)現(xiàn)了請求數(shù)據(jù)

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

304——客戶端已經(jīng)執(zhí)行了GET，但文件未變化

305——請求的資源必須從服務(wù)器指定的地址得到

306——前一版本HTTP中使用的代碼，現(xiàn)行版本中不再使用

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

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

401——請求授權(quán)失敗

402——保留有效ChargeTo頭響應(yīng)

403——請求不允許

404——沒有發(fā)現(xiàn)文件、查詢或URl

405——用戶在Request-Line字段定義的方法不允許

406——根據(jù)用戶發(fā)送的Accept拖，請求資源不可訪問

407——類似401，用戶必須首先在代理服務(wù)器上得到授權(quán)

408——客戶端沒有在用戶指定的餓時間內(nèi)完成請求

409——對當(dāng)前資源狀態(tài)，請求不能完成

410——服務(wù)器上不再有此資源且無進(jìn)一步的參考地址

411——服務(wù)器拒絕用戶定義的Content-Length屬性請求

412——一個或多個請求頭字段在當(dāng)前請求中錯誤

413——請求的資源大于服務(wù)器允許的大小

414——請求的資源URL長于服務(wù)器允許的長度

415——請求資源不支持請求項(xiàng)目格式

416——請求中包含Range請求頭字段，在當(dāng)前請求資源范圍內(nèi)沒有range指示值，請求也不包含If-Range請求頭字段

417——服務(wù)器不滿足請求Expect頭字段指定的期望值，如果是代理服務(wù)器，可能是下一級服務(wù)器不能滿足請求

500——服務(wù)器產(chǎn)生內(nèi)部錯誤

501——服務(wù)器不支持請求的函數(shù)

502——服務(wù)器暫時不可用，有時是為了防止發(fā)生系統(tǒng)過載

503——服務(wù)器過載或暫停維修

504——關(guān)口過載，服務(wù)器使用另一個關(guān)口或服務(wù)來響應(yīng)用戶，等待時間設(shè)定值較長

505——服務(wù)器不支持或拒絕支請求頭中指定的HTTP版本

4.思考問題：為什么onreadystatechange的函數(shù)實(shí)現(xiàn)要同時判斷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);
}
};

服務(wù)響應(yīng)出錯了，但還是返回了信息，這并不是我們想要的結(jié)果

如果返回不是200，而是404或者500，由于只使用readystate做判斷，它不理會放回的結(jié)果是200、404還是500，只要響應(yīng)成功返回了，就執(zhí)行接下來的javascript代碼，結(jié)果將造成各種不可預(yù)料的錯誤。所以只使用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);
}
};

事實(shí)上，結(jié)果卻不像預(yù)期那樣。響應(yīng)碼確實(shí)是返回了200，但是總共彈出了3次窗口！第一次是“readyState=2”的窗口，第二次是“readyState=3”的窗口，第三次是“readyState=4”的窗口。由此，可見onreadystatechange函數(shù)的執(zhí)行不是只在readyState變?yōu)?的時候觸發(fā)的，而是readyState（2、3、4）的每次變化都會觸發(fā)，所以就出現(xiàn)了前面說的那種情況。可見，單獨(dú)使用status判斷也是行不通的。

5.由上面的試驗(yàn)，我們可以知道判斷的時候readyState和status缺一不可。那么readyState和status的先后判斷順序會不會有影響呢？我們可以將status調(diào)到前面先判斷，代碼如 xhr.status === 200 && xhr.readyState === 4

事實(shí)上，這對于最終的結(jié)果是沒有影響的，但是中間的性能就不同了。由試驗(yàn)我們知道，readyState的每次變化都會觸發(fā)onreadystatechange函數(shù)，假如先判斷status，那么每次都會多判斷一次status的狀態(tài)。雖然性能上影響甚微，不過還是應(yīng)該抱著追求極致代碼的想法，把readyState的判斷放在前面。

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

看完上述內(nèi)容，你們掌握Ajax中readyState和status有什么區(qū)別的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！