先看下面一段代碼,然后給大家詳細(xì)介紹,Ajax中有關(guān)readyState(狀態(tài)值)和status(狀態(tài)碼)的問(wèn)題,具體內(nèi)容如下所示:
var getXmlHttpRequest = function () {
try{
//主流瀏覽器提供了XMLHttpRequest對(duì)象
return new XMLHttpRequest();
}catch(e){
//低版本的IE瀏覽器沒(méi)有提供XMLHttpRequest對(duì)象,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)歷過(guò)的幾種狀態(tài),無(wú)論訪問(wèn)是否成功都將響應(yīng)的步驟,可以理解成為AJAX運(yùn)行步驟,使用“ajax.readyState”獲得
status,是指無(wú)論AJAX訪問(wèn)是否成功,由HTTP協(xié)議根據(jù)所提交的信息,服務(wù)器所返回的HTTP頭信息代碼,使用“ajax.status”獲得
總體理解:可以簡(jiǎn)單的理解為state代表一個(gè)整體的狀態(tài)。而status是這個(gè)大的state下面具體的小的狀態(tài)。
2.什么是readyState
readyState是XMLHttpRequest對(duì)象的一個(gè)屬性,用來(lái)標(biāo)識(shí)當(dāng)前XMLHttpRequest對(duì)象處于什么狀態(tài)。
readyState總共有5個(gè)狀態(tài)值,分別為0~4,每個(gè)值代表了不同的含義
0:初始化,XMLHttpRequest對(duì)象還沒(méi)有完成初始化
1:載入,XMLHttpRequest對(duì)象開(kāi)始發(fā)送請(qǐng)求
2:載入完成,XMLHttpRequest對(duì)象的請(qǐng)求發(fā)送完成
3:解析,XMLHttpRequest對(duì)象開(kāi)始讀取服務(wù)器的響應(yīng)
4:完成,XMLHttpRequest對(duì)象讀取服務(wù)器響應(yīng)結(jié)束
3.什么是status
status是XMLHttpRequest對(duì)象的一個(gè)屬性,表示響應(yīng)的HTTP狀態(tài)碼
在HTTP1.1協(xié)議下,HTTP狀態(tài)碼總共可分為5大類
1xx:信息響應(yīng)類,表示接收到請(qǐng)求并且繼續(xù)處理
2xx:處理成功響應(yīng)類,表示動(dòng)作被成功接收、理解和接受
3xx:重定向響應(yīng)類,為了完成指定的動(dòng)作,必須接受進(jìn)一步處理
4xx:客戶端錯(cuò)誤,客戶請(qǐng)求包含語(yǔ)法錯(cuò)誤或者是不能正確執(zhí)行
5xx:服務(wù)端錯(cuò)誤,服務(wù)器不能正確執(zhí)行一個(gè)正確的請(qǐng)求
100——客戶必須繼續(xù)發(fā)出請(qǐng)求
101——客戶要求服務(wù)器根據(jù)請(qǐng)求轉(zhuǎn)換HTTP協(xié)議版本
200——交易成功
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請(qǐng)求收到,但返回信息為空
205——服務(wù)器完成了請(qǐng)求,用戶代理必須復(fù)位當(dāng)前已經(jīng)瀏覽過(guò)的文件
206——服務(wù)器已經(jīng)完成了部分用戶的GET請(qǐng)求
300——請(qǐng)求的資源可在多處得到
301——?jiǎng)h除請(qǐng)求數(shù)據(jù)
302——在其他地址發(fā)現(xiàn)了請(qǐng)求數(shù)據(jù)
303——建議客戶訪問(wèn)其他URL或訪問(wèn)方式
304——客戶端已經(jīng)執(zhí)行了GET,但文件未變化
305——請(qǐng)求的資源必須從服務(wù)器指定的地址得到
306——前一版本HTTP中使用的代碼,現(xiàn)行版本中不再使用
307——申明請(qǐng)求的資源臨時(shí)性刪除
400——錯(cuò)誤請(qǐng)求,如語(yǔ)法錯(cuò)誤
401——請(qǐng)求授權(quán)失敗
402——保留有效ChargeTo頭響應(yīng)
403——請(qǐng)求不允許
404——沒(méi)有發(fā)現(xiàn)文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據(jù)用戶發(fā)送的Accept拖,請(qǐng)求資源不可訪問(wèn)
407——類似401,用戶必須首先在代理服務(wù)器上得到授權(quán)
408——客戶端沒(méi)有在用戶指定的餓時(shí)間內(nèi)完成請(qǐng)求
409——對(duì)當(dāng)前資源狀態(tài),請(qǐng)求不能完成
410——服務(wù)器上不再有此資源且無(wú)進(jìn)一步的參考地址
411——服務(wù)器拒絕用戶定義的Content-Length屬性請(qǐng)求
412——一個(gè)或多個(gè)請(qǐng)求頭字段在當(dāng)前請(qǐng)求中錯(cuò)誤
413——請(qǐng)求的資源大于服務(wù)器允許的大小
414——請(qǐng)求的資源URL長(zhǎng)于服務(wù)器允許的長(zhǎng)度
415——請(qǐng)求資源不支持請(qǐng)求項(xiàng)目格式
416——請(qǐng)求中包含Range請(qǐng)求頭字段,在當(dāng)前請(qǐng)求資源范圍內(nèi)沒(méi)有range指示值,請(qǐng)求也不包含If-Range請(qǐng)求頭字段
417——服務(wù)器不滿足請(qǐng)求Expect頭字段指定的期望值,如果是代理服務(wù)器,可能是下一級(jí)服務(wù)器不能滿足請(qǐng)求
500——服務(wù)器產(chǎn)生內(nèi)部錯(cuò)誤
501——服務(wù)器不支持請(qǐng)求的函數(shù)
502——服務(wù)器暫時(shí)不可用,有時(shí)是為了防止發(fā)生系統(tǒng)過(guò)載
503——服務(wù)器過(guò)載或暫停維修
504——關(guān)口過(guò)載,服務(wù)器使用另一個(gè)關(guān)口或服務(wù)來(lái)響應(yīng)用戶,等待時(shí)間設(shè)定值較長(zhǎng)
505——服務(wù)器不支持或拒絕支請(qǐng)求頭中指定的HTTP版本
4.思考問(wèn)題:為什么onreadystatechange的函數(shù)實(shí)現(xiàn)要同時(shí)判斷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)出錯(cuò)了,但還是返回了信息,這并不是我們想要的結(jié)果
如果返回不是200,而是404或者500,由于只使用readystate做判斷,它不理會(huì)放回的結(jié)果是200、404還是500,只要響應(yīng)成功返回了,就執(zhí)行接下來(lái)的javascript代碼,結(jié)果將造成各種不可預(yù)料的錯(cuò)誤。所以只使用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”的窗口。由此,可見(jiàn)onreadystatechange函數(shù)的執(zhí)行不是只在readyState變?yōu)?的時(shí)候觸發(fā)的,而是readyState(2、3、4)的每次變化都會(huì)觸發(fā),所以就出現(xiàn)了前面說(shuō)的那種情況。可見(jiàn),單獨(dú)使用status判斷也是行不通的。
5.由上面的試驗(yàn),我們可以知道判斷的時(shí)候readyState和status缺一不可。那么readyState和status的先后判斷順序會(huì)不會(huì)有影響呢?我們可以將status調(diào)到前面先判斷,代碼如 xhr.status === 200 xhr.readyState === 4
事實(shí)上,這對(duì)于最終的結(jié)果是沒(méi)有影響的,但是中間的性能就不同了。由試驗(yàn)我們知道,readyState的每次變化都會(huì)觸發(fā)onreadystatechange函數(shù),假如先判斷status,那么每次都會(huì)多判斷一次status的狀態(tài)。雖然性能上影響甚微,不過(guò)還是應(yīng)該抱著追求極致代碼的想法,把readyState的判斷放在前面。
xhr.readyState === 4 xhr.status === 200
以上所述是小編給大家介紹的 探討Ajax中有關(guān)readyState(狀態(tài)值)和status(狀態(tài)碼)的問(wèn)題,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
您可能感興趣的文章:- jQuery AJAX中readyState與status的區(qū)別與聯(lián)系
- jQuery Ajax的readyState和status的區(qū)別和使用詳解