Javascript 使用ajax和回调函数检索读取的JSON数据

为这个非常初级的问题道歉

我正在尝试使用将JSON文件中的数据读入javascript。我已经将答案中的代码直接粘贴到javascript的顶部（显然更改了

pathToFile.json

）。我不确定的是，在“对数据做点什么”的评论中，我应该做什么。我只想让解析后的

数据

对象可用于我的其余代码，但由于对javascript非常陌生，我并不真正理解回调函数是如何工作的。当我运行JSON文件时，我可以看到控制台中记录的JSON文件中的数据，但我试图从函数中“取出”的每一件（毫无疑问是愚蠢的）事情都没有起作用——当我稍后尝试引用它时，我会收到一条

ReferenceError:data not defined

消息

下面是另一个答案的代码：

function fetchJSONFile(path, callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                var data = JSON.parse(httpRequest.responseText);
                if (callback) callback(data);
            }
        }
    };
    httpRequest.open('GET', path);
    httpRequest.send(); 
}

// this requests the file and executes a callback with the parsed result once
//   it is available
fetchJSONFile('pathToFile.json', function(data){
    // do something with your data
    console.log(data);
});

---

这是因为数据被定义为

onreadystatechange

和回调函数范围内的局部变量。假设您不想尝试jQuery或其他框架，可以这样尝试将数据绑定到全局变量：

var app = (function(){

    var json;

    function fetchJSONFile(path, callback) {
        var httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState === 4) {
                if (httpRequest.status === 200) {
                    var data = JSON.parse(httpRequest.responseText);
                    if (callback) callback(data);
                }
            }
        };
        httpRequest.open('GET', path);
        httpRequest.send(); 
    }

    // this requests the file and executes a callback with the parsed result once
    //   it is available
    fetchJSONFile('pathToFile.json', function(data){
        // do something with your data
        json = data;
    });

    return { getData : function()
    {
        if (json) return json;
        else return false;//or show some msg that 'data is not loaded yet'
    }};

})();

// you now have access to your data via:
app.getData(); // will either be false or contain the data 

---

关于回调函数，这是一个传递给fetchJSONFile的函数，一旦从httpRequest检索到数据，就会调用该函数。因为这是异步的，所以您无法控制何时调用回调函数——一旦请求以OK状态完成，就会调用回调函数（给定您当前的实现）。因此，“对数据做点什么”下的所有内容都是在检索和解析数据（这是回调函数的主体）后将执行的内容。

那么我是否要在代码的其余部分中引用

app.data

？如果我尝试的话，我仍然觉得它是未定义的…一旦定义了，你就可以。请记住，回调函数是异步调用的。在调用回调之前，不会定义app.data。检查我更新的答案，可能会更清楚。现在您有了一个全局引用app.getData（），它要么是您的json，要么是false（而不是给您未定义的）。好的，如果我理解的话，json的读取是“异步的”，即，它发生在“后台”，而其余代码正在运行。因此，当我稍后尝试使用它时，会遇到问题，因为它还没有加载（在本例中，我得到app.getData（）返回false）。如果我对这个东西了解得更多，我就能让它在json安全加载之前不运行？这是正确的。根据您的实现，您可以始终检查app.getData（），如果不为false，则继续执行您想对数据执行的任何操作。我认为，随着您对JS越来越熟悉，您可以开始使用框架，例如Angular，它有自己独特的方式将数据绑定到模型，并在准备好时更新DOM/视图。作为下一步，您可能想查看jQuery，它在执行AJAX请求等操作时为您保存了样板代码。我现在已经完成了这项工作，将我的所有其余代码都设置为一个函数，并从

fetchJSONFile

函数中调用该函数，我想回想起来很明显。