目錄

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

原生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內容每次請求，都會在控制臺打印兩次，也就是說里面的邏輯會被執(zhí)行兩次，百度了很多都沒有發(fā)現相似問題，和具體解決辦法。

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ā)現了和正確代碼的差距，補上“ xmlHttp.readyState == 4 ”

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

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

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

知識：

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

關于readyState不同狀態(tài)總結

(0) 未初始化

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

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

(1) 載入

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

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

(2) 載入完成

此階段接收服務器端的響應數據。但獲得的還只是服務端響應的原始數據，并不能直接在客戶端使用。

值為2表示已經接收完全部響應數據。并為下一階段對數據解析作好準備。

(3) 交互

此階段解析接收到的服務器端響應數據。

即根據服務器端響應頭部返回的MIME類型把數據轉換成能通過responseBody、responseText或responseXML屬性存取的格式，為在客戶端調用作好準備。

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

(4) 完成

此階段確認全部數據都已經解析為客戶端可用的格式，解析已經完成。

值為4表示數據解析完畢，可以通過XMLHttpRequest對象的相應屬性取得數據。

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

至此問題解決！！！

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持。