快捷導(dǎo)航

原生js?XMLhttprequest請(qǐng)求onreadystatechange執(zhí)行兩次的解決

更新時(shí)間：2023年02月23日 16:28:17 作者：kis_me

這篇文章主要介紹了原生js?XMLhttprequest請(qǐng)求onreadystatechange執(zhí)行兩次的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

最近做到一個(gè)頁(yè)面需要兼容IE，然后就寫(xiě)了一個(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í)行兩次，百度了很多都沒(méi)有發(fā)現(xiàn)相似問(wè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í)行一次，問(wèn)題解決。

分析，可能是因?yàn)樵跊](méi)有添加判斷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ì)象之后沒(méi)有調(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í)，并沒(méi)有真正開(kāi)始執(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)聽(tīng)服務(wù)器信息，它是在send的時(shí)候獲取服務(wù)器返回的狀態(tài)信息而已，只有一次，監(jiān)聽(tīng)則是一直在觀察狀態(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()方法開(kāi)始向服務(wù)端發(fā)送請(qǐng)求。值為1表示正在向服務(wù)端發(fā)送請(qǐng)求。

(2) 載入完成

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

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

(3) 交互

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

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

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

(4) 完成

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

值為4表示數(shù)據(jù)解析完畢，可以通過(guò)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í)行兩次的問(wèn)題。

至此問(wèn)題解決?。?！