Comment forcer une actualisation DOM lors de l'exécution de plusieurs tâches Ajax dans une boucle

Question

J'ai une page qui envoie des courriels aux clients. Il a un bouton send all au bas de la page pour fournir la commodité de pouvoir envoyer tous les emails à la fois. Le problème est que cela fonctionne mal ou pas du tout. Il ne redessine pas la page ou ne parvient pas à traiter tous les appels Ajax.

est ici le JavaScript ...

function ajaxemail(element,name,email,bonus) 
{ 
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 

      document.getElementById(element).innerHTML= xmlhttp.responseText 
      //document.getElementById(element).style.display = 'none' 
      //document.getElementById(element).style.display = 'block' 
      //alert(xmlhttp.responseText) 
     } 
    } 
    xmlhttp.open("POST",<?php echo "\"$_SERVER[PHP_SELF]\"";?>,true); 
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    xmlhttp.send("emailto=true&name="+name+"&email="+email+"&bonus="+bonus); 
} 


function sendall(info) 
{ 
    document.getElementById('sendallmails').disabled = true 
    document.getElementById('sendallmails').value = 'Sending mails...' 

    length = info.length 

    for(i=0; i < length; i++) 
    { 
     ajaxemail(info[i][0],info[i][1],info[i][2],info[i][3]) 

    } 

} 

Et si ça aide, voici où le tableau est construit info puis la fonction appelée ...

echo "<script>\nvar email_info_array = new Array()\n"; 

    $j = 0; 

    while($row = mssql_fetch_row($rs)) 
    { 
      echo "email_info_array[$j] = new Array('sendlink$j','$row[1]','$row[2]','$row[4]')\n"; 

      ++$j; 
    } 

    echo "</script>\n\n"; 


    echo "<input type=\"button\" name=\"sendallmails\" id=\"sendallmails\" value=\"Send all Mails\" onclick=\"javascript:sendall(email_info_array)\">\n"; 

L'ISN échec » t dans la page appelée par la fonction ajaxemail() parce que cela fonctionne bien lorsqu'il est appelé une fois ou un à la fois. C'est lorsqu'il est appelé par la boucle que cela ne fonctionne pas. Il semble faire le dernier ou les deux derniers éléments dans la boucle ... ou il peut faire un peu entre les deux si je fais quelque chose qui oblige le navigateur à redessiner (comme le redimensionner).

Si j'ajoute une alerte comme un moyen de tester que l'exécution de la boucle est au moins de travail, il exécute avec succès l'appel Ajax à chaque itération (mais je dois appuyer ok sur de nombreuses alertes!

je dois d'une manière ou d'une autre, rafraîchir le navigateur DOM à chaque itération de la boucle, peu importe si la page devient moins réactive (mais ne deviendra pas totalement insensible)

tester dans d'autres navigateurs une fois que je l'ai travailler en FF)

Answer 1

Le problème ici i s vous utilisez des requêtes asynchrones avec une variable globale qui contient l'appel Ajax. Vous écrasez fondamentalement l'appel précédent à chaque itération de la boucle. Vous devez utiliser une bibliothèque qui n'utilise pas de variable globale pour l'appel Ajax.

La meilleure solution consiste à utiliser jQuery, Dojo, YUI ou un autre framework JavaScript prenant en charge les requêtes Ajax.

L'autre option consiste à utiliser une matrice pour contenir vos appels. idée de base sans le faire tout

var ind = xmlhttp.push(new XMLHttpRequest()) - 1; 

et

xmlhttp[ind].onreadystatechange ... 
xmlhttp[ind].open ...