在一个页面上使用两个 xmlhttprequest 调用

Question

我有两个部门，<div id=statuslist></div><div id=customerlist></div>

sendReq() 函数创建一个 xmlhttprequest 并将数据提取到分区中。

sendReq('statuslist','./include/util.php?do=getstatuslist','NULL');

sendReq('customerlist','emphome.php?do=getcustomerlist','NULL');

我有问题，

提取到'customerlist' 的数据被复制到'statuslist'

如果我改变函数调用的顺序，

sendReq('customerlist','emphome.php?do=getcustomerlist','NULL');

sendReq('statuslist','./include/util.php?do=getstatuslist','NULL');

现在'statuslist'的数据进入'customerlist'..

代码有什么问题？

Answer 1

这也是我现在的问题。经过深入研究，我发现：

如果您的网站上有多个 AJAX 任务，您应该创建一个标准函数来创建 XMLHttpRequest 对象，并为每个 AJAX 任务调用它 - W3Schools.com

另外，感谢Two xmlHttpRequests in a single page 将我重定向到这个问题Using two xmlhttprequest calls on a page，我能够解决这个问题。顺便说一下，是对Addsy's answer的修改。

首先，创建一个用于创建 XMLHttpRequest 对象的 ONE 标准函数，并为每个 AJAX 任务调用它。示例：

function sendReq(url, callbackFunction)
{
    var xmlhttp

    if (window.ActiveXObject)
    {
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest)
    {
     xmlhttp = new XMLHttpRequest();
    } 

    xmlhttp.onreadystatechange = function()
    {
       if (xmlhttp.readyState==4 && xmlhttp.status=='200')
       {
            if (callbackFunction) callbackFunction(xmlhttp.responseText);
       }
    }

    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}

第二，调用函数并传递必要的参数。例如：

sendReq("orders_code_get.php?currentquery="+sql, function processResponse( response )
{
    document.getElementById("orders_content").innerHTML="";
    document.getElementById("orders_content").innerHTML=response;
});

我已经证明并测试了这段代码，它可以工作。

Answer 2

我以前也有过。

基本上你有一个范围问题 - 你的 sendReq() 函数中有这样的东西吗？

if (window.ActiveXObject)
{
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
 xmlhttp = new XMLHttpRequest();
} 

因此，当您发出第二个请求时，xmlhttp 对象将被覆盖

你需要在你的 xmlhttp 对象不冲突的地方创建一个闭包

例如

function sendReq(url, callbackFunction)
{
    var xmlhttp

    if (window.ActiveXObject)
    {
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest)
    {
     xmlhttp = new XMLHttpRequest();
    } 

    ...  probably some other stuff here, setting url etc ...

    xmlhttp.onreadystatechange = function()
    {
       if (xmlhttp.readyState==4&&xmlhttp.status='200')
       {
        if (callbackFunction) callbackFunction(xmlhttp.responseText);
       }
    }

    .. probably more stuff here  ( including xmlhttp.send() ) !! ...

}

然后您可以将回调函数作为参数传递，当数据成功加载后，将传递给回调函数。请注意，您需要传递实际函数，而不仅仅是其名称（因此函数名称周围没有引号）

或者，您可以做我所做的，即使用 jQuery - 适用于我的大部分 js 问题；)

希望对你有帮助

Answer 3

事实上，可以运行多个异步 xhr 调用，但您必须给它们一个唯一的 id 作为参数，以便能够在您的 DOM 中本地存储和加载它们。

例如，您想在一个数组上循环并为每个对象进行 ajax 调用。这有点棘手，但这段代码对我有用。

var xhrarray={};
for (var j=0; j<itemsvals.length; j++){
                var labelval=itemsvals[j];
                // call ajax list if present.
                if(typeof labelval.mkdajaxlink != 'undefined'){
                    var divlabelvalue = '<div id="' + labelval.mkdid + '_' +          item.mkdcck + '" class="mkditemvalue col-xs-12 ' + labelval.mkdclass + '"><div class="mkdlabel">' + labelval.mkdlabel + ' :</div><div id="'+ j +'_link_'+ labelval.mkdid +'" class="mkdvalue">'+labelval.mkdvalue+'</div></div>';
                    mkdwrapper.find('#' + item.mkdcck + ' .mkdinstadivbody').append(divlabelvalue);

                    xhrarray['xhr_'+item.mkdcck] = new XMLHttpRequest();
                    xhrarray['xhr_'+item.mkdcck].uniqueid=''+ j +'_link_'+ labelval.mkdid +'';
                    console.log(xhrarray['xhr_'+item.mkdcck].uniqueid);
                    xhrarray['xhr_'+item.mkdcck].open('POST', labelval.mkdajaxlink);
                    xhrarray['xhr_'+item.mkdcck].send();
                    console.log('data sent');
                    xhrarray['xhr_'+item.mkdcck].onreadystatechange=function() {
                        if (this.readyState == 4) {
                            console.log(''+this.uniqueid);
                            document.getElementById(''+this.uniqueid).innerHTML = this.responseText;
                        }
                    };
                }
}

你必须在一个全局变量对象中设置每个xhr对象并定义一个值xhrarray['xhr_'+item.mkdcck].uniqueid 获取其唯一 ID 并将其结果加载到您想要的位置。

希望以后能帮到你。