Chiamate asincrone con jQuery

Una delle grandi potenzialità di jQuery è gestire comodamente chiamate asincrone Ajax/JSON, funzionalità che, nonostante sia sempre più utilizzata, prima di jQuery (o di altre librerie Javascript) era molto “ingombrante”.

Cos’è Ajax?

Da Wikipedia:

AJAX, acronimo di Asynchronous JavaScript and XML, è una tecnica di sviluppo per la realizzazione di applicazioni web interattive (Rich Internet Application). Lo sviluppo di applicazioni HTML con AJAX si basa su uno scambio di dati in background fra web browser e server, che consente l’aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell’utente.

La descrizione di tale concetto può risultare difficile da comprendere, in realtà il passaggio più delicato è capire come lavora una chiamata asincrona.
Vediamo in un immagine il comportamento di una chiamata asincrona:

Lo scambio asincrono di dati (nel nostro caso tra HTML e XML) è illustrato in modo semplice nell’immagine, dalla nostra pagina HTML tramite una funzione Javascript (o jQuery) effettueremo una chiamata ad un file XML con la finalità di ottenere alcuni dati presenti in esso; al termine di questa chiamata sempre tramite Javascript avremo tali dati su una variabile da noi definita, a quel punto non ci resta che integrarli nell’HTML tramite il DOM.

Il file XML

Innazitutto è necessario un file XML (per chi non conoscesse tale linguaggio può farsi un idea su Wikipedia) dove saranno contenuti i dati che andremo ad aggiungere alla nostra tendina (facendo riferimento al tutorial “Popolare un menu a tendina con jQuery“). Sfruttiamo Wikipedia e utilizziamo il foglio XML in esempio:

<?xml version="1.0" encoding="UTF-8"?>
<utenti>
    <utente>
        <nome>Luca</nome>
        <cognome>Cicci</cognome>
        <indirizzo>Milano</indirizzo>
    </utente>
    <utente>
        <nome>Max</nome>
        <cognome>Rossi</cognome>
        <indirizzo>Roma</indirizzo>
    </utente>
</utenti>

Il file HTML e la chiamata Ajax con jQuery

Una volta a disposizione il nostro file prendiamo la pagina in cui andremo a posizionare la nostra chiamata AJAX e aggiungiamo jQuery nel tag head:

   <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function() {
         //Codice jQuery
      });
   </script>

Assicuriamoci di avere all’interno del body la nostra select con id utenti senza alcuna option e creiamo la chiamata AJAX tramite l’omonima funzione .ajax().

      $.ajax({
         url: 'dati.xml',
         dataType: 'xml',
         success: function(data) {
            alert(data);
         },
         error: function() {
            alert('Errore: File XML non trovato');
         }
      });

Analizziamo i parametri della funzione che abbiamo utilizzato:
url : E’ l’indirizzo della pagina dove reperire i dati, in questo caso il nostro dati.xml.
dataType : Definisce il tipo di file su cui sono presenti i dati, le chiamate asincrone infatti si possono effettuare con l’XML ma anche con JSON oppure con del semplicissimo testo.
success : In questo parametro si definire “cosa fare” in caso di successo.
error : In questo parametro invece si definire “cosa fare” in caso di errore.

Possiamo testare il funzionamento, aprendo la nostra pagina ci apparirà una finestra dove ci segnalerà l’errore nel caso di una URL sbagliata del file dati.xml oppure ci segnalerà la presenza di un Object nella variabile data in caso di successo.
Sarà proprio la variabile data che andremo a manipolare con il DOM per popolare dinamicamente la nostra tendina:

      $.ajax({
         url: 'dati.xml',
         dataType: 'xml',
         success: function(data) {
            $(data).find('utente').each(function(){
               nome = $(this).find('nome').text();
               cognome = $(this).find('cognome').text();
               $('#utenti').append('' + nome + ' ' + cognome + '');
            });
         },
         error: function() {
            alert('Errore: File XML non trovato');
         }
      });

Esaminiamo cosa succede quando la chiamata va a buon fine: la prima operazione è un mix di due funzioni jQuery, .find() e .each(). Se per .each() sappiamo quale sia il funzionamento (nel caso contrario andate a rivedere il tutorial su Popolare dinamicamente un tendina in jQuery) la funzione .find() invece ci è sconosciuta, cosa fa?
Semplicemente cerca un riscontro (nel nostro caso “utente”) in una struttura ad albero (come potrebbe essere una matrice o in questo caso un file XML) partendo dal padre (nel nostro caso la variabile data che contiene i dati del nostro XML). Associata alla funzione .each() permette di “ciclare” soltanto alcuni elementi figlio in modo da filtrare i nodi che non ci interessano.

Una volta nel ciclo la riutilizziamo per scaricare su due variabili (nome e cognome) il contenuto dei tag XML nome e cognome. A questo punto avremo due variabili (nome e cognome) che potremo andare ad inserire nella nostra tendina con la funzione .append() associata all’id utenti.

Conclusioni

In questo tutorial avete tutto il necessario per cominciare a sperimentare con Ajax, i passaggi fondamentali sono:

• Avere a disposizione una sorgente di dati (XML/JSON/testo)
• Utilizzare la funzione .ajax() con l’URL corretto della sorgente dati
• Gestire i dati ottenuti per comporre la nostra tendina

Comporre una tendina è soltanto una delle tante funzionalità che permette Ajax, si possono moltissime altre cose cambiando la sorgente di dati o il meccanismo di gestione dei dati ottenuti.

Tutto il contenuto di questo breve tutorial è scaricabile cliccando
Download

Condividi questo articolo:

• Tweet

Info sull' autore:

Appassionato di "web" fin dall'arrivo in casa del primo modem sono diventato nel 2008 uno Sviluppatore Web per Acktel. Sono un amante delle "novità" e dei nuovi linguaggi ma anche di grafica e disegno. Tutte le novità che scopro le condivido sul il mio Blog
Leggi gli altri articoli di Alessandro Alessio