loop_jquery에 대해 JavaScript에서 AJAX 요청을 보내는 문제에 대한 자세한 설명

우선 더 나은 솔루션이 너무 많기 때문에 이 문제가 발생하는 경우는 거의 없습니다. 현재 Ajax를 수행할 때 흥미로운 점은 반복 속도가 너무 빠르기 때문에 마지막을 제외하고 Chrome 및 FF에서는 요청이 완료되기 전에 다음 반복이 수행된다는 것입니다. one 요청을 제외한 다른 요청은 모두 취소되었습니다. 그럼 무엇을 해야 할까요? 지연(별로 좋지 않음)을 설정하시겠습니까? 아니면 다른 방법으로 설정하시겠습니까?
수면 설정, 반복 등 다양한 방법이 있습니다. 저는 두 가지 다른 솔루션을 사용합니다.
1. 동기식 ajax 요청이며, ajax 요청은 기본적으로 비동기식이므로 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);
 // 迭代的速度快于发送请求+收到回复的时间 所以一次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);
 } 
}

이런 방식으로 동기식 Ajax 요청을 사용하면 서버가 응답할 때까지 기다리고 코드를 실행한 후 계속해서 반복하게 됩니다. 하지만 이는 권장되지 않는 것 같습니다.

2. 비동기 방식 을 사용하되, 반복할 때마다 새로운 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);
 // 迭代的速度快于发送请求+收到回复的时间 所以一次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);
}

JS for 루프와 ajax가 비동기적으로 실행되기 때문에 for 루프는 종료되지만 ajax는 아직 실행되지 않았습니다. 비동기 요청을 사용하는 경우 매 반복마다 새로운 XMLHttpRequest가 생성되면 각 요청을 완료할 수 있지만 결과가 여전히 정확하지 않고 일부 프로그램이 실행되지 않습니다.
이해하세요. 각 반복은 몇 줄의 코드를 실행하는 것입니다. Ajax 비동기 요청을 보내는 코드는 함수에 배치되어야 하며, 이 함수는 반복마다 호출되어야 합니다.
성능면에서는이러한 반복 ajax 요청의 경우 동기 방식이 더 높은 성능을 보이는 것 같습니다.

이 문제는 해결되었고 ajax와 http에 대한 이해가 깊어졌습니다.
위 내용은 JavaScript for 루프에서 AJAX 요청을 보내는 문제를 소개합니다. Javascript 튜토리얼에 관심이 있는 친구들에게 도움이 되기를 바랍니다.