javascript - XMLHttpRequest 返回未定义的响应，但适用于 console.log

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 4 年前。

我正在尝试读取本地 myjson.json 文件并将其内容打印到我的index.html。我正在使用以下 JavaScript 代码:

function getJSON() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/myfolder/myjson.json', false);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE) {
        var response = xhr.responseText;
        console.log("response: " + response); //Correctly prints JSON content to console
        return response; //response is undefined when called from html
        }
    }
    xhr.send(null);
}

我像这样调用函数 getJSON() :

document.getElementById("contentOfJSON").innerHTML += "JSON: "+getJSON();

这会将 myjson.json 的内容正确打印到 console.log，但我的 HTML 元素“contentOfJSON”仅包含“JSON:未定义”。尽管 console.log 正在工作，为什么我仍收到未定义的响应？

Answer 1

您将字符串返回给 onreadystatechange 的调用。

您的函数 getJSON 不返回任何内容。

据我所知，同步应该被贬值，因此只需将成功函数传递到 getJSON 中，然后通过将结果字符串传递到回调中来调用它即可使其异步。

function getJSON(mycallback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/myfolder/myjson.json', false);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE) {
        var response = xhr.responseText;
        console.log("response: " + response); //Correctly prints JSON content to console

        // call it here
        mycallback(response);
        }
    }
    xhr.send(null);
}


getJSON(function(result)
{
    document.getElementById("contentOfJSON").innerHTML += "JSON: " + result;
});