原生js XMLhttprequest請求onreadystatechange執行兩次的解決
原生js XMLhttprequest請求onreadychange執行兩次
最近做到一個頁面需要兼容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內容每次請求，都會在控制臺打印兩次，也就是說裡面的邏輯會被執行兩次，百度瞭很多都沒有發現相似問題，和具體解決辦法。
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);
}
};
最後偶然發現瞭和正確代碼的差距，補上“ xmlHttp.readyState == 4 ”
執行一次，問題解決。
分析，可能是因為在沒有添加判斷readyState時，當options預請求執行時，也會有一次狀態碼200的，所以會被執行兩次，但是疑惑點是預請求不會返回數據，但是在打印時，兩次打印都是有數據的。
查資料+請教大佬 = get 知識
知識：
- 創建xmlhttprequest對象之後沒有調用open之前readystate值為0，調用open()之後就變為1瞭，並且此時onreadystatechange函數與open()幾乎是同時執行的。
- 在之後調用send方法之後，在startHttpRequest函數中readystate值仍為1，而調用send方法之後應該有2，3，4三個狀態，而隻有在startHttpRequest函數用alert語句才可以觀察到3個值！
- 這是為什麼呢？這是因為在startHttpRequest函數中當解析到send這一句時，並沒有真正開始執行send執行。
- 隻有send執行，才可以在onreadystatechange函數觀察到狀態值的變化。
- readystate不是發送的狀態，它是準備發送的狀態，要把它想像成“人間大炮一級準備、二級準備、放”這樣的口號，不是請求發送本身。
- 同時xmlhttp也不是監聽服務器信息，它是在send的時候獲取服務器返回的狀態信息而已，隻有一次，監聽則是一直在觀察狀態。
關於readyState不同狀態總結
(0) 未初始化
此階段確認XMLHttpRequest對象是否創建，並為調用open()方法進行未初始化作好準備。
值為0表示對象已經存在，否則瀏覽器會報錯－－對象不存在。
(1) 載入
此階段對XMLHttpRequest對象進行初始化，即調用open()方法，根據參數(method,url,true)完成對象狀態的設置。
並調用send()方法開始向服務端發送請求。值為1表示正在向服務端發送請求。
(2) 載入完成
此階段接收服務器端的響應數據。但獲得的還隻是服務端響應的原始數據，並不能直接在客戶端使用。
值為2表示已經接收完全部響應數據。並為下一階段對數據解析作好準備。
(3) 交互
此階段解析接收到的服務器端響應數據。
即根據服務器端響應頭部返回的MIME類型把數據轉換成能通過responseBody、responseText或responseXML屬性存取的格式，為在客戶端調用作好準備。
狀態3表示正在解析數據。
(4) 完成
此階段確認全部數據都已經解析為客戶端可用的格式，解析已經完成。
值為4表示數據解析完畢，可以通過XMLHttpRequest對象的相應屬性取得數據。
這個時候再回顧之前為何執行兩次onreadystatechange， 因為當state每次變化的時候都會執行到onreadystatechange，其實是readyState每次變化都會有執行onreadystatechange，因為我判斷瞭this.status == 200 ，所以當服務器響應瞭之後返回瞭200的狀態碼，才會執行console.log()，才有上面的執行兩次的問題。
至此問題解決！！！
總結
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。