多个xmlhttp请求 - JSON被覆盖

时间:2015-09-01 03:27:22

标签: javascript json xmlhttprequest

我必须做多个xmlhttp请求(每个国家一个)。问题是我的JSON总是被覆盖到最后一个请求的结果。无论如何我能解决这个问题吗?这是代码。

function getDataBetween()
{
    for (var i = 0; i < CountryNames.length; i++) 
    {
        var countryName = CountryNames[i];
        var xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) 
            {
                for (var a = 0; a < CountryNames.length; a++) 
                {
                    dataset[a] = JSON.parse(xmlhttp.responseText);
                    console.log(dataset[a]);
                }
            }
        }
        xmlhttp.open("GET","update.php?country=" + countryName + "&begin=" + beginTime + "&end=" + endTime + "&functionName=getActiveUsers", true);
        xmlhttp.send();
    }
    DrawStructure();
}

我已经找到了Promise的语法,但是我不确定如何在这种情况下使用它,我已经尝试过多种东西,但是我无法让它工作。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

1 个答案:

答案 0 :(得分:0)

您需要为每个请求跟踪单独的xmlHttpRequest个对象。就像现在一样,你的for循环使用相同的变量来存储它们,因此它们跟随的变量会覆盖后面的变量。有多种方法可以解决这个问题。一种方法是添加一个闭包,以便for循环的每次调用都有它自己的函数范围:

function getDataBetween()
{
    for (var i = 0; i < CountryNames.length; i++) 
    {
        (function() {
            var countryName = CountryNames[i];
            var xmlhttp = new XMLHttpRequest();

            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) 
                {
                    for (var a = 0; a < CountryNames.length; a++) 
                    {
                        dataset[a] = JSON.parse(xmlhttp.responseText);
                        console.log(dataset[a]);
                    }
                }
            }
            xmlhttp.open("GET","update.php?country=" + countryName + "&begin=" + beginTime + "&end=" + endTime + "&functionName=getActiveUsers", true);
            xmlhttp.send();
        })();
    }
    DrawStructure();
}

您还可以将对xmlhttp的引用更改为对this的引用,这样您就不会在xmlhttp处理程序中直接使用onreadystatechange变量&{ #39;被覆盖了:

function getDataBetween()
{
    for (var i = 0; i < CountryNames.length; i++) 
    {
        var countryName = CountryNames[i];
        var xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange=function()
        {
            if (this.readyState==4 && this.status==200) 
            {
                for (var a = 0; a < CountryNames.length; a++) 
                {
                    dataset[a] = JSON.parse(this.responseText);
                    console.log(dataset[a]);
                }
            }
        }
        xmlhttp.open("GET","update.php?country=" + countryName + "&begin=" + beginTime + "&end=" + endTime + "&functionName=getActiveUsers", true);
        xmlhttp.send();
    }
    DrawStructure();
}