EspertoWeb

AJAX: un esempio pratico

francesco leonetti

Avrei voluto parlarvi del web 2.0, ma siccome non so bene neanche io cosa sia, ho pensato invece di parlarvi di una tecnica, anzi, di un insieme di tecniche, che sono niente affatto nuove e che però sono ritenute alla base della costruzione di siti web 2.0: AJAX.

Ne ho accennato in un articolo precedente, ora voglio parlarne un poco più diffusamente.

AJAX è una parola che conoscono tutti. La conosce mia nonna perché ci lavava le pentole contro lo sporco difficile, con una pannocchia che sembrava filo di ferro sottile sottile (non ho mai ben capito che materiale fosse davvero), la conosce il professore di storia e filosofia perché è il nome del prode Aiace, cugino di Achille e figlio di Telamonio. Troppo prode: fece una brutta fine. Ben gli sta. All'epoca io facevo il tifo per Ettore.

La conosce anche lo studente del professore di storia e filosofia, ma non per Patroclo, Achille e soci, ma perché nome della gloriosa squadra di Amsterdam, che ha proprio il testone di Aiace come stemma. Chissà, se il prof. fosse partito da Cruijff (il Pelé bianco) per spiegare l'Iliade, forse l'avrei capita meglio anch'io ;)

Ora la conosciamo anche noi informatici, perché qualche buontempone ha deciso di affibbiare questo polisemico acronimo ad un modo di sviluppare software che noi invece chiamavamo: "con xmlhttprequest". Ajax effettivamente fa più figo.

Siccome siete impazienti, espando l'acronimo: Asynchronous Javascript And Xml.

Soddisfatti? No. Anche questa volta l'espansione dell'acronimo reca più danni cognitivi che benefici. Però un poco di coerenza c'è in questo "XML e Javascript Asincrono" con l'insieme delle tecniche che si vuole denotare con AJAX. Se avete pazienza, e soprattuto interesse, provate a seguirmi e se accelero troppo tirate il freno.

Come ogni tecnica di sviluppo web, AJAX nasce per risolvere un problema (ponendone poi altri, ma questo è normale). Vediamo quindi prima qual è il problema che risolve.

Quando si interagisce con una pagina web, quando cioè si clicca su alcune sue parti, non è sempre detto che la risposta debba essere: "eccoti la nuova pagina". Alle volte l'esito della interazione può essere fornito nel contesto della stessa pagina in cui ci si trova. Ad esempio, se sto guardando la mappa di una città e volessi evidenziarne solo i monumenti di maggiore interesse artistico, al click su "Monumenti" non mi aspetto che debba cambiare pagina e attendere che mi arrivi quella nuova come se avessi cliccato su un link di navigazione. Mi aspetto invece che, rimanendo sulla stessa pagina, sulla mappa compaiano i punti relativi ai monumenti. La mia interazione, cioè, non è di "navigazione", ma di "manipolazione" del contenuto della stessa pagina in cui mi trovo.

In definitiva: con un click non si deve andare sempre e comunque ad un'altra pagina ma deve essere possibile cambiare dinamicamente il contenuto della stessa pagina in cui ci si trova.

Questo è quello che facciamo continuamente ad esempio quando lavoriamo con Excel o su un documento Word.

Nell'impostare i dati di una tabella di Excel , non ci aspettiamo che ad ogni nostra azione debba essere ricaricato il documento, ma vediamo semplicemente ed immediatamente sul documento l'esito delle nostre azioni.

Questa nuova visione concettuale è alla base del Web 2.0: il web non più come insieme di pagine da sfogliare, ma come applicazioni web da usare.

Questo è il problema.

AJAX consente di risolverlo e di realizzare comportamenti da "applicazione" e non da "pagina".

Con AJAX, in pratica, gli sviluppatori web sono in grado di far corrispondere ad un click o in generale ad un evento generato dall'utente, non più solo il mero "cambio pagina", ma effettuare una chiamata al server, ottenere da questi nuovi dati e utilizzarli per modificare dinamicamente i contenuti dell'attuale pagina. Il tutto in modo trasparente per l'utente, che crede di trovarsi sempre sulla stessa pagina e ne vede però "magicamente" cambiare i contenuti.

In teoria, grazie ad AJAX, un sito web potrebbe essere formato da una sola pagina, il cui contenuto viene di volta in volta variato in conseguenza dei click dell'utente che però non vedrà mai il messaggio: "attendere, caricamento pagina in corso..." e avrà invece la sensazione di restare sempre e solo su un'unica pagina.

Le applicazioni pratiche di questa tecnica sono numerose e alcune davvero portentose.

Basta dare un'occhiata, ad esempio, a tutto quello che offre Google.

Ve ne voglio dare un saggio anch'io, di tutt'altro genere.

Ho costruito un automa, George, che è in grado di dialogare in modo interattivo.

George si presenta e offre all'utente tre possibili stimoli con cui iniziare il dialogo.

L'utente ne seleziona uno e lo invia. George, in base allo stato in cui si trova e allo stimolo ricevuto, cambia stato, reagisce con un'altra frase e propone altri tre possibili stimoli con cui l'utente può far proseguire il dialogo. E così via fino a raggiungere lo stato finale (l'automa, per fortuna, è a "stati finiti").

Per rendere il dialogo un poco vario, ho fatto in modo che la frase corrispondente ad uno stato non sia sempre quella, ma scelta in modo casuale da un insieme di frasi tutte comunque associate a quello stato. Si potrebbe fare una cosa analoga anche per i rispettivi stimoli. Ma per l'esempio è meglio tenere le cose semplici.

Schematicamente George è così:

Provate a vederlo in azione.

Ragioniamo un po' su come funziona.

Innanzitutto avete notato che non avete mai cambiato pagina. I vari click continuano a farvi stare sulla stessa pagina. Eppure i contenuti cambiano e sono stati prelevati dal server senza che voi ne abbiate avuto cognizione. Tutto sembra svolgersi sul "lato client". Avete cioè la sensazione di interagire con un'applicazione e non con un insieme di pagine.

In realtà il "lato client", ad ogni click, avvia una comunicazione con il "lato server", per riuscire a modificare i contenuti.Questa comunicazione è effettuata attraverso AJAX.

In pratica la pagina web, in conseguenza del click, invoca una funzione Javascript, la quale, utilizzando un oggetto del browser, chiamato "xmlhttprequest", apre una comunicazione con una procedura sul server, in questo esempio la procedura è in PHP. Il server restituisce i dati, in genere rappresentati in XML (ma nel mio esempio sono in JSON) e invoca un'altra funzione Javascript che li elabora e li usa per modificare i contenuti della pagina.

Da qui dunque deriva l'acronimo: AJAX realizza una comunicazione "asincrona" tra il client e il server, utilizzando Javascript e XML (Asynchronous Javascript And Xml).

Schematicamente le cose funzionano così:

Non è scopo di questo articoletto scendere nei dettagli implementativi, anche perché immagino che non tutti voi siate sviluppatori. Però mi piace cercare di darne almeno un'idea.

Se dunque volete curiosare nel codice, sia lato client che lato server, potete scaricare l'intera applicazione (82KB), offerta in Creative Commons.

Osservate il codice della pagina "index.htm", poi anche di "javascript/automa.js" e di "ajax_server/automa.php". Su quest'ultimo vedete come è stato modellizato l'automa: tramite array. Avrei potuto utilizzare un database, ma ho preferito per l'esempio lasciare le cose semplici. Notate inoltre che mi sono avvalso, per effettuare le chiamate AJAX, delle ottime librerie Javascript: Scriptaculous.

Per provare il tutto è necessario che lo facciate girare su un server che supporta PHP, o anche in locale, sul vostro computer, disponendo magari di EasyPHP (su PC) o MAMP (su Mac) - su Linux invece è già tutto pronto - e quindi puntando col browser l'indirizzo: http://localhost/automa

Buon web 2.0 a tutti! :)

comments powered by Disqus

I commenti precedenti