Question

我尝试从JSON文件访问数据，但控制台的结果是undefined。

GET响应很好，功能有效，但我不知道如何访问响应。

function AJAX_JSON_Req(url) {
    var AJAX_req = new XMLHttpRequest();
    AJAX_req.open("GET", url, true);
    AJAX_req.setRequestHeader("Content-type", "application/json");

    AJAX_req.onreadystatechange = function() {
        if(AJAX_req.readyState == 4 && AJAX_req.status == 200){
            return JSON.parse(AJAX_req.responseText);
        }
    };

    AJAX_req.send();
}

var q = AJAX_JSON_Req('questions.json');

console.log(q); //undefined

http://codepen.io/gsg/pen/LEEeMg

Answer 1

请记住，这是一个异步功能。尝试使用回调，看看你是否有更多的成功。

function AJAX_JSON_Req(url, callback) {
    var AJAX_req = new XMLHttpRequest();
    AJAX_req.open("GET", url, true);
    AJAX_req.setRequestHeader("Content-type", "application/json");

    AJAX_req.onreadystatechange = function() {
        if(AJAX_req.readyState == 4 && AJAX_req.status == 200){
            callback(JSON.parse(AJAX_req.responseText));
        }
    };

    AJAX_req.send();
}

AJAX_JSON_Req('questions.json', function (q) {
  console.log(q);
});

Answer 2

AJAX代表 Asyncronous JavaScript和XML。

这意味着当您的功能结束时，您还没有数据。

onreadystatechange是一个事件监听器。它是一种非标准形式：

AJAX_req.addEventListener("readystatechange", function () {
    // state changed
});

一个简单的解决方案是传入回调，例如：

AJAX_JSON_Req("questions.json", function (reply) {
    console.log(reply);
});

并且：

AJAX_req.addEventListener("readystatechange", function () {
    // check state == 4
    callback(JSON.parse(AJAX_req.responseText));
});

处理异步的常用方法是使用Promises。这可以避免回调地狱。

所以你会得到类似的东西：

AJAX_JSON_Req("questions.json").done(function (reply) {
    console.log(reply);
});

Promise本身不可用（但）你可以编写自己的实现或使用一个流行的框架。

现在AJAX_JSON_Req("questions.json")会返回一些东西：一个承诺。你还没有价值，但你承诺最终你会得到它。

使用vanilla JavaScript将JSON数据存储在变量中

2 个答案: