JavaScript  »  Guide  »  Guida jQuery 

Al giorno d'oggi, poter contare su tecniche come AJAX permette di realizzare interazioni con l'utente paragonabili a quelle di un software desktop per reattività e tempi di caricamento. Tuttavia la possibilità di caricare informazioni in modo asincrono si scontra spesso con le differenti implementazioni dei browser e i differenti tipi di dati caricati (XML, JSON, HTML).

Tutte le moderne librerie JavaScript hanno risposto a questo problema con delle implementazioni cross-browser capaci di gestire in modo semplice tutti i vari aspetti di AJAX.

jQuery implementa AJAX attraverso una serie di metodi statici dell'oggetto $. Nonché con una serie di metodi per gestire eventi AJAX sugli elementi della collezione.

Eventi AJAX

Per comprendere il modo in cui jQuery gestisce AJAX bisogna introdurre gli eventi AJAX. Questi sono una serie di eventi che si susseguono prima, durante e dopo una richiesta AJAX e che vengono suddivisi in due categorie:

• locali: eventi che si verificano all'interno di una chiamata e che possono essere impostati solo all'interno di una funzione di $.
• globali: eventi che coinvolgono tutto il DOM e che quindi possono essere rintracciati ed impostati su una collezione di elementi con metodi come .bind().

Riporto di seguito la lista degli eventi AJAX gestiti da jQuery nell'ordine in cui avvengono durante una chiamata (tra parentesi il tipo di evento):

• ajaxStart (globale): quando la chiamata viene inizializzata
• beforeSend (locale) e ajaxSend (globale) : prima di inviare la chiamata
• success (locale) e ajaxSuccess (globale): quando una chiamata ha successo
• error (locale) e ajaxError (globale): quando avviene un errore
• complete (locale) e ajaxComplete (globale): quando la chiamata si conclude indipendentemente da errori
• ajaxStop (globale): quando non ci sono più chiamate da effettuare

Questa lista di eventi ci servirà per capire quali funzioni associare alle chiamate AJAX per personalizzare il modo in cui viene contattato il server e come manipolare i dati restituiti.

Inoltre, come detto in precedenza, gli eventi globali vengono lanciati su tutti gli elementi del DOM e per questo possono essere impostati attraverso il metodo .bind() o con specifiche scorciatoie:

$("#stato").bind("ajaxComplete",function () {
    //codice da eseguire
});
$("#stato").ajaxComplete(function () {
    //codice da eseguire
});

Poiché gli eventi globali risalgono il DOM a partire dall'elemento direttamente coinvolto nella richiesta, possono risultare utili per lanciare una funzione generica per ogni chiamata Ajax, come un avviso stile "messaggio di caricamento". Basta applicare la funzione all'elemento document:

$(document)
    .ajaxStart(
        function () {
            $("#messaggio").text("caricamento...");
        }
    )
    .ajaxStop(
        function () {
            $("#messaggio").text("");
        }
);

Altri articoli

Altre guide

Altre newsletter