Question

是否可以在同一页面上同时使用多个ajax调用，同时接收不同的接收div标签？我正在努力寻找答案。

我有3页。一个主页和2个php页面：状态和警报页面回显结果。

在主页内部，我有2个div，可以使用ajax更改数据。

<div id="statusTable"> </div>

<div id="alertsTable"> </div>

使用setInterval我同时为div提供2个新数据请求。我的问题是，一旦拨打电话，两个div都有相同的数据 - 就好像只有一个呼叫一样。

setInterval
    (
        function()
        {
            getAlerts();
            getStatus();
        },
        1000 
    );

我得到了这个。

alerts table // getStatus() call
2 2
2 2

status table // getStatus()
2 2
2 2

而不是

alerts table //getAlerts()
1 1
1 1

status table //getStatus()
2 2
2 2

这是代码：

function loadXMLDoc(url,cfunc)
    {
        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=cfunc;
        xmlhttp.open("GET",url,true);
        xmlhttp.send();
    }

    function getAlerts()
    {
        loadXMLDoc("alerts.php?update=variable",function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("alertsTable").innerHTML=xmlhttp.responseText;
            }
        });
    }

    function getStatus()
    {
        loadXMLDoc("status.php?update=variable",function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("statusTable").innerHTML=xmlhttp.responseText;
            }
        });
    }

我更改了计时器setIntervals，因此呼叫不会与div中收到的数据重叠，如下所示

    setInterval
    (
        function()
        {
            getAlerts();
        },
        5000 
    );

    setInterval
    (
        function()
        {
            getStatus();
        },
        3000
    );

我希望有一种方法可以同时拨打电话，而不必担心我的div有相同的内容。

Answer 1

首先，AJAX使用无状态的HTTP协议。如果您无法确定首先达到哪个答案，除非您自己在回复正文中标记这些答案。

也许2首先到达并设置，因为只接收一个数据包会导致readyState更改并丢弃其他数据包。

您的xmlhttp变量是全局定义的。因此，具有1个内部的数据包被2个内部的数据包重载。在var xmlhttp和getAlert函数中定义时，请尝试使用getStatus，并将其作为参数提供给loadXMLDoc函数。

其次，确保结果是否应该不同。也许只是两个值相同的巧合。

Answer 2

您需要在xmlhttp

中本地转发loadXMLDoc()变量

function loadXMLDoc(url,cfunc)
{
    var xmlhttp;
    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=cfunc;
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}

如果不执行此操作，函数中未正确声明的xmlhttp值会“泄漏”到全局范围中，这意味着您最终会使用第二个值（包括在其上设置的url值）覆盖值。宾语）。实际上，由于调用的异步性，您在代码中引入了竞争条件。

Answer 3

race condition和xmlhttp是全局的问题。最后的结果是覆盖div中写入的数据。通过制作xmlhttp变量来解决它根据建议和标记响应机构进行本地化。

function loadXMLDoc(xmlhttp,url,cfunc)
{
    xmlhttp.onreadystatechange=cfunc;
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}

function getAlerts()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    loadXMLDoc(xmlhttp,"alerts.php?update=variable",function()
    {
       if (xmlhttp.readyState==4 && xmlhttp.status==200 && xmlhttp.responseText.indexOf("unique     key") != -1)
       {
          //change div which matches unique key
       }
    });
}

信用：@Mike Brant和@Cunning

在像我这样的人想继续使用更多ajax电话之前，请查看浏览器如何处理和处理多个ajax调用：

How many concurrent AJAX (XmlHttpRequest) requests are allowed in popular browsers?

http://sgdev-blog.blogspot.com/2014/01/maximum-concurrent-connection-to-same.html

基于计时器的Ajax调用，在一个页面上有2个调用

3 个答案: