javascript - 如何将 XMLHttpRequest 的输出存储在全局变量中

Question

我有一个网页将通过 XMLHttpRequest 加载几个 JSON 文件。
我想加载文件，解析 JSON 并将输出存储在全局可访问的变量中。
一旦 foo 和 bar 都完成，我才想调用 success() 函数。到目前为止，我的脚本有 2 个问题需要我帮助解决。

1:我无法将变量设置为 loadJSON() 的输出。我的猜测是我的返回声明有点古怪？我已经尝试了一切......帮助？

2:如何仅在设置了 foo 和 bar 之后调用 success()？

var foo;
var bar;

function initSession(){

    foo = loadJSON("foo.js");
    bar = loadJSON("bar.js");

}

我的猜测是问题在于我如何在 loadJSON() 函数中使用 return:

function loadJSON(url){

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){  
            return JSON.parse(xhr.responseText);  // doesn't work?
        }
    }

    xhr.open("GET", url, true);
    xhr.send();

    return xhr.onreadystatechange;
}



$(document).ready(function(){
    initSession();
});


function success(){ 
    $("body").append(foo[0]);  
    $("body").append(bar[0]);  
}

谢谢!

Answer 1

对于将来发现此问题的任何人...以下是我根据已接受答案中的讨论得出的最终解决方案。这很容易允许扩展在调用成功函数之前动态设置文件数。

var foo;
var bar;
var count = 0;

function initSession(){

    loadJSON("foo.js", "foo");
    loadJSON("bar.js", "bar");   

}

function loadJSON(url, name){

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function(){

        if(xhr.readyState == 4 && xhr.status == 200){  
            count++;
            window[name] = JSON.parse(xhr.responseText);;

            if (count == 2){
                success();
            } 
        }
    }

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



$(document).ready(function(){
    initSession();
});



function success(){ 
    $("body").append(foo[0].option + "<br>" + bar[0].fname + " " + bar[0].lname);  
}