In questa lezione soffermeremo la nostra attenzione sui diversi eventi legati alle chiamate Ajax. Per prima cosa possiamo dire che tali eventi possono essere divisi in due famiglie:
- eventi locali
- eventi globali
Vediamoli speratamente.
Eventi locali
Questi eventi riguardano la singola chiamata Ajax e possono essere impostati all’interno della stessa, essendo dei possibili parametri del metodo .ajax(). Ad ognuno di questi eventi è possibile associare una funzione e qualunque personalizzazione che si desidera effettuare. Se si utilizzano le scorciatoie descritte nella lezione precedente – .get(), .post o .load() – invece non è possibile abilitare questo tipo di eventi.
Vediamo un semplice esempio di questo tipo di eventi:
$.ajax({
beforeSend: function(){
// cosa fare prima che la chiamata parta
},
success: function(){
// cosa fare al successo della chiamata
},
complete: function(){
// cosa fare alla completamento (dopo success o error) della chiamata
}
//altri parametri del metodo .ajax()
...
});Eventi globali
Gli eventi globali sono gli eventi generati da tutte le chiamate Ajax ed inviati a tutti gli elementi del DOM. Queesti eventi possono, quindi, essere catturati da qualunque elemento tramite il giusto handler: per fare ciò si utilizza il metodo .on() che, come già detto, lega appunto un evento generico ad una nostra funzione.
Un classico esempio consiste nel mostrare una gif animata di caricamento sfruttando gli eventi (globali) ajaxSend e ajaxComplete: si mostra la gif quando inizia una generica chiamata asincrona e si nasconde quando questa termina.
$("#loading_gif").on("ajaxSend",function(){
$(this).show();
})
.on("ajaxComplete",function(){
$(this).hide();
});Molto spesso, in fase di personalizzazione delle chiamate e dei loro eventi, può essere necessario che una chiamata non generi eventi globali, ma solamente eventi locali. Per ottenere un simile risultato è sufficiente impostare come false il parametro global all’interno della nostra chiamata mediante il metodo .ajax():
$.ajax({
global: false,
// ...
});Tutti gli eventi di Ajax
Vediamo di seguito un rapido elenco degli eventi che è possibile catturare:
- Eventi Locali:
- beforeSend: attivato prima che una chiamata cominci;
- success: attivato quando la chiamata ha successo (non ci sono errori dal server o nei dati di ritorno);
- error: attivato in caso di errore della chiamata;
- complete: attivato quando una chiamata Ajax è completata (dopo error o success);
- Eventi Globali:
- ajaxStart: attivato quando una chiamata Ajax ha inizio e nessun’altra è in esecuzione;
- ajaxSend: uguale all’evento beforeSend ma globale;
- ajaxSuccess: come success, ma globale;
- ajaxError: come error, ma globale;
- ajaxComplete: come complete, ma globale;
- ajaxStop: attivato quando non ci sono più richieste Ajax in attesa di essere processate.
Si noti ch gli eventi ajaxStart e ajaxStop riguardano tutte le chiamate Ajax prese nel loro insieme e non singolarmente come accade, invece, per tutti gli altri eventi, locali o globali che siano.
