您好,登錄后才能下訂單哦!
這篇文章主要講解了“原生js XMLhttprequest請求onreadystatechange執(zhí)行兩次如何解決”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“原生js XMLhttprequest請求onreadystatechange執(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)。
此階段確認XMLHttpRequest對象是否創(chuàng)建,并為調(diào)用open()方法進行未初始化作好準備。
值為0表示對象已經(jīng)存在,否則瀏覽器會報錯--對象不存在。
此階段對XMLHttpRequest對象進行初始化,即調(diào)用open()方法,根據(jù)參數(shù)(method,url,true)完成對象狀態(tài)的設(shè)置。
并調(diào)用send()方法開始向服務(wù)端發(fā)送請求。值為1表示正在向服務(wù)端發(fā)送請求。
此階段接收服務(wù)器端的響應(yīng)數(shù)據(jù)。但獲得的還只是服務(wù)端響應(yīng)的原始數(shù)據(jù),并不能直接在客戶端使用。
值為2表示已經(jīng)接收完全部響應(yīng)數(shù)據(jù)。并為下一階段對數(shù)據(jù)解析作好準備。
此階段解析接收到的服務(wù)器端響應(yīng)數(shù)據(jù)。
即根據(jù)服務(wù)器端響應(yīng)頭部返回的MIME類型把數(shù)據(jù)轉(zhuǎn)換成能通過responseBody、responseText或responseXML屬性存取的格式,為在客戶端調(diào)用作好準備。
狀態(tài)3表示正在解析數(shù)據(jù)。
此階段確認全部數(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í)行兩次的問題。
感謝各位的閱讀,以上就是“原生js XMLhttprequest請求onreadystatechange執(zhí)行兩次如何解決”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對原生js XMLhttprequest請求onreadystatechange執(zhí)行兩次如何解決這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。