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

最近做到一個頁面需要兼容IE，然后就寫了一個原生 XMLhttprequest請求

直接上錯誤代碼

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);
? ? ? ? ? ? }
? ? ? ? };

在上面代碼中，當status == 200 的console.log內(nèi)容每次請求，都會在控制臺打印兩次，也就是說里面的邏輯會被執(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)了和正確代碼的差距，補上“ xmlHttp.readyState == 4 ”

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

分析，可能是因為在沒有添加判斷readyState時，當options預(yù)請求執(zhí)行時，也會有一次狀態(tài)碼200的，所以會被執(zhí)行兩次，但是疑惑點是預(yù)請求不會返回數(shù)據(jù)，但是在打印時，兩次打印都是有數(shù)據(jù)的。

查資料+請教大佬 = get 知識

知識：

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

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

(0) 未初始化

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

值為0表示對象已經(jīng)存在，否則瀏覽器會報錯－－對象不存在。

(1) 載入

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

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

(2) 載入完成

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

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

(3) 交互

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

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

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

(4) 完成

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

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

這個時候再回顧之前為何執(zhí)行兩次onreadystatechange， 因為當state每次變化的時候都會執(zhí)行到onreadystatechange，其實是readyState每次變化都會有執(zhí)行onreadystatechange，因為我判斷了this.status == 200 ，所以當服務(wù)器響應(yīng)了之后返回了200的狀態(tài)碼，才會執(zhí)行console.log()，才有上面的執(zhí)行兩次的問題。

至此問題解決?。。?/p>

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論