javascript - 访问加载时 ajax 请求返回的数据

Question

我一直在开发一个单页网站，其中来自单个 json 文件的数据在不同部分以不同方式呈现 - 加载时不显示任何内容，但仅在单击事件时显示。我了解了一些有关回调的知识，但当我几乎完成它时，我意识到这个概念有多么有缺陷，所以现在我回到了绘图板。

我现在的想法是让ajax调用onload，将json结果设置为可用于多个函数的变量。我以为事情会是这样的:

window.onload = function() {

    var myJsonData = function() {
        var request = new XMLHttpRequest();
        request.open("GET", "/json/someJsonData.json", true);
        request.setRequestHeader("content-type", "application/json");
        request.send(null);
        request.onreadystatechange = function() {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    var myJsonString = JSON.parse(request.responseText);
                    var myJsonArray = myJsonString["Projects"];
                    return myJsonArray;
                }
            }
        } // onreadystatechange
    } // var myJsonData

    myJsonData(); // *
    console.log("myJsonArray: " + myJsonArray); // undefined

或者:

window.onload = function() {
    myJsonData();
}

function myJsonData() {
    var request = new XMLHttpRequest();
    request.open("GET", "/json/someJsonData.json", true);
    request.setRequestHeader("content-type", "application/json");
    request.send(null);
    request.onreadystatechange = function() {
        if (request.readyState === 4) {
            if (request.status === 200) {
                var myJsonString = JSON.parse(request.responseText);
                var myJsonArray = myJsonString["Projects"];
                alert("you are here (myJsonArray defined)");
                alert("myJsonArray: " + myJsonArray);
                console.log("myJsonArray: " + myJsonArray);
                return myJsonArray;
            }
        }
    } // onreadystatechange
} // var myJsonData

console.log("myJsonArray: " + myJsonArray); // undefined

或者:

window.onload = myJsonData;
// etc.

当然，myJsonArray 无论如何都是未定义的。我显然错过了一些关于如何做到这一点的基本知识(或者这完全是一个坏主意？)。在加载时调用 ajax 请求时，是否有某种方法可以将结果作为回调传递？

有人可以告诉我如何从这里开始吗，也许是一个骨架示例？ (p.s.仍然专注于原生js，而不是jQuery)

提前非常感谢，

svs

Answer 1

代码中有一些错误。首先，myJsonArray 是函数 myJsonData() 的本地函数。您必须在全局范围内定义它。其次，ajax请求是异步的。您必须等待结果才能使用它。这是一个基于您的代码的工作示例:

   var myJsonArray;  //Globally defined
        window.onload = function() {

            var outputData = function() {
                console.log(myJsonArray);
            }

            var myJsonData = function() {
                var request = new XMLHttpRequest();
                request.open("GET", "someJsonData.json", true);
                request.send(null);
                request.onreadystatechange = function() {
                    if (request.readyState === 4) {
                        if (request.status === 200) {

                            myJsonArray = JSON.parse(request.responseText);
                            outputData(); //Ouput when result is received
                        }
                    }

                } // onreadystatechange


            } // var myJsonData

            myJsonData(); // *

        }