如何让 XHR.onreadystatechange 返回其结果？

Question

我是 JavaScript 编程新手。我现在正在开发我的 Google Chrome 扩展程序。这是不起作用的代码... :P

我希望 getURLInfo 函数返回其 JSON 对象，并希望将其放入 resp 中。有人可以修复我的代码以使其正常工作吗？

function getURLInfo(url)
{
    var xhr = new XMLHttpRequest();
    xhr.open
        (
            "GET",
            "http://RESTfulAPI/info.json?url="
                + escape(url),
            true
        );
    xhr.send();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState == 4)
        {
            return JSON.parse(xhr.responseText);
        }
    }
}
var resp = getURLInfo("http://example.com/") // resp always returns undefined...

提前致谢。

Answer 1

您正在此处处理异步函数调用。结果在到达时处理，而不是在函数完成运行时处理。

这就是回调函数的用途。当结果可用时它们被调用。

function get(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            // defensive check
            if (typeof callback === "function") {
                // apply() sets the meaning of "this" in the callback
                callback.apply(xhr);
            }
        }
    };
    xhr.send();
}
// ----------------------------------------------------------------------------


var param = "http://example.com/";                  /* do NOT use escape() */
var finalUrl = "http://RESTfulAPI/info.json?url=" + encodeURIComponent(param);

// get() completes immediately...
get(finalUrl,
    // ...however, this callback is invoked AFTER the response arrives
    function () {
        // "this" is the XHR object here!
        var resp  = JSON.parse(this.responseText);

        // now do something with resp
        alert(resp);
    }
);

注意：

• escape() 已被永远弃用。不要使用它，它无法正常工作。使用encodeURIComponent()。
• 您可以通过将 open() 的 async 参数设置为 来使 send() 调用同步>假。这会导致您的 UI 在请求运行时冻结，而您不希望出现这种情况。
• 有许多库旨在使 Ajax 请求变得简单且通用。我建议使用其中之一。

Answer 2

对于异步 XHR 调用，您根本无法执行此操作。你不能让 JavaScript “等待”来自服务器的 HTTP 响应；您所能做的就是向运行时系统传递一个要调用的函数（您的处理程序），它会调用它。然而，该调用将在设置 XHR 的代码完成后很长时间发生。

然而，一切并没有丢失，因为该处理函数可以执行任何事情。无论您想对返回值执行什么操作，都可以在处理程序内部（或从处理程序内部调用的其他函数）执行。

因此，在您的示例中，您将更改如下内容：

    xhr.onreadystatechange = function()
    {
        if (xhr.readyState == 4)
        {
            var resp = JSON.parse(xhr.responseText);
            //
            // ... whatever you need to do with "resp" ...
            //
        }
    }
}

Answer 3

对于谈论帖子的小编辑： https://stackoverflow.com/a/5362513/4766489

...
if (typeof callback == "function") {
     //var resp  = xhr.responseText;
     var resp  = JSON.parse(xhr.responseText);
     callback(resp);
}
...

当你打电话时

...
function(data) {
    alert(data);
    /* now do something with resp */
}
...