如何让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参数设置为false 来使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 */
}
...