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

Question

对于初学者的问题深表歉意。

我正在尝试使用 this answer将 JSON 文件中的数据读入我的 javascript。我已将答案中的代码直接粘贴到我的 javascript 的顶部(显然更改了 pathToFile.json)。我不确定的是我应该在“用你的数据做点什么”评论的地方做什么。我只想让解析后的 data 对象可用于我的其余代码，但作为 javascript 的新手，我并不真正理解回调函数的工作原理。当我运行它时，我可以看到控制台中记录的 JSON 文件中的数据，但是我尝试做的每一件(毫无疑问是愚蠢的)事情都没有奏效——我得到了一个 ReferenceError: data is 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);
});

Answer 1

那是因为数据被定义为 onreadystatechange 和回调函数范围内的局部变量。假设您不想尝试 jQuery 或其他一些框架，您可以像这样尝试将数据绑定(bind)到全局变量:

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 状态完成(给定您当前的实现)，它将被调用。因此，“对数据执行某些操作”下的所有内容都是在检索和解析数据后执行的(即回调函数的主体)。