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

时间:2011-09-27 15:48:50

标签: javascript ajax asynchronous xmlhttprequest

您好我正尝试使用不同的参数多次访问一个资源

在这种情况下请求

    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报告已收到这两个请求,并且可以在资源窗格中查看。

此外,如果我使请求同步,那么它工作正常。但是,由于请求可能会超时,因此发布代码无法接受这一点。

由于

2 个答案:

答案 0 :(得分:8)

使用http_request定义var。目前,您正在将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,则变量在本地范围内定义(在函数request中,在本例中)。

答案 1 :(得分:0)

事实上,可以运行多个异步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并将其结果加载到您想要的位置。

希望将来会帮助你。