Javascript：XHR不处理多个异步请求

Question

嗨，我尝试使用不同的参数多次访问一种资源

在这种情况下

    var domains = [
    'host1',
    'host2'
    ];

    var requests = new Array();

    for ( i in domains )
    {
        requests[i]=new request(domains[i]);
    }

    function request(site)
    {
        var url = 'get_remote_status.php?host='+site;
        var queues = {};
        http_request = new XMLHttpRequest();
        http_request.open("GET", url, true, 'username', 'password');
        http_request.onreadystatechange = function () {
            var done = 4, ok = 200;
            if (http_request.readyState == done && http_request.status == ok) {
                queues = JSON.parse(http_request.responseText);
                var queuesDiv = document.getElementById('queues');
                print_queues(queues, queuesDiv, site);              
            }
        };
        http_request.send(null);
    }

但是，代码lambda只处理其中一个请求。 Chromium报告已收到两个请求，并且可以在资源窗格中查看它们。

另外，如果我使请求同步，那么它可以正常工作。 但是，这对于发布代码是不可接受的，因为请求可能会超时。

谢谢

Answer 1

使用var定义http_request 。 当前，您正在将XHR对象分配给全局变量。 因此，您的脚本一次只能处理一个XHR。

相关错误代码：

function request(site)
{
    var url = 'get_remote_status.php?host='+site;
    var queues = {};
    http_request = new XMLHttpRequest();

拟议的变更：

function request(site)
{
    var url = 'get_remote_status.php?host='+site;
    var queues = {};
    var http_request = new XMLHttpRequest(); //VAR VAR VAR !!!

当您在变量前省略var ，该变量将在全局（ window ）范围内定义。 如果在变量之前使用var ，则该变量在本地范围内定义（在这种情况下，在function request中）。

Answer 2

实际上，可以运行多个异步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，并将其结果加载到所需的位置。

希望将来对您有帮助。