jQuery

Gestire eventi con Ajax e jQuery

Nell’articolo precedente su Ajax e jQuery ho presentato il metodo load() che, però,é solo una delle opzioni messe a disposizione da jQuery per gestire richieste Ajax.

Infatti, l’interazione fra i due linguaggi non poteva esser limitata solo all’esempio visto la volta scorsa. In questo post vorrei entrare maggiormente in dettaglio con gli altri metodi che, vedrete, rivestono un’importanza notevole semplificando la vita non poco.

 

Metodo $.ajax

E’ il cuore dell’interazione Ajax e jQuery ed ha la seguente sintassi semplificata :

$.ajax({

  type : ‘GET’,

  url : ‘search.php’,

  success: function (data) {

    //gestione dei dati risultanti

  }

});

 

Si intuiscono facilmente le capacità e le possibilità delle varie opzioni partendo dal tipo di richiesta, la URL cui accedere via Ajax e la funziona di callback per gestire i dati risultanti. Ho parlato di sintassi semplificata perché son ben 20 le opzioni disponibili su questo metodo e l’elenco completo lo trovate qui.

 

Metodo $.ajaxSetup

Per evitare di ripetere la sintassi di base con le opzioni utilizzate spesso all’interno di una pagina, possiamo indicare le opzioni di default una sola volta all’inizio sfruttando questo metodo in modo da richiamare, invece, con il metodo classico $.ajax() il resto laddove serve.

 

Metodo $.ajaxStart e $.ajaxComplete

Se utilizzate gmail come client di posta elettronica, avrete notato la progress bar iniziale che vi sta informano del fatto che la pagina con le vostre mail sta caricando. Dietro c’è, in pratica, una chiamata Ajax che sta per essere completata e, quindi, é buona regola mostrare un messaggio di attesa che faccia comprendere all’utente che l’operazione si sta svolgendo.

Con jQuery, questo é possibile farlo sfruttando il metodo $.ajaxStart() e $.ajaxComplete().

$.ajaxStart(function() {
    $(“div#loading”).text(“Loading…”);
});

In questo caso, il metodo ajaxStart() chiama una funzione che inserisce un innerHTML nel div ‘loading’ con valore di testo pari a ‘Loading…’

Allo stesso identico modo ( con $.ajaxComplete() al posto di $.ajaxStart() ), è possibile inserire un messaggio di testo per indicare che la richiesta Ajax é completata.

 

Metodo $.get e $.post

Per le singole richieste in get e post, jQuery fornisce due metodi specifici.

$.get(url, data, callback, dataType) e $.post(url, data, callback, dataType)

dove, URL a parte, tutti gli altri parametri sono opzionali. Da sottolineare che questi metodi vanno sfruttati in caso di singole e precise richieste in quanto, ad esempio, non forniscono riscontro sul fatto che la richiesta sia andata a buon fine o meno.

Qualora servisse questo, quindi, conviene utilizzare il più completo $.ajax(). Trovate tutte le informazioni dettagliate nella pagina ufficiale.

 

Metodo $.ajaxError

Esistono due tipi di eventi Ajax in jQuery : locali e globali. Supponiamo che una chiamata Ajax ritorni un errore. Occorre scatenare un evento per catturarlo. Si tratta di un evento globale catturabile tramite il metodo $.ajaxError() che é possibile agganciare al nodo del DOM in cui volete mostrare l’errore generato.

$(“msg”).ajaxError(function(event,request,settings) {

$(this).html(“Errore nella pagina “ + settings.url + “!”);

}

Articoli simili

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.