Синхронный запрос с ajax в цикле

Question

У меня есть цикл for, который содержит ajax-запрос. Запрос работает синхронно. Поэтому я не могу своевременно достичь результата запроса. Как я могу решить эту проблему без использования какой-либо библиотеки? Спасибо.

var availables = document.getElementsByClassName("available"); 

    for(var i=0;i<availables.length;i++){ 
     var element = availables[i]; 

     var xmlhttp; 
     if(window.XMLHttpRequest) 
      xmlhttp = new XMLHttpRequest; 
     else 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 

     xmlhttp.open("GET", "control.php?user=" + element.innerText, true); 
     xmlhttp.send(); 

     xmlhttp.onreadystatechange = function(){ 
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
       var result = xmlhttp.responseText; 
       console.log(result); 

       element.setAttribute("class" , "result available " + result); 
       if(result == "online") 
        element.innerHTML = "<a href=\"http://twitter.com/" + element.innerText + "\">" + element.innerText + "</a>"; 
      } 
     } 
    } 

Answer 1

Прежде всего, я хотел бы предложить положить вашу функцию xmlHttp.onreadystatechange, прежде чем делать xmlhttp.open и xmlhttp.send. Возможно, что он отправляется и возвращается, и поскольку он работает асинхронно, он возвращается, прежде чем вы можете определить/выполнить функцию onreadystatechange. Что-то вроде того.

В любом случае, вы всегда можете сделать все это синхронно, установив для последнего аргумента в xmlhttp.open значение false. Это заставит javascript ждать после xmlhttp.send, прежде чем продолжить, но в любом случае вам все равно придется поместить onreadystatechange перед открытием и отправкой.

var availables = document.getElementsByClassName("available"); 

for(var i=0;i<availables.length;i++){ 
    var element = availables[i]; 

    var xmlhttp; 
    if(window.XMLHttpRequest) 
     xmlhttp = new XMLHttpRequest; 
    else 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 

    xmlhttp.onreadystatechange = function(){ 
     if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
      var result = xmlhttp.responseText; 
      console.log(result); 

      element.setAttribute("class" , "result available " + result); 
      if(result == "online") 
       element.innerHTML = "<a href=\"http://twitter.com/" + element.innerText + "\">" + element.innerText + "</a>"; 
     } 
    } 

    xmlhttp.open("GET", "control.php?user=" + element.innerText, true); 
    //xmlhttp.open("GET", "control.php?user=" + element.innerText, false); //If you want to do it synchronously 
    xmlhttp.send(); 
} 

Answer 2

Это очень плохая практика, чтобы сделать ваш Ajax звонки синхронно xmlhttp.open("GET", "control.php?user=" + element.innerText, true) потому что вы не можете взаимодействовать с приложением, пока Ajax запрос не заканчивается. Я думаю, что в вашем случае лучше отправить каждый следующий запрос в обратном вызове предыдущего.