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

Question

我目前正在编写 JavaScript，并对回调感到困惑。我发现它不是一种内置函数...
我现在正在阅读 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 页面中的某些字段。

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

<小时/>