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(); // *

        }

Answer 2

使用Javascript承诺可以解决您的问题。 Promises are native to ES6，虽然browser support显然还不完全。Here is a jsfiddle。无论如何，您可以通过promises实现代码：

window.onload = function () {
  myJsonData().then(function (result) {
      console.log("myJsonArray: " + result);
      alert(result.one);
      // do something else here
  });
}

function myJsonData() {
  return new Promise(function (resolve, reject) {
      var request = new XMLHttpRequest();
      request.open("GET", "http://echo.jsontest.com/key/value/one/two", 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"];
                  resolve(myJsonString);
              }
          }
      } // onreadystatechange
  });
} // var myJsonData

Answer 3

根据我的经验和理解。

在处理同步功能和异步功能时，始终重要的是要知道哪些功能需要异步回调功能中的数据。

如果功能完全取决于接收到的数据，则在循环中调用这些功能将是一种良好的编码习惯

if (request.readyState === 4) {
    if (request.status === 200) {
        var myJsonString = JSON.parse(request.responseText);
        // call the function which depend on the data received here.
    }
}

我不建议将异步设置为false，因为有时会导致页面冻结。

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

3 个答案: