jQuery: gestione delle richieste AJAX con i Deferred Object

Conosciamo bene la gestione degli errori in AJAX con jQuery, ma forse non abbiamo mai sfruttato le potenzialità dei Deferred Object per tale scopo.

In AJAX solitamente usiamo un unico blocco di istruzioni nel wrapper $.ajax() e gestiamo la richiesta tramite i callback success ed error.

Lo svantaggio di questa soluzione è che siamo interamente vincolati al wrapper AJAX e al suo namespace creato dallo scope del blocco. Con i Deferred possiamo creare tre funzioni distinte e svincolate da un solo contesto.

var makeRequest = function() {
    $.ajax({
        url: 'ajax.php',
        dataType: 'json',
        type: 'GET',
        data: {
            q: 1
        }
    });
};

var handleSuccess = function(data) {
    // elaboro i dati
};

var handleFailure = function() {
  // richiesta fallita
};

Quindi usiamo i Deferred:

$.when(makeRequest()).
    done(handleSuccess()).
    fail(handleFailure());

Possiamo anche aggiungere una quarta funzione che verrà sempre eseguita indipendentemente dal successo o dal fallimento della richiesta utilizzando always():

var endAJAX = function() {
    //...
};

$.when(makeRequest()).
    done(handleSuccess()).
    fail(handleFailure()).
    always(endAJAX());

In questo modo il nostro codice è indipendente dal contesto e può essere riutilizzato più volte.