成功コールバック関数を jQuery Ajax 呼び出しから切り離す

jQuery Ajax を使用してサーバーからデータを取得する場合、成功を定義するのが一般的です。 .ajax() ブロック内のコールバック関数。これにより、コールバック処理が AJAX 呼び出しと密接に結合され、柔軟性と再利用性が制限されます。

.ajax() ブロックの外側で成功コールバックを定義するには、通常、返されたデータを格納する変数が宣言されます。ただし、遅延オブジェクトを使用するより新しいアプローチが推奨されます。

jQuery 1.5 以降、遅延オブジェクトは、AJAX 呼び出しなどの非同期操作を処理するためのより良い方法を提供します。これを実現する方法は次のとおりです。

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

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

getData().done(handleData);

このアプローチでは、コールバック処理を AJAX 呼び出しから切り離し、複数のコールバック、エラー処理、非同期イベントの同期を簡単に行うことができます。

たとえば:

// Timer for demo purposes, resolves itself after 5 seconds
var timer = $.Deferred();
setTimeout(timer.resolve, 5000);

// Get data using AJAX and attach done and error handlers
var ajax = getData().done(handleData).fail(error);

// Wait for both AJAX and timer to finish before continuing
$.when(timer, ajax).done(function() {
    // Both AJAX and 5s timer have finished
});

// Additional callbacks can be added even after AJAX call finishes
ajax.done(function(data) {
    //Do some stuff with data
});

これは、遅延オブジェクトの力を実証し、jQuery アプリケーションでの非同期操作のより優れた制御と柔軟性を可能にします。