Requête synchrone avec ajax dans une boucle

Question

J'ai une boucle for qui contient une requête ajax. La demande fonctionne de manière asynchrone. Donc, je ne peux pas atteindre le résultat de la demande à temps. Comment puis-je résoudre ce problème sans utiliser de bibliothèque? Merci.

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

D'abord, je vous suggère de mettre votre fonction xmlhttp.onreadystatechange avant de faire xmlhttp.open et xmlhttp.send. Il est possible que ce soit l'envoi et le retour et comme il fonctionne de manière asynchrone, il revient avant que la fonction onreadystatechange puisse être définie/exécutée. Quelque chose comme ca. Quoi qu'il en soit, vous pouvez toujours le faire de manière synchrone en définissant le dernier argument de xmlhttp.open sur false. Cela fera javascript attendre après xmlhttp.send avant de continuer, mais de toute façon, vous aurez toujours besoin de mettre onreadystatechange avant d'ouvrir et d'envoyer.

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

Il est très mauvaise pratique pour rendre votre ajax appelle synchroniquement xmlhttp.open("GET", "control.php?user=" + element.innerText, true) parce que vous ne pouvez pas interagir avec votre application jusqu'à ce qu'une demande ajax se termine. Je pense que dans votre cas, il est préférable d'envoyer chaque demande suivante dans le rappel onreadystatechange de la précédente.