如何在循环中运行多个Ajax任务时强制DOM刷新

时间:2010-08-15 20:23:22

标签: php ajax dom

我有一个向客户发送电子邮件的页面。它在页面底部有一个send all按钮,方便您一次发送所有电子邮件。问题是它是否工作严重或根本不工作。它要么不重绘页面,要么不管理所有Ajax调用。

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

失败不在函数ajaxemail()调用的页面中,因为在一次调用一次或一次调用时,它可以正常工作。它被循环调用时它不起作用。它似乎在循环中执行最后一个或两个项目...或者如果我执行某些强制浏览器重绘的内容(例如调整大小),它可能会介入其中一些。

如果我添加一个警报作为测试循环执行至少工作的方式,它会在每次迭代时成功运行Ajax调用(但我必须在许多警报上按ok

我需要以某种方式在循环的每次迭代中强制刷新浏览器DOM。如果页面的响应性降低(但它宁愿没有完全没有响应)也无关紧要

我正在测试最新的Firefox(一旦我在FF中工作,将在其他浏览器中测试)

1 个答案:

答案 0 :(得分:1)

这里的问题是您正在使用包含Ajax调用的全局变量的异步请求。在循环的每次迭代中,您基本上都会覆盖先前的调用。您需要使用不使用全局变量进行Ajax调用的库。

最好的办法是使用jQuery,Dojo,YUI或其他支持Ajax请求的JavaScript框架。

其他选项是使用数组来保持您的通话。没有做到这一切的基本想法

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

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