如何利用异步XMLHttpRequest的回调函数？

Question

我目前正在编写JavaScript，并对callback感到困惑。我发现它不是内置函数...我现在正在阅读O'Relly JavaScript第5版，它显示了示例代码，如下所示：getText = function(url, callback) // How can I use this callback?{    var request = new XMLHttpRequest();    request.onreadystatechange = function()    {        if (request.readyState == 4 && request.status == 200)        {            callback(request.responseText); // Another callback here        }    }    request.open('GET', url);    request.send();}基本上，我想我不了解callback…… 的总体思路。有人可以编写一个示例代码来利用callback以上内容吗？

Answer 1

回调非常简单又漂亮！由于AJAX调用的性质，您不会阻塞脚本的执行，直到您的请求结束（然后它将是同步的）。回调只是一种指定用于在响应返回到您的方法后处理响应的方法。

由于javascript方法是一流的对象，因此可以像变量一样传递它们。

所以在你的例子中

getText = function(url, callback) // How can I use this callback?

{

    var request = new XMLHttpRequest();

    request.onreadystatechange = function()

    {

        if (request.readyState == 4 && request.status == 200)

        {

            callback(request.responseText); // Another callback here

        }

    }; 

    request.open('GET', url);

    request.send();

}

function mycallback(data) {

   alert(data);

}

getText('somephpfile.php', mycallback); //passing mycallback as a method

如果执行上述操作，则意味着您mycallback作为处理响应（回调）的方法传递。

编辑

尽管此处的示例并未说明回调的适当好处（毕竟您可以简单地将警报放在onReadyStateChange函数中！），但是重用性无疑是一个因素。

您必须记住，这里重要的是JS方法是一流的对象。这意味着您可以像传递对象一样传递它们并将它们附加到各种事件上。事件触发时，将调用附加到这些事件的方法。

当您执行此操作时，request.onreadystatechange = function(){}您只是在触发适当的事件时分配要调用的方法。

因此，这里很酷的事情是这些方法可以重用。假设您有一个错误处理方法，当AJAX请求中为404时，该方法会弹出警报并填充HTML页面中的某些字段。

如果您无法分配回调或将方法作为参数传递，则必须一遍又一遍地编写错误处理代码，而要做的只是将其分配为回调，所有错误处理将被排序一气呵成。