如何在循環中運行多個Ajax任務時強制DOM刷新

我有一個向客戶發送電子郵件的頁面。它在頁面底部有一個send all按鈕，以便能夠一次發送所有電子郵件。問題很嚴重或根本沒有效果。它要麼不重繪頁面，要麼不處理所有的Ajax調用。如何在循環中運行多個Ajax任務時強制DOM刷新

這裏是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]) 

    } 

}

如果有幫助，這裏是數組info構造，然後調用的函數...

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";

失敗ISN」 t在頁面被函數ajaxemail()調用，因爲一次調用一次或一次調用時可以正常工作。它在循環中調用時不起作用。它似乎做循環中的最後一個或兩個項目...或者如果我做了一些強制瀏覽器重繪（如調整大小）的東西，它可能會做一些事情。

如果我添加警報後測試循環的執行的方式至少工作成功地運行在每次迭代Ajax調用（但我必須按ok許多警報！

我需要不管怎樣，在循環的每一次迭代中強制刷新瀏覽器DOM。頁面變得不太敏感（但寧願它不會完全沒有響應）也沒關係。測試在其他瀏覽器中，一旦我有它在FF工作）

來源

2010-08-15 MrVimes

這裏的問題我您正在使用包含Ajax調用的全局變量的異步請求。在循環的每次迭代中，基本上都會覆蓋前面的調用。您需要使用不使用全局變量進行Ajax調用的庫。

最好的辦法是使用jQuery，Dojo，YUI或其他支持Ajax請求的JavaScript框架。

其他選項是使用數組來保存您的呼叫。沒有做這一切

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

和

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

來源

2010-08-16 05:22:09 epascarello

基本想法是有道理的。如果你不能說我剛接觸ajax。我現在不會使用一個庫，因爲我正在學習它，並且我想先學習如何使用它，然後再使用一個爲我做的庫。我將在下次嘗試代碼時嘗試第二個選項（工作時） – MrVimes 2010-08-16 19:50:58

決定立即嘗試。我寫了一個包含20個Ajax調用的快速虛擬頁面。在你建議的修改中添加了這個技巧，所以我知道這將在編輯真實代碼時起作用。所以再次感謝您的幫助。 – MrVimes 2010-08-16 20:54:02

如何在循環中運行多個Ajax任務時強制DOM刷新

回答

相關問題