Heim >Web-Frontend >js-Tutorial >Ausführliche Erläuterung des Problems beim Senden von AJAX-Anfragen in JavaScript für loop_jquery

Ausführliche Erläuterung des Problems beim Senden von AJAX-Anfragen in JavaScript für loop_jquery

WBOY
WBOYOriginal
2016-05-16 15:07:251986Durchsuche

Erstens kommt es selten vor, dass dieses Problem auftritt, weil es zu viele bessere Lösungen gibt. Bei der heutigen Ausführung von Ajax ist es interessant, dass in jeder Iteration eine Get-Anfrage gesendet werden muss. Da die Iterationsgeschwindigkeit zu hoch ist, wird die nächste Iteration ausgeführt, bevor eine Anfrage abgeschlossen ist, mit Ausnahme der letzten 1 Bis auf die Anfrage wurden alle anderen Anfragen storniert. Was also tun? Eine Verzögerung einstellen (nicht so gut) oder anders?
Es gibt viele Möglichkeiten, z. B. das Festlegen des Ruhezustands, die Iteration usw. Ich verwende zwei andere Lösungen.
1. Synchrone Ajax-Anfrage , und die Ajax-Anfrage ist standardmäßig asynchron, daher sollte sie auf „false“ gesetzt werden.

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);
 // 迭代的速度快于发送请求+收到回复的时间 所以一次get请求都还没有完成就进行了下一次请求
 for (i = 0; i < invoiceIds.length; i++) { 
 var invoiceId = invoiceIds[i].value;
 var url = path + "/" + actionName + ".action&#63;" + 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);
 } 
}

Auf diese Weise warten Sie bei Verwendung einer synchronen Ajax-Anfrage auf die Antwort des Servers, führen den Code aus und fahren dann mit der Iteration fort. Aber es scheint, dass dies nicht empfohlen wird.

2. Verwenden Sie eine asynchrone Methode , aber denken Sie daran, dass für jede Iteration ein neues XMLHttpRequest-Objekt erstellt werden muss und nicht wiederverwendet werden kann.

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);
 // 迭代的速度快于发送请求+收到回复的时间 所以一次get请求都还没有完成就进行了下一次请求
 for (i = 0; i < invoiceIds.length; i++) { 
 xmlHttp = creatXMLHttpRequest();
 var invoiceId = invoiceIds[i].value;
 var url = path + "/" + actionName + ".action&#63;" + 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);
}

Da die JS for-Schleife und Ajax asynchron laufen, endet die for-Schleife, aber Ajax wurde noch nicht ausgeführt. Wenn eine asynchrone Anforderungsmethode verwendet wird und während jeder Iteration ein neuer XMLHttpRequest erstellt wird, kann jede Anforderung abgeschlossen werden, das Ergebnis ist jedoch immer noch ungenau und einige Programme wurden nicht ausgeführt.
Es stellt sich heraus, dass bei jeder Iteration einige Codezeilen ausgeführt werden müssen. Der Code zum Senden asynchroner Ajax-Anfragen sollte in einer Funktion platziert werden, und diese Funktion sollte bei jeder Iteration aufgerufen werden.
In Bezug auf die Leistung Für diese iterative Ajax-Anfrage scheint die synchrone Methode eine höhere Leistung zu haben.

Dieses Problem wurde gelöst und mein Verständnis von Ajax und http wurde vertieft.
Das Obige stellt das Problem des Sendens von AJAX-Anfragen in der JavaScript-for-Schleife vor. Ich hoffe, es wird für Freunde hilfreich sein, die sich für Javascript-Tutorials interessieren.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn