目錄

• 原生js XMLhttprequest請(qǐng)求onreadychange執(zhí)行兩次
• 關(guān)于readyState不同狀態(tài)總結(jié)
• (0) 未初始化
• (1) 載入
• (2) 載入完成
• (3) 交互
• (4) 完成
• 總結(jié)

原生js XMLhttprequest請(qǐng)求onreadychange執(zhí)行兩次

最近做到一個(gè)頁(yè)面需要兼容IE，然后就寫了一個(gè)原生 XMLhttprequest請(qǐng)求

直接上錯(cuò)誤代碼

xmlHttp = new XMLHttpRequest();
? ? ? ? xmlHttp.open("post","https://baidu.com/mianxiang/baidu/biancheng");
? ? ? ? xmlHttp.setRequestHeader("Content-Type","application/json");
? ? ? ? xmlHttp.send(XXXXXXXXXX) ;
? ? ? ? xmlHttp.onreadystatechange = function () {
? ? ? ? ? ? if(this.status==200){
? ? ? ? ? ? ? ? console.log("responseText",this.responseText);
? ? ? ? ? ? }
? ? ? ? };

在上面代碼中，當(dāng)status == 200 的console.log內(nèi)容每次請(qǐng)求，都會(huì)在控制臺(tái)打印兩次，也就是說(shuō)里面的邏輯會(huì)被執(zhí)行兩次，百度了很多都沒有發(fā)現(xiàn)相似問題，和具體解決辦法。

xmlHttp = new XMLHttpRequest();
? ? ? ? xmlHttp.open("post","https://baidu.com/mianxiang/baidu/biancheng");
? ? ? ? xmlHttp.setRequestHeader("Content-Type","application/json");
? ? ? ? xmlHttp.send(XXXXXXXXXX) ;
? ? ? ? xmlHttp.onreadystatechange = function () {
? ? ? ? ? ? if(xmlHttp.readyState == 4 && this.status==200){
? ? ? ? ? ? ? ? console.log("responseText",this.responseText);
? ? ? ? ? ? }
? ? ? ? };

最后偶然發(fā)現(xiàn)了和正確代碼的差距，補(bǔ)上“ xmlHttp.readyState == 4 ”

執(zhí)行一次，問題解決。

分析，可能是因?yàn)樵跊]有添加判斷readyState時(shí)，當(dāng)options預(yù)請(qǐng)求執(zhí)行時(shí)，也會(huì)有一次狀態(tài)碼200的，所以會(huì)被執(zhí)行兩次，但是疑惑點(diǎn)是預(yù)請(qǐng)求不會(huì)返回?cái)?shù)據(jù)，但是在打印時(shí)，兩次打印都是有數(shù)據(jù)的。

查資料+請(qǐng)教大佬 = get 知識(shí)

知識(shí)：

• 創(chuàng)建xmlhttprequest對(duì)象之后沒有調(diào)用open之前readystate值為0，調(diào)用open()之后就變?yōu)?了，并且此時(shí)onreadystatechange函數(shù)與open()幾乎是同時(shí)執(zhí)行的。
• 在之后調(diào)用send方法之后，在startHttpRequest函數(shù)中readystate值仍為1，而調(diào)用send方法之后應(yīng)該有2，3，4三個(gè)狀態(tài)，而只有在startHttpRequest函數(shù)用alert語(yǔ)句才可以觀察到3個(gè)值！
• 這是為什么呢？這是因?yàn)樵趕tartHttpRequest函數(shù)中當(dāng)解析到send這一句時(shí)，并沒有真正開始執(zhí)行send執(zhí)行。
• 只有send執(zhí)行，才可以在onreadystatechange函數(shù)觀察到狀態(tài)值的變化。
• readystate不是發(fā)送的狀態(tài)，它是準(zhǔn)備發(fā)送的狀態(tài)，要把它想像成“人間大炮一級(jí)準(zhǔn)備、二級(jí)準(zhǔn)備、放”這樣的口號(hào)，不是請(qǐng)求發(fā)送本身。
• 同時(shí)xmlhttp也不是監(jiān)聽服務(wù)器信息，它是在send的時(shí)候獲取服務(wù)器返回的狀態(tài)信息而已，只有一次，監(jiān)聽則是一直在觀察狀態(tài)。

關(guān)于readyState不同狀態(tài)總結(jié)

(0) 未初始化

此階段確認(rèn)XMLHttpRequest對(duì)象是否創(chuàng)建，并為調(diào)用open()方法進(jìn)行未初始化作好準(zhǔn)備。

值為0表示對(duì)象已經(jīng)存在，否則瀏覽器會(huì)報(bào)錯(cuò)－－對(duì)象不存在。

(1) 載入

此階段對(duì)XMLHttpRequest對(duì)象進(jìn)行初始化，即調(diào)用open()方法，根據(jù)參數(shù)(method,url,true)完成對(duì)象狀態(tài)的設(shè)置。

并調(diào)用send()方法開始向服務(wù)端發(fā)送請(qǐng)求。值為1表示正在向服務(wù)端發(fā)送請(qǐng)求。

(2) 載入完成

此階段接收服務(wù)器端的響應(yīng)數(shù)據(jù)。但獲得的還只是服務(wù)端響應(yīng)的原始數(shù)據(jù)，并不能直接在客戶端使用。

值為2表示已經(jīng)接收完全部響應(yīng)數(shù)據(jù)。并為下一階段對(duì)數(shù)據(jù)解析作好準(zhǔn)備。

(3) 交互

此階段解析接收到的服務(wù)器端響應(yīng)數(shù)據(jù)。

即根據(jù)服務(wù)器端響應(yīng)頭部返回的MIME類型把數(shù)據(jù)轉(zhuǎn)換成能通過responseBody、responseText或responseXML屬性存取的格式，為在客戶端調(diào)用作好準(zhǔn)備。

狀態(tài)3表示正在解析數(shù)據(jù)。

(4) 完成

此階段確認(rèn)全部數(shù)據(jù)都已經(jīng)解析為客戶端可用的格式，解析已經(jīng)完成。

值為4表示數(shù)據(jù)解析完畢，可以通過XMLHttpRequest對(duì)象的相應(yīng)屬性取得數(shù)據(jù)。

這個(gè)時(shí)候再回顧之前為何執(zhí)行兩次onreadystatechange， 因?yàn)楫?dāng)state每次變化的時(shí)候都會(huì)執(zhí)行到onreadystatechange，其實(shí)是readyState每次變化都會(huì)有執(zhí)行onreadystatechange，因?yàn)槲遗袛嗔藅his.status == 200 ，所以當(dāng)服務(wù)器響應(yīng)了之后返回了200的狀態(tài)碼，才會(huì)執(zhí)行console.log()，才有上面的執(zhí)行兩次的問題。

至此問題解決！！！

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持。