詳解JavaScript for循環(huán)中發(fā)送AJAX請(qǐng)求問題

2019-11-20 10:19:29

字體：大中小

供稿：網(wǎng)友

首先說，出現(xiàn)這個(gè)問題的場(chǎng)景是很少見的，因?yàn)橛刑喔媒鉀Q方法。今天搞ajax的時(shí)候，一個(gè)有趣的地方，，每個(gè)迭代中都要發(fā)送一個(gè)get請(qǐng)求，因?yàn)榈乃俣忍欤粋€(gè)請(qǐng)求還沒有完成就進(jìn)行下一個(gè)迭代，在chrome和ff上，除最后一個(gè)請(qǐng)求外，其它請(qǐng)求都被取消了。所以該怎么辦呢？設(shè)置延時(shí)（不太好）還是其他辦法？
辦法有很多，比如設(shè)置休眠，迭代等等，我采用的是另外兩種解決辦法。
一、同步的ajax請(qǐng)求，而ajax請(qǐng)求默認(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ā)送請(qǐng)求+收到回復(fù)的時(shí)間 所以一次get請(qǐng)求都還沒有完成就進(jìn)行了下一次請(qǐng)求 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請(qǐng)求，就會(huì)等服務(wù)器響應(yīng)后，執(zhí)行完代碼，再繼續(xù)迭代。但是好像不推薦這樣做。

二、采用異步的方式，但要記住，每次迭代都要?jiǎng)?chuàng)建一個(gè)新XMLHttpRequest對(duì)象，不能重用。

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ā)送請(qǐng)求+收到回復(fù)的時(shí)間 所以一次get請(qǐng)求都還沒有完成就進(jìn)行了下一次請(qǐng)求 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í)行。如果采用的是異步請(qǐng)求的方式，如果每次迭代的時(shí)候都去new一個(gè)XMLHttpRequest,這樣每次請(qǐng)求都能完成，但是結(jié)果還是還是不準(zhǔn)確，有些程序還未被執(zhí)行。
明白了，原來是每次迭代去執(zhí)行幾行代碼，應(yīng)該把發(fā)送ajax異步請(qǐng)求的代碼放在一個(gè)函數(shù)中，每次迭代就去調(diào)用這個(gè)函數(shù)，這樣就行了。
性能上，對(duì)于這種迭代ajax請(qǐng)求，似乎同步的方式性能更高。