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

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

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

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

最近做到一個(gè)頁(yè)面需要兼容IE,然后就寫(xiě)了一個(gè)原生 XMLhttprequest請(qǐng)求

直接上錯(cuò)誤代碼

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)容每次請(qǐng)求,都會(huì)在控制臺(tái)打印兩次,也就是說(shuō)里面的邏輯會(huì)被執(zhí)行兩次,百度了很多都沒(méi)有發(fā)現(xiàn)相似問(wè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)了和正確代碼的差距,補(bǔ)上“ xmlHttp.readyState == 4 ”

執(zhí)行一次,問(wèn)題解決。

分析,可能是因?yàn)樵跊](méi)有添加判斷readyState時(shí),當(dāng)options預(yù)請(qǐng)求執(zhí)行時(shí),也會(huì)有一次狀態(tài)碼200的,所以會(huì)被執(zhí)行兩次,但是疑惑點(diǎn)是預(yù)請(qǐng)求不會(huì)返回?cái)?shù)據(jù),但是在打印時(shí),兩次打印都是有數(shù)據(jù)的。

查資料+請(qǐng)教大佬 = get 知識(shí)

知識(shí):

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

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

(0) 未初始化

此階段確認(rèn)XMLHttpRequest對(duì)象是否創(chuàng)建,并為調(diào)用open()方法進(jìn)行未初始化作好準(zhǔn)備。

值為0表示對(duì)象已經(jīng)存在,否則瀏覽器會(huì)報(bào)錯(cuò)--對(duì)象不存在。

(1) 載入

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

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

(2) 載入完成

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

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

(3) 交互

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

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

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

(4) 完成

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

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

這個(gè)時(shí)候再回顧之前為何執(zhí)行兩次onreadystatechange, 因?yàn)楫?dāng)state每次變化的時(shí)候都會(huì)執(zhí)行到onreadystatechange,其實(shí)是readyState每次變化都會(huì)有執(zhí)行onreadystatechange,因?yàn)槲遗袛嗔藅his.status == 200 ,所以當(dāng)服務(wù)器響應(yīng)了之后返回了200的狀態(tài)碼,才會(huì)執(zhí)行console.log(),才有上面的執(zhí)行兩次的問(wèn)題。

至此問(wèn)題解決?。?!

總結(jié)

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

相關(guān)文章

  • 淺談javascript的Touch事件

    淺談javascript的Touch事件

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

    js判斷一個(gè)對(duì)象是否在一個(gè)對(duì)象數(shù)組中(場(chǎng)景分析)

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

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

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

    淺談JavaScript中this的指向問(wèn)題

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

    javascript清空table表格的方法

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

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

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

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

    這篇文章主要介紹了手寫(xiě)Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash,接下來(lái)將會(huì)帶你們了解下這兩者的區(qū)別,以及我們?cè)撊绾问謱?xiě)實(shí)現(xiàn)這兩個(gè)函數(shù)
    2022-03-03
  • director.js實(shí)現(xiàn)前端路由使用實(shí)例

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

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

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

    下面小編就為大家?guī)?lái)一篇深入理解js函數(shù)的作用域與this指向。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-05-05
  • TypeScript轉(zhuǎn)javaScript的方法示例

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

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

最新評(píng)論