10. Lavorare con Ajax

In questa lezione vedremo cioè come utilizzare jQuery per implementare chiamate asincrone mediante la tecnologia Ajax.

Si definisce asincrona una chiamata ad una risorsa esterna che non interferisce con l'esecuzione della risorsa chiamante; i risultati della risorsa esterna saranno utilizzabili solo quando disponibili senza "tempi morti" per l'utilizzatore (il caricamento della risorsa esterna avviene in background).
Una chiamata di questo tipo, quindi, permette di caricare una pagina, dei dati o,
più genericamente, di
effettuare una chiamata HTTP senza alcun redirect o refresh di pagina!
Tutte le procerdure, infatti, sono gestite lato client mediante il linguaggio Javascript.

Il metodo ajax()
Questo metodo permette di effettuare una chiamata Ajax e di personalizzarla con dei parametri passati tramite notazione JSON.

I parametri più importanti di una chiamata di questo tipo sono tre:

• url della risorsa che effettua il lavoro;
• dati da passare;
• funzione da eseguire al termine della chiamata.

Esistono inoltre una varietà di parametri che offrono un ulteriore raffinamento della chiamata, nella tabella che segue riassumo le principali:

OPZIONE	DEFAULT	DESCRIZIONE
async	true	Determina se la chiamata deve essere asincrona o sincrona.
complete		Consente di specificare una funzione che verrà eseguita al termine della chiamata indipendentemente che abbia dato successo o errore; è eseguita dopo success o error.
data		Contiene i dati che devono essere inviati alla risorsa che elabora la richiesta; il formato può essere sotto forma di oggetto (contenente delle coppie chiave/valore) oppure sotto forma di semplice stringa &key1=val1&key2=val2.
dataType	'xml' o 'html'	Tipo di dato che si riceve di ritorno; jQuery tenta di capirlo da solo, ma è sempre meglio specificarlo. I tipi possibili sono: "xml", "html", "script", "json", "jsonp" e "text".
error		Consente di specificare una funzione che verrà eseguita in caso di errore nell'effettuare la chiamata.
success		Consente di specificare una funzione che verrà eseguita al successo della chiamata.
type	'GET'	E' utilizzato per specificare il tipo di richiesta da effettuare, principalmente POST o GET; sono utilizzabili anche altri metodi HTTP (come ad es. PUT, DELETE, ...) ma non tutti i browser li supportano.
url	pagina corrente	URL della risorsa alla quale viene inviata la richiesta.

Vediamo un semplice esempio che mostri come si utilizzano questi parametri:

$.ajax({
  type: "POST",
  url: "/script/utenti.php",
  data: "nome=mario&cognome=rossi",
  dataType: "html",
  success: function(msg){
    $("div#risposta").php(msg);
  },
  error: function(){
    alert("Chiamata fallita!!!");
  }
}

11. Scorciatoie per Ajax: i metodi get(), post() e load()

jQuery fornisce anche alcune scorciatoie che permettono di realizzare una chiamata AJAX.

Le scorciatoie sono sostanzialmente tre:

• get();
• post();
• load();

I primi due metodi sono essenzialmente uguali ma differiscono per il metodo HTTP con cui caricano i dati (GET o POST);
il terzo metodo, invece, permette di caricare l'HTML di ritorno della chiamata direttamente dentro un elemento selezionato.

get() e post()

Entrambi questi metodi ammettono 4 parametri:

Parametro	DESCRIZIONE
url:	l'url della pagina da chiamare;
dati (opzionale):	dati passati alla pagina in formato stringa o JSON;
callback (opzionale):	funzione da eseguire in caso di successo;
tipodati (opzionale):	specifica quale tipo di dati ci si aspetta in ritorno.

Vediamo ora alcuni esempi per spiegare meglio il loro utilizzo:

$.get("ajax/utenti.php");

Con questo codice ci limitiamo ad effettuare una chiamata ad un file senza passargli dati ne pretendere dei dati in ritorno.

$.get("ajax/utenti.php", {nome:"Mario",cognome:"Rossi"});

Con quest'altro codice effettuiamo la chiamata passando dei dati senza richiedere alcuna risposta di ritorno.

$.get("ajax/utenti.php", {nome:"Mario",cognome:"Rossi"},
  function(data) {
    $("#risultato").php(data);
  });

Con questo codice, infine, richiediamo anche una risposta che viene inserita nell'elemento HTML con ID "risultato".

E' appena il caso di sottolineare che la chiamata con $.post() sarebbe stata identica.

Vediamo, per finire, un ultimo esempio che mostra come processare un modulo con metodo POST passando tutti i valori dei campi in un colpo solo:

$.post("ajax/elabora.php", ("#iscrizione").serialize(),
  function(){
    alert("Dati elaborati");
  });

Sono stati selezionati tutti i valori del form con ID ",iscrizione" utilizzando il metodo serialize() con il quale tutti i valori del modulo vengono predisposti in formato stringa da appendere alla URL.

load()
Il metodo load() è differente dai metodi visti precedentemente in quanto prende il risultato HTML e lo inserisce nell'elemento selezionato.

Come prima cosa quindi è necessario effettuare la selezione tramite un opportuno selettore e poi, solo successivamente, applicarvi tale metodo.

Riprendiamo lo stesso esempio che avevamo fatto con $.get() e implementiamo con load():

$('#risultato').load("ajax/utenti.php", {nome:"Mario",cognome:"Rossi"});

I dati sono passati tramite il metodo POST se scritti con notazione chiave/valore
(come nell'esempio),
altrimenti vengono passati utilizzando GET.

Qualora le nostre necessità siano più articolate sarà, pertanto, necessario utilizzare il classico metodo ajax().

12. Ajax: eventi locali e globali

Gli eventi legati alle chiamate Ajax si possono dividere in due famiglie:

• eventi locali
• eventi globali

Eventi locali
Questi eventi riguardano la singola chiamata Ajax.


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.

Questi eventi possono, quindi, essere catturati da qualunque elemento tramite il giusto handler: per fare ciò si utilizza il metodo bind() che lega appunto un evento generico ad una nostra funzione.

$("#loading_gif").bind("ajaxSend",function(){
   $(this).show();
 })
 .bind("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,
  // altri parametri
});

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.

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.