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并将其结果加载到您想要的位置。

希望将来会帮助你。

在页面上使用两个xmlhttprequest调用

3 个答案: