詳解JavaScript for循環(huán)中發(fā)送AJAX請求問題
首先說,出現(xiàn)這個(gè)問題的場景是很少見的,因?yàn)橛刑喔媒鉀Q方法。今天搞ajax的時(shí)候,一個(gè)有趣的地方,,每個(gè)迭代中都要發(fā)送一個(gè)get請求,因?yàn)榈乃俣忍?,一個(gè)請求還沒有完成就進(jìn)行下一個(gè)迭代,在chrome和ff上,除最后一個(gè)請求外,其它請求都被取消了。所以該怎么辦呢?設(shè)置延時(shí)(不太好)還是其他辦法?
辦法有很多,比如設(shè)置休眠,迭代等等, 我采用的是另外兩種解決辦法。
一、同步的ajax請求,而ajax請求默認(rèn)是異步的,所以要設(shè)置為false。
function creatXMLHttpRequest() { var xmlHttp; if (window.ActiveXObject) { return xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { return xmlHttp = new XMLHttpRequest(); } } function disButton(name, actionName, resquestParmName) { var path = document.getElementById("path").value; var xmlHttp = creatXMLHttpRequest(); var invoiceIds = new Array(); invoiceIds = document.getElementsByName(name); // 迭代的速度快于發(fā)送請求+收到回復(fù)的時(shí)間 所以一次get請求都還沒有完成就進(jìn)行了下一次請求 for (i = 0; i < invoiceIds.length; i++) { var invoiceId = invoiceIds[i].value; var url = path + "/" + actionName + ".action?" + resquestParmName + "=" + invoiceId; xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { var result = xmlHttp.responseText; if (result == "0") { document.getElementById("btn" + invoiceId).disabled = "disabled"; } } } } xmlHttp.open("GET", url, false); xmlHttp.send(null); } }
這樣,用同步的ajax請求,就會等服務(wù)器響應(yīng)后,執(zhí)行完代碼,再繼續(xù)迭代。但是好像不推薦這樣做。
二、采用異步的方式,但要記住,每次迭代都要?jiǎng)?chuàng)建一個(gè)新XMLHttpRequest對象,不能重用。
function creatXMLHttpRequest() { var xmlHttp; if (window.ActiveXObject) { return xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { return xmlHttp = new XMLHttpRequest(); } } function disButton(name, actionName, resquestParmName) { var xmlHttp; var path = document.getElementById("path").value; var invoiceIds = new Array(); invoiceIds = document.getElementsByName(name); // 迭代的速度快于發(fā)送請求+收到回復(fù)的時(shí)間 所以一次get請求都還沒有完成就進(jìn)行了下一次請求 for (i = 0; i < invoiceIds.length; i++) { xmlHttp = creatXMLHttpRequest(); var invoiceId = invoiceIds[i].value; var url = path + "/" + actionName + ".action?" + resquestParmName + "=" + invoiceId; fu(xmlHttp,url,invoiceId); } } function fu(xmlHttp,url,invoiceId){ xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { var result = xmlHttp.responseText; if (result == "0") { document.getElementById("btn" + invoiceId).disabled = "disabled"; } } } } // xmlHttp.open("GET", url, true); xmlHttp.send(null); }
由于JS的for循環(huán)與ajax非同步運(yùn)行,因此導(dǎo)致for循環(huán)結(jié)束了而ajax卻還未執(zhí)行。如果采用的是異步請求的方式,如果每次迭代的時(shí)候都去new一個(gè)XMLHttpRequest,這樣每次請求都能完成,但是結(jié)果還是還是不準(zhǔn)確,有些程序還未被執(zhí)行。
明白了,原來是每次迭代去執(zhí)行幾行代碼,應(yīng)該把發(fā)送ajax異步請求的代碼放在一個(gè)函數(shù)中,每次迭代就去調(diào)用這個(gè)函數(shù),這樣就行了。
性能上,對于這種迭代ajax請求,似乎同步的方式性能更高。
這個(gè)問題解決了,也加深了對ajax、http的理解。
以上就介紹了JavaScript for循環(huán)中發(fā)送AJAX請求的問題,希望對Javascript教程有興趣的朋友有所幫助。
相關(guān)文章
7款風(fēng)格新穎的jQuery/CSS3菜單導(dǎo)航分享
下面給大家分享7款風(fēng)格新穎的jQuery/CSS3菜單導(dǎo)航讓用戶方便地找到想要的信息,而且更讓人有一種特殊的用戶體驗(yàn),希望大家會喜歡2013-04-04a標(biāo)簽跳轉(zhuǎn)到指定div,jquery添加和移除class屬性的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猘標(biāo)簽跳轉(zhuǎn)到指定div,jquery添加和移除class屬性的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10基于jquery實(shí)現(xiàn)的定時(shí)顯示與隱藏div廣告的實(shí)現(xiàn)代碼
有時(shí)候我們需要在jquery中要顯示與隱藏層,很簡單的方法就是直接使用hide與show方法就可以了,但要定時(shí)我們需要結(jié)合setTimeout函數(shù)來實(shí)現(xiàn)2013-08-08jQuery Validate 數(shù)組 全部驗(yàn)證問題
這篇文章主要介紹了jquery validate 數(shù)組 全部驗(yàn)證問題及解決辦法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-01-01jQuery fadeTo方法調(diào)整圖片的透明度使用介紹
利用jquery的fadeTo方法可以簡單的制作一些很不錯(cuò)的動畫效果.可以使圖片或者文字或者區(qū)塊以不同的透明度效果出現(xiàn).例如以下練習(xí)實(shí)例,感興趣的朋友可以參考下哈2013-05-05用Jquery選擇器計(jì)算table中的某一列某一行的合計(jì)
本節(jié)主要介紹了用Jquery選擇器計(jì)算table中的某一列某一行的合計(jì),需要的朋友可以參考下2014-08-08jQuery選擇器簡明總結(jié)(含用法實(shí)例,一目了然)
jQuery 選擇器一直是 jquery 最神秘,最強(qiáng)大的一部分,當(dāng)然也是整個(gè) jquery 里面非?;A(chǔ)的2014-04-04