欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2023年02月23日 16:28:17   作者:kis_me  
這篇文章主要介紹了原生js?XMLhttprequest請求onreadystatechange執(zhí)行兩次的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

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

在上面代碼中,當(dāng)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時,當(dāng)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ù)中當(dāng)解析到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, 因為當(dāng)state每次變化的時候都會執(zhí)行到onreadystatechange,其實是readyState每次變化都會有執(zhí)行onreadystatechange,因為我判斷了this.status == 200 ,所以當(dāng)服務(wù)器響應(yīng)了之后返回了200的狀態(tài)碼,才會執(zhí)行console.log(),才有上面的執(zhí)行兩次的問題。

至此問題解決?。?!

總結(jié)

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

相關(guān)文章

  • 淺談javascript的Touch事件

    淺談javascript的Touch事件

    在本文深入研究iOS和Android設(shè)備提供的觸摸事件API,探索一下可以構(gòu)建哪些類型的應(yīng)用,給出一些最佳做法,并論及一些使得可觸控應(yīng)用(touch-enabled application)的開發(fā)變得更加容易的有用技術(shù)。
    2015-09-09
  • js判斷一個對象是否在一個對象數(shù)組中(場景分析)

    js判斷一個對象是否在一個對象數(shù)組中(場景分析)

    這篇文章主要介紹了js判斷一個對象是否在一個對象數(shù)組中,本文通過場景分析給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2022-08-08
  • 使用3D引擎threeJS實現(xiàn)星空粒子移動效果

    使用3D引擎threeJS實現(xiàn)星空粒子移動效果

    這篇文章主要為大家詳細介紹了使用3D引擎threeJS實現(xiàn)星空粒子移動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • 淺談JavaScript中this的指向問題

    淺談JavaScript中this的指向問題

    這篇文章主要介紹了淺談JavaScript中this的指向問題,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • javascript清空table表格的方法

    javascript清空table表格的方法

    這篇文章主要介紹了javascript清空table表格的方法,涉及javascript操作table表格的技巧,需要的朋友可以參考下
    2015-05-05
  • JS+CSS實現(xiàn)的豎向簡潔折疊菜單效果代碼

    JS+CSS實現(xiàn)的豎向簡潔折疊菜單效果代碼

    這篇文章主要介紹了JS+CSS實現(xiàn)的豎向簡潔折疊菜單效果代碼,涉及JavaScript鏈式操作與元素遍歷等相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-10-10
  • 手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash

    手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash

    這篇文章主要介紹了手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash,接下來將會帶你們了解下這兩者的區(qū)別,以及我們該如何手寫實現(xiàn)這兩個函數(shù)
    2022-03-03
  • director.js實現(xiàn)前端路由使用實例

    director.js實現(xiàn)前端路由使用實例

    這篇文章主要介紹了director.js實現(xiàn)前端路由使用實例,director.js是最純粹的路由注冊/解析器,它在不刷新頁面的情況下,利用“#”符號組織不同的URL路徑,需要的朋友可以參考下
    2015-02-02
  • 深入理解js函數(shù)的作用域與this指向

    深入理解js函數(shù)的作用域與this指向

    下面小編就為大家?guī)硪黄钊肜斫鈐s函數(shù)的作用域與this指向。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • TypeScript轉(zhuǎn)javaScript的方法示例

    TypeScript轉(zhuǎn)javaScript的方法示例

    本文主要介紹了TypeScript轉(zhuǎn)javaScript的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06

最新評論