javascript - jQuery ajax成功回调函数定义

Question

我想使用 jQuery ajax 从服务器检索数据。

我想将成功回调函数定义放在 .ajax() block 之外，如下所示。那么我是否需要像下面这样声明变量 dataFromServer 以便我能够使用成功回调返回的数据？

我见过大多数人在 .ajax() block 中定义成功回调。那么如果我想在外面定义成功回调，下面的代码是否正确？

var dataFromServer;  //declare the variable first

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData(dataFromServer)
    })
}

function handleData(data) {
    alert(data);
    //do some stuff
}

Answer 1

自 jQuery 1.5(2011 年 1 月)以来执行此操作的"new"方法是使用延迟对象而不是传递 success 回调。您应该返回 $.ajax 的结果，然后使用.done、.fail 等方法添加$.ajax 调用之外的回调。

function getData() {
    return $.ajax({
        url : 'example.com',
        type: 'GET'
    });
}

function handleData(data /* , textStatus, jqXHR */ ) {
    alert(data);
    //do some stuff
}

getData().done(handleData);

这分离回调处理与 AJAX 处理，允许您添加多个回调、失败回调等，所有这些都无需修改原始 getData()功能。将 AJAX 功能与之后要完成的操作集分开是一件好事!。

Deferreds 还允许更轻松地同步多个异步事件，这是您无法通过 success:

轻松实现的

例如，我可以添加多个回调、一个错误处理程序，并在继续之前等待计时器结束:

// a trivial timer, just for demo purposes -
// it resolves itself after 5 seconds
var timer = $.Deferred();
setTimeout(timer.resolve, 5000);

// add a done handler _and_ an `error:` handler, even though `getData`
// didn't directly expose that functionality
var ajax = getData().done(handleData).fail(error);

$.when(timer, ajax).done(function() {
    // this won't be called until *both* the AJAX and the 5s timer have finished
});

ajax.done(function(data) {
    // you can add additional callbacks too, even if the AJAX call
    // already finished
});

jQuery 的其他部分也使用延迟对象 - 您可以使用它们非常轻松地将 jQuery 动画与其他异步操作同步。