Home » Webzine

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ì:

schema automa a stati finiti

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ì:

diagramma di sequenza UML dell'automa

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

kosakko - 05/09/2012 18:27:35

Con parole semplici ed esempi banali mi hai fatto capire la filosofia AJAX, grazie

Programmo DaUnaVita - 10/07/2012 10:55:28

Ma sei un grande! Persino un bimbo di 5 anni capirebbe cos'è Ajax "raccontato" così!!!! Bravissimo!

ganakil - 03/06/2012 15:00:43

Qualcuno che finalmente é riuscito a farmi capire che cavolo é sto ajax!!!
grazie :-)

anonimo - 16/02/2011 10:05:45

test

Gatta Cikova - 17/01/2011 16:10:15

Claro! Grazie!

mila azuchi - 15/12/2010 16:20:29

ottimo il modo di spiegare ajax.. complimenti!

Max - 24/06/2010 12:04:46

Non scarica lo zip con i sorgenti. Appare la url:
http://www.espertoweb.it/download.php?file=automa.zip
e non scarica...

marco - 04/05/2010 21:27:57

molto bello

R. Catalano - 11/01/2010 21:59:12

Ottimo articolo. Esaustivo e abbastanza elementare per rendere meglio l'idea di applicazione in ambiente web. Reputo molto utili anche i vari riferimenti ad altri siti per lo sviluppo dell'applicazione. Una domanda: esistono altri esempi di automi per poter approfondire questi concetti?

Condivido anch'io la genialità del captcha.

Grazie.

Vincenzo Cernuto - 15/12/2009 22:48:19

Sei un grande! E non solo per l'articolo e l'esempio su Ajax... Il captcha è geniale!

Luca Del Col - 07/12/2009 10:34:10

bello, piacevole da leggere...ammetto che sai raccontare in modo semplice e ancch con un po' di umorismo concetti piuttosto complessi, è così che si deve fare per avvicinare i neofiti. Guarderò il codice che ho scaricato; un po' di cultura sui linguaggi ce l'ho, ricordando un non lontanto passato trascorso come sviluppatore web in ambiente dot.net (Ajax era appena algi albori....)
LucaDC

Giovanni Cotugno - 29/11/2009 16:16:32

Esaustiva spiegazione di base della tecnica di sviluppo per pagine web, ma quante ne sà ... ?
Grazie per l'ottimo esempio.

Daniele Biolatti - 25/11/2009 12:19:46

Articolo veramente interessantissimo, anche per uno "non del mestiere" come il sottoscritto, che va davvvero poco oltre PRINT:"CIAO MONDO"... :-)

ps.: ma il captcha qui sopra con gli animali è opera tua? Non l'avevo mai visto altrove...geniale! :-)
Risposta di fleo: yes! E' una mia idea per difendermi dai sistemi di spamming che ormai usano sofisticati algoritmi di OCR per il riconoscimento anche dei captcha piu' astrusi e deformi che personalmente detesto per quanto risultano scomodi e fastidiosi da decifrare per noi esseri umani. Gli animali, ancora, non li sanno riconosere :)

kguitux - 20/10/2009 11:28:02

Articolo fantastico! Ottimo!
(Anche se avrei voluto leggere qualcosa in + riguardo al codice...)

Diego Marcia - 12/09/2009 17:29:18

bello

Pipe - 10/07/2009 11:16:13

Ottimo articolo, e principalmente molto chiaro
Grazie

Mario Rossi - 18/03/2009 08:26:45

Dai continua così !

Valentina Talamonti - 04/02/2009 16:29:34

George!!!Chi si rivede!!!!

Claudio Ricci - 11/06/2008 22:21:05

confermo quanto già detto in precedenti occasioni, il tuo modo di impostare la presentazione di un argomento, magari anche ostico, si fa apprezzare per semplicità espositiva ed efficacia

Claudia Perlmuter - 18/12/2007 15:25:17

Come al solito chiaro ed efficace, anche per chi non conosce niente di linguaggi di programmazione.

giovani tammaro - 27/11/2007 00:02:53

leggendo il tuo articolo, sono stato spronato a cercare di conoscere un pò di javascript e di php visto che html già lo conosco. Spero solo di trovare il tempo di farlo.

Giancarlo Lucioli - 06/07/2007 11:21:40

Aspetta che lo studio e poi provo qualche esempio.
Ma penso sia utilissimo.
Una sola perplessità e con l'accessibilità e la validazione secondo W3C come si comporta questo codice? A tempo dovuto proverò.
Giancarlo

ida taci - 24/05/2007 17:59:06

l'applicazione è interessantissima ... ma George non è voluto uscire con me sob!

Francesco Guarnieri - 16/04/2007 09:56:04

Veramente un applicazione molto interessante e bella da ampliare o applicare in qualche progetto.