Cos`è Ajax?

1
Cos’è Ajax?
Dal 2001 al 2005 il World Wide Web è passato attraverso una crescita spaventosa in termini di tecnologie
e metodologie utilizzate per portare questo strumento statico alla vita. Le brochure e i cataloghi online
hanno smesso di dominare il Internet nel momento in cui le applicazioni web sono divenute una parte
significativa delle destinazioni online. Le applicazioni web si differenziavano dai loro “antenati” siti web
nell’offrire ai propri utenti un servizio immediato non solo di tipo informativo. Che lo scopo fosse la
gestione di procedure commerciali o l’interesse personale, gli sviluppatori erano costretti a creare nuovi
paradigmi di interazione, visto che gli utenti iniziavano ad aspettarsi funzionalità più avanzate.
Stimolato da tecnologie poco note e ancor meno utilizzate, già presenti nei browser web da tempo, il
Web ha compiuto un notevole progresso, sconvolgendo il modo d’uso tradizionale che necessitava il caricamento completo di una pagina ogni volta che si accedeva a nuove informazioni o a una nuova parte
della logica dell’applicazione. Le varie aziende cominciarono a effettuare esperimenti con la ricarica
dinamica di porzioni di pagine web, per trasmettere al client solo una quantità ridotta di dati, realizzando
in questo modo un’esperienza utente più veloce e migliore.
A condurre questo movimento è stato Google. Dopo che il gigante dei motori di ricerca uscì allo scoperto, iniziarono ad apparire nuovi esperimenti condotti dai suoi ingegneri da una sezione del sito chiamata
Google Labs (labs.google.com). Molti dei progetti dei Google Labs, come Google Suggest e
Google Maps, consistevano di un’unica pagina web che pur non venendo mai scaricata veniva tuttavia
costantemente aggiornata. Tali innovazioni, che cominciarono a portare le affordance delle interfacce dei
software desktop entro i confini di un browser, furono elogiate in tutto il Web e considerate come l’avvento di una nuova era dello sviluppo web. E lo furono davvero.
Svariati prodotti open source e commerciali diedero il via allo sviluppo per approfittare di questo nuovo
modello di applicazione web. Tali progetti tentarono di spiegare la propria tecnologia servendosi di
espressioni quali JavaScript remoting, web remote procedure calls, e dynamic updating. Presto però
avrebbe prevalso un nuovo termine.
Nasce Ajax
Nel febbraio 2005 Jesse James Garrett di Adaptive Path LLC pubblicò online un articolo intitolato “Ajax:
A New Approach to Web Applications” ( “Ajax: Un nuovo Approccio alle Applicazioni Web”), tuttora
disponibile all’indirizzo www.adaptivepath.com/publications/essays/archives/000385.php. In questo scritto Garrett spiegava come, a suo avviso, le applicazioni web stessero colmando lo scarto fra il Web e le applicazioni desktop tradizionali. Citava poi le nuove tecnologie
e molti dei progetti Google come esempi del fatto che modelli di interazione utente tipicamente basati
Capitolo 1
su applicazioni desktop fossero ora impiegati nel Web. Di seguito venivano le due frasi che avrebbero
sollevato un polverone di interesse, agitazione e controversie:
Google Suggest e Google Maps sono due esempi di un nuovo approccio alle applicazioni web che noi di
Adaptive Path abbiamo chiamato Ajax. Il nome è una contrazione di Asynchronous JavaScript + XML e
rappresenta un passaggio fondamentale in ciò che è possibile realizzare sul Web.
Da quel momento, un’ondata di articoli su Ajax, di esempi di codice e di discussioni apparve ovunque
sul Web. Gli sviluppatori ne parlavano nei propri blog, le riviste di tecnologia nelle proprie pagine, e le
aziende iniziarono a legare ad Ajax i propri prodotti. Ma per comprendere che cosa sia Ajax, occorre
anzitutto sapere come l’evoluzione di svariate tecnologie web abbia portato al suo sviluppo.
L’evoluzione del Web
Quando Tim Berners-Lee preparò la prima proposta per il World Wide Web nel 1990, l’idea di base
era piuttosto semplice: creare una “ragnatela” (web) di informazioni collegate fra loro attraverso ipertesti e URI (Uniform Resource Identifiers). La possibilità di collegare i documenti più disparati in ogni
parte del mondo rappresentava un enorme potenziale da un punto di vista accademico: studiosi e ricercatori avrebbero potuto avere accesso quasi istantaneo ai materiali di riferimento bibliografico. La
prima incarnazione del linguaggio HTML (HyperText Markup Language) non presentava granché oltre
a comandi per la formattazione del testo e per i collegamenti, e non si trattava certo di una piattaforma
per realizzare software riccamente interattivo, bensì per condividere semplicemente le varie tipologie di
informazioni testuali ed esplicative che dominavano la tarda era della stampa. Furono queste pagine web
statiche il terreno di crescita del Web.
Con l’evolversi del Web, le varie imprese commerciali non tardarono a notare un grosso potenziale
nella possibilità di distribuire alle masse informazioni su prodotti e servizi. La generazione successiva
del Web vide un aumento della capacità di formattare e visualizzare informazioni grazie all’evoluzione
congiunta dell’HTML, che rispondeva sempre più alle esigenze e alle aspettative di questi utenti più abili
nell’utilizzo dei nuovi media. Ma una piccola compagnia chiamata Netscape avrebbe presto accelerato
considerevolmente l’evoluzione del Web.
JavaScript
Netscape Navigator fu il primo browser web tradizionale di successo, e come tale fece progredire rapidamente le tecnologie web. Tuttavia Netscape veniva frequentemente derisa dalle organizzazioni di
standard per la sua implementazione di nuove tecnologie e di estensioni per le tecnologie esistenti prima
che venissero approvati standard veri e propri (analogamente a Microsoft, che oggi viene condannata
perché lo sviluppo del suo Internet Explorer ignora gli standard esistenti). Una di quelle tecnologie era
JavaScript.
Originariamente chiamato LiveScript, JavaScript fu creato da Brendan Eich di Netscape e incluso nella
versione 2.0 del browser (rilasciata nel 1995). Per la prima volta, gli sviluppatori erano in grado di manipolare l’interazione di una pagina web con l’utente. Invece di compiere ripetuti andirivieni fra server e
client per semplici funzioni come la convalida di dati, divenne possibile trasferire questa piccola quantità
di elaborazione dati al browser. Tale capacità era importantissima in un’epoca in cui la maggior parte dei
navigatori in Internet si collegava con modem da 28,8 Kbps e in cui ogni richiesta al server equivaleva a
un certo intervallo di attesa. Ridurre il numero di occasioni in cui l’utente doveva attendere una risposta
fu il primo grande passo verso l’approccio Ajax.
Cos’è Ajax?
I Frame
La versione originale dell’HTML stabiliva che ogni documento fosse a sé stante, e solo con HTML 4.0
furono introdotti ufficialmente i frame. L’idea che la visualizzazione di una pagina web potesse essere
suddivisa in molteplici documenti era radicale, e scaturirono delle polemiche per il fatto che Netscape
decise di implementare tale funzionalità prima che lo standard HTML 4.0 venisse completato. Netscape
Navigator 2.0 fu il primo browser a supportare sia i frame sia JavaScript. Ciò si rivelò essere un passaggio
importante nell’evoluzione di Ajax.
Quando iniziarono le “guerre dei browser” fra Microsoft e Netscape alla fine degli anni Novanta, JavaScript e i frame vennero formalizzati. Con l’aggiunta di nuove funzionalità per entrambe le tecnologie,
gli sviluppatori più creativi cominciarono a fare esperimenti utilizzandoli congiuntamente. Dato che un
frame rappresentava una richiesta al server del tutto distinta, la capacità di controllare un frame e i relativi contenuti mediante JavaScript diede il via a diverse possibilità affascinanti.
La tecnica del frame nascosto
Mentre gli sviluppatori iniziavano a manipolare i frame in modi sempre più raffinati, emerse una nuova
tecnica per facilitare la comunicazione client-server. La tecnica del frame nascosto consisteva nell’impostare un frameset in cui a un frame veniva assegnata un’altezza o una larghezza pari a 0 pixel, il cui unico
scopo era quello di avviare la comunicazione con il server. Il frame nascosto conteneva un form HTML
con campi specifici che potevano essere compilati dinamicamente da JavaScript e rinviati al server. Al
suo ritorno, il frame avrebbe chiamato un’altra funzione JavaScript per informare la pagina chiamante
che i dati erano stati restituiti. La tecnica del frame nascosto rappresentò il primo modello richiesta/risposta asincrono per applicazioni web.
Questo fu il primo modello di comunicazione di Ajax, ma un altro progresso tecnologico era appena
dietro l’angolo.
L’HTML Dinamico e il DOM
Nel 1996, il Web era ancora principalmente un universo statico. Malgrado JavaScript e la tecnica del
frame nascosto avessero ravvivato l’interazione con l’utente, non esisteva ancora nessuna possibilità di
modificare l’aspetto di una pagina senza doverla ricaricare, a parte cambiando i valori dei campi del
form. Poi comparve Internet Explorer 4.0.
A questo punto, Internet Explorer aveva colmato il divario con la tecnologia del leader del mercato
Netscape Navigator e l’aveva persino superata in un aspetto importante con l’introduzione dell’HTML
Dinamico (DHTML). Pur essendo ancora in fase di sviluppo, il DHTML rappresentò un significativo
passo avanti rispetto all’epoca delle pagine web statiche, permettendo agli sviluppatori di alterare qualsiasi porzione di una pagina caricata grazie a JavaScript. Unitamente all’apparizione dei fogli di stile CSS
(Cascading Style Sheets), il DHTML diede nuovo vigore allo sviluppo per il web, malgrado le profonde
disparità dei percorsi che Microsoft e Netscape intrapresero agli albori di queste due discipline. L’eccitazione nella comunità degli sviluppatori era però giustificata, perché combinare il DHTML con la tecnica
del frame nascosto significava poter aggiornare qualsiasi parte di una pagina con informazioni dal server.
Questo fu un autentico cambiamento di modello per il Web.
DHTML non riuscì mai a diventare uno standard, anche se l’influenza di Microsoft si sarebbe fatta sentire in maniera decisa con l’introduzione del Document Object Model (DOM) come elemento centrale
del progetto per la standardizzazione di tale tecnologia. A differenza del DHTML, che cercava solamente di modificare le sezioni di una pagina web, il DOM aveva un obiettivo molto più ambizioso: fornire
una struttura per l’intera pagina web. La manipolazione di tale struttura avrebbe permesso modifiche di
tipo DHTML alla pagina stessa. Questo fu il successivo passo avanti verso Ajax.
Capitolo 1
Gli iframe
Malgrado la tecnica del frame nascosto si diffuse incredibilmente, presentava uno svantaggio: occorreva
pianificarla per tempo e scrivere un frameset che anticipasse l’utilizzo di frame nascosti. Quando l’elemento <iframe/> venne introdotto come componente ufficiale di HTML 4.0 nel 1997, esso rappresentò un’altra tappa importante nell’evoluzione del Web.
Invece di definire frameset, gli sviluppatori potevano sistemare iframe in qualsiasi punto della pagina.
Ciò permise loro di rinunciare del tutto ai frameset e di disporre semplicemente iframe invisibili (attraverso l’utilizzo di CSS) in una pagina per attivare la comunicazione client-server. E quando il DOM fu
definitivamente implementato in Internet Explorer 5 e Netscape 6, introdusse la possibilità di creare al
volo iframe in modo dinamico; si poteva cioè impiegare una funzione JavaScript per creare un iframe,
formulare una richiesta e ottenere la risposta, il tutto senza aggiungere codice HTML extra alla pagina.
Così si arrivò alla seconda generazione della tecnica del frame nascosto: la tecnica dell’iframe nascosto.
XMLHttp
Gli sviluppatori del browser di Microsoft dovevano essersi resi conto della popolarità della tecnica del
frame nascosto e della nuova tecnica dell’iframe nascosto, poiché decisero di fornire agli sviluppatori
web uno strumento migliore per l’interazione client-server. Tale strumento arrivò nel 2001 sotto forma di
un oggetto ActiveX chiamato XMLHttp.
Una delle estensioni Microsoft per JavaScript permetteva la creazione di controlli ActiveX, gli oggetti di
programmazione proprietari di Microsoft. Quando Microsoft iniziò a supportare lo XML attraverso una
libreria chiamata MSXML, venne incluso l’oggetto XMLHttp. Pur avendo XML nel nome, tale oggetto
non era soltanto uno dei tanti modi per manipolare dati XML: si trattava più di una richiesta HTTP
ad hoc che poteva essere controllata da JavaScript. Gli sviluppatori avevano così accesso ai codici di
stato e agli header HTTP, così come a qualsiasi dato restituito dal server. Quei dati potevano essere
XML strutturato, blocchi di codice HTML preformattato, oggetti JavaScript serializzati, oppure dati in
qualsiasi formato scelto dallo sviluppatore. Invece di utilizzare frame o iframe nascosti, ora era possibile
accedere al server sistematicamente servendosi di JavaScript puro, svincolato dal ciclo di caricamento/
ricaricamento della pagina. L’oggetto XMLHttp divenne uno strumento incredibile per gli sviluppatori
di Internet Explorer.
Vista la sua crescente diffusione, gli sviluppatori del progetto open source Mozilla lavorarono a un
proprio porting di XMLHttp. Invece di permettere l’accesso ad ActiveX i programmatori di Mozilla ne
replicarono i metodi e le proprietà principali in una richiesta objectXMLHttpRequest nativa del browser. Con il supporto di XMLHttp nei due browser più importanti (seppur in forme diverse), lo sviluppo
di interfacce di tipo Ajax prese decisamente piede e costrinse altri browser più marginali, come Opera e
Safari, a supportare una qualche forma di XMLHttp (entrambi optarono per un supporto nativo con un
oggetto XMLHttpRequest, sulla scia di Mozilla). Abbastanza ironicamente la popolarità di questo clone
di XMLHttp ritornò a Microsoft, che introdusse nativamente l’oggetto XMLHttpRequest in Internet
Explorer 7.
Il vero Ajax
Malgrado la presenza di svariate FAQ a supplemento dell’articolo di Garrett, rimane tuttora una certa
confusione su ciò che concerne la vera essenza di Ajax. In parole semplici, Ajax non è altro che un
approccio all’interazione web. Tale approccio riguarda la trasmissione di solo una piccola quantità di
informazioni da e verso il server, in modo da offrire all’utente l’esperienza più reattiva possibile.
Cos’è Ajax?
Invece del modello di applicazione web tradizionale, in cui il browser stesso si occupa di avviare richieste al server web e di processare le richieste provenienti da quest’ultimo, il modello Ajax prevede un
livello intermedio, che Garrett chiama motore Ajax (Ajax engine), atto a gestire tale comunicazione. Un
motore Ajax è in realtà un semplice oggetto o funzione JavaScript che viene chiamato ogni qual volta è
necessario richiedere informazioni al server. A differenza del modello tradizionale, che fornisce un collegamento a un’altra risorsa (per esempio un’altra pagina web), ogni collegamento esegue una chiamata
al motore Ajax, che programma ed esegue la richiesta. Essa viene eseguita in modo asincrono, ovvero
l’esecuzione del codice non attende una risposta prima di continuare.
Il server, che solitamente servirebbe HTML, immagini, CSS o JavaScript, viene configurato per inviare
dati che il motore Ajax può utilizzare. Questi dati possono essere testo puro, XML, o qualsiasi altro
formato di informazioni necessario. L’unico requisito è che il motore Ajax possa comprenderlo e interpretarlo.
Quando il motore Ajax riceve la risposta del server, passa all’azione, spesso esaminando i dati e apportando svariati cambiamenti all’interfaccia utente basandosi sulle informazioni ricevute. Dato che questo
processo comporta il trasferimento di una minore quantità di informazioni rispetto al tradizionale modello di applicazione web, l’interfaccia utente viene aggiornata più velocemente, e l’utente è in grado di
svolgere il proprio lavoro con maggiore efficienza. La Figura 1.1 è un adattamento della figura presente
nell’articolo di Garrett che mostra le differenze fra il modello di applicazione web tradizionale e quello
di Ajax.
Modello di applicazione Web Tradizionale
Web Browser
HTML, Images,
CSS, JavaScript
Richiesta
HTTP
Dati
Richiesta
dati/interrogazione
Web Server
Database
Modello di applicazione Web Ajax
Web Browser
HTML, CSS
Interfaccia
utente
Chiamata
JavaScript
Dati
Motore
Ajax
Richiesta
HTTP
Dati
Richiesta
dati/interrogazione
Web Server
Database
Figura 1.1
I principi di Ajax
Essendo un nuovo modello di applicazione web, Ajax è ancora nella sua prima infanzia. Tuttavia molti
sviluppatori web hanno considerato questo nuovo sviluppo come una sfida. La sfida è distinguere ciò
che rende ottima un’applicazione web Ajax da ciò che la rende pessima o mediocre. Michael Mahemoff
(www.mahemoff.com), sviluppatore di software ed esperto di usabilità, ha identificato svariati principi chiave di ottime applicazioni Ajax; vale la pena ripeterli qui:
Capitolo 1
 Traffico minimo: le applicazioni Ajax dovrebbero ricevere e inviare la minor quantità di
informazioni possibile da e verso il server. Insomma, Ajax può minimizzare il traffico fra client
e server. Assicurarsi che la propria applicazione Ajax non invii e riceva informazioni inutili ne
favorisce la robustezza.
 Niente sorprese: le applicazioni Ajax solitamente introducono modelli di interazione utente
diversi rispetto alle applicazioni web tradizionali. A differenza dello standard web di fare clic
e attendere, alcune applicazioni Ajax si servono di altri paradigmi di interfaccia, quali il drag
and drop o il doppio clic. A prescindere da quale modello di interazione utente si scelga, si
mantenga una generale coerenza, in modo che l’utente sappia sempre come agire.
 Convenzioni prestabilite: non si perda tempo a inventare nuovi modelli di interazione
utente che risulteranno estranei agli utenti finali. Meglio prendere a prestito il più possibile da
applicazioni web e desktop tradizionali, così da avere una curva d’apprendimento minima.
 Nessuna distrazione: evitare elementi di pagina inutili e che distraggono come animazioni
continue e sezioni di pagina lampeggianti. Espedienti di questo tipo distolgono l’utente da ciò
che sta cercando di realizzare.
 Accessibilità: tenere presente chi saranno i propri utenti primari e secondari e come interagiranno con l’applicazione Ajax. Evitare di progettare un’applicazione che possa tagliare fuori
completamente un tipo di pubblico inaspettato. I propri utenti impiegheranno browser più
datati o software speciali? Meglio saperlo con anticipo e regolarsi di conseguenza.
 Evitare interi caricamenti di pagina: tutta la comunicazione con il server dopo l’iniziale
caricamento di pagina deve essere gestita dal motore Ajax. Non si comprometta l’esperienza
utente caricando piccole quantità di dati in un punto ed eseguendo interi caricamenti di pagina
in un altro.
 L’utente innanzi tutto: progettare l’applicazione Ajax pensando all’utente prima di ogni altra cosa. Cercare di semplificare al massimo gli utilizzi più comuni, senza farsi prendere troppo
da questioni come l’inserimento di pubblicità o di effetti piacevoli.
Il comune denominatore di tutti questi principi è l’usabilità. Lo scopo primario di Ajax è migliorare
l’esperienza web dei propri utenti; la tecnologia che lo permette è semplicemente un mezzo per tale fine.
Attenendosi ai principi qui elencati, si può essere ragionevolmente sicuri che la propria applicazione
Ajax risulterà utile e usabile.
Le tecnologie alla base di Ajax
L’articolo di Garrett cita diverse tecnologie che egli vede come parti di una soluzione Ajax:
 HTML/XHTML: linguaggi di rappresentazione del contenuto primario.
 CSS: fornisce formattazione stilistica allo XHTML.
 DOM: aggiornamento automatico di una pagina caricata.
 XML: formato di interscambio dati.
 XSLT: trasforma XML in XHTML (con stili forniti dai CSS).
 XMLHttp: agente di comunicazione primario.
 JavaScript: linguaggio di scripting utilizzato per programmare un motore Ajax.
In realtà, tutte queste tecnologie possono essere sfruttate in soluzioni Ajax, ma soltanto tre sono fonda-
Cos’è Ajax?
mentali: HTML/XHTML, DOM e JavaScript. XHTML è ovviamente necessario per la visualizzazione
delle informazioni, mentre DOM è richiesto per cambiare porzioni di una pagina XHTML senza ricaricarla. L’ultimo componente, JavaScript, è indispensabile per avviare la comunicazione client-server e
manipolare il DOM per aggiornare la pagina web. Le altre tecnologie dell’elenco precedente sono utili
per affinare una soluzione Ajax, ma non sono necessarie.
Vi è un componente importante che Garrett ha dimenticato di citare nel suo articolo: la necessità dell’elaborazione lato server. Tutte le tecnologie summenzionate si relazionano direttamente al motore Ajax
lato client, ma non vi è Ajax senza un server stabile e reattivo in attesa di inviare contenuti al motore.
Per questo scopo è possibile utilizzare l’applicazione server che si desidera. Che si scelga di scrivere i
componenti lato server come pagine PHP, servlet Java o componenti .NET, occorre solo assicurarsi che
venga inviato in risposta al motore Ajax il formato di dati corretto.
Gli esempi presenti in questo volume fanno uso di quante più applicazioni lato server possibili, per offrire informazioni
sufficienti a impostare sistemi di comunicazione Ajax sulle tipologie di server più varie. La maggior parte degli esempi
presenti in questo libro sono disponibili nelle versioni PHP, JSP e ASP.NET su www.wrox.com.
Chi utilizza Ajax?
Molti siti web commerciali si servono di tecniche Ajax per rendere più efficace l’esperienza utente. Tali siti si
comportano molto più come applicazioni web che non come siti dalla tradizionale presentazione “a brochure” dei prodotti e che visualizzano informazioni solo perché il visitatore li consulta con uno scopo ben preciso.
Le seguenti sono alcune delle applicazioni web più conosciute e meglio realizzate che fanno uso di Ajax.
Google Suggest
Uno dei primi esempi che viene citato dagli sviluppatori quando parlano di Ajax è Google Suggest
(www.google.com/webhp?complete=1). L’interfaccia è semplicemente una copia della pagina principale di Google, che mette in evidenza una casella di testo per inserire i termini della ricerca.
Tutto appare come al solito, finché non si inizia a scrivere nella casella. Mentre si scrive, Google Suggest
richiede suggerimenti al server e mostra un elenco di termini di ricerca di potenziale interesse. A fianco
di ogni suggerimento viene riportato il numero di risultati associati al termine, così da poter meglio
decidere (Figura 1.2). Questa semplice interazione client-server è molto potente ed efficace senza essere
d’intralcio all’utente. La reattività dell’interfaccia è superiore a qualsiasi aspettativa in ambito di applicazioni web: si aggiorna sempre a prescindere dalla rapidità con cui si scrivono i termini e, analogamente
alle funzioni di autocompletamento dei software desktop, si possono utilizzare i tasti freccia su e freccia
giù per evidenziare e selezionare ogni termine nell’elenco dei suggerimenti. Pur essendo ancora in beta,
è ragionevole aspettarsi questo approccio nella pagina principale di Google in un futuro prossimo.
Gmail
Gmail, il servizio email gratuito di Google, è stato entusiasticamente definito come una meraviglia dell’interazione client-server nell’era di Ajax. Quando si effettua il login in Gmail per la prima volta, un
motore di interfaccia utente viene caricato in uno dei pochi iframe utilizzati dall’applicazione. Tutte le
ulteriori richieste al server avvengono attraverso questo motore di interfaccia utente mediante un oggetto
XMLHttp. I dati che vengono scambiati tra client e server sono codice JavaScript, che prevede un’esecuzione molto rapida una volta scaricato dal browser. Tali richieste istruiscono il motore di interfaccia
utente su ciò che deve essere aggiornato a video. In più, l’applicazione Gmail utilizza diversi frame e
iframe per gestire e archiviare in cache i cambiamenti più notevoli dell’interfaccia utente. L’uso estremamente complesso dei frame permette a Gmail di funzionare correttamente con i pulsanti Indietro e
Capitolo 1
Avanti, uno dei vantaggi dell’utilizzo di frame e iframe al posto di XMLHttp (trattato più avanti) o in
congiunzione a esso. Il successo più grande di Gmail è la sua usabilità. L’interfaccia utente (Figura 1.3) è
semplice e ordinata. L’interazione con l’utente e la comunicazione con il server sono molto fluide. Ancora una volta, Google ha impiegato Ajax per migliorare ulteriormente un concetto già semplice, così da
fornire un’esperienza utente eccezionale.
Figura 1.2
Figura 1.3
Cos’è Ajax?
Google Maps
Un’altra parte delle applicazioni web Ajax di Google è Google Maps (maps.google.com). Ideata
per concorrere con affermati siti cartografici, Google Maps si serve di Ajax per evitare completamente il
ricaricamento della sua pagina principale (Figura 1.4).
A differenza di altre applicazioni web di cartografia, Google Maps permette all’utente di trascinare la
mappa per spostarla in varie direzioni. Il codice per il trascinamento non è nulla di nuovo per sviluppatori JavaScript, ma la segmentazione della mappa e l’effetto di scorrimento apparentemente infinito sono
tutta un’altra faccenda. La mappa è suddivisa in una serie di immagini che vengono affiancate fra loro
per creare l’aspetto di un’immagine contigua. Il numero di immagini utilizzate per visualizzare la mappa
è limitato, dato che la creazione di nuove immagini a ogni spostamento della mappa da parte dell’utente
porterebbe rapidamente a problemi di memoria. Vengono invece impiegate in continuazione le stesse
immagini per mostrare segmenti diversi della mappa.
La comunicazione client-server viene effettuata mediante un iframe nascosto. Ogni volta che viene
compiuta una ricerca o si richiedono nuove indicazioni, queste informazioni vengono inviate e restituite all’interno di quell’iframe. I dati restituiti sono in formato XML e vengono passati a una funzione
JavaScript (il motore Ajax) per la gestione. Tale XML è quindi utilizzato in svariati modi: una parte di
esso richiama le immagini-mappa corrette, un’altra viene trasformata in HTML attraverso XSLT e visualizzata nella finestra principale. Insomma, si tratta di un’applicazione Ajax che nel 2006 si è confermata
al secondo posto per il mapping di destinazioni su Web.
Figura 1.4
A9
Amazon.com è noto in tutto il mondo per essere un mercato online tramite il quale acquistare praticamente di tutto. Quando però inaugurò un motore di ricerca, lo fece senza troppa ostentazione. L’introduzione di A9 (www.a9.com) presentò una forma di ricerca avanzata che permette di cercare
Capitolo 1
contemporaneamente diversi tipi di informazioni. Per le ricerche web e di immagini si serve di MSN
per recuperare i risultati. Effettua ricerche di libri su Amazon.com e di film su IMDb (Internet Movie
Database). Dalla metà del 2005 sono state aggiunte ricerche nelle Pagine Gialle, nella Wikipedia e in
Answers.com.
Ciò che rende unico A9 è il metodo di funzionamento dell’interfaccia. Quando si effettua una ricerca, i
vari tipi di risultati vengono visualizzati in aree differenti della pagina (Figura 1.5).
Nella pagina dei risultati della ricerca è presente l’opzione di selezionare altre ricerche da svolgere secondo gli stessi criteri. Quando si seleziona una casella di controllo corrispondente a un tipo di ricerca,
la ricerca viene eseguita dietro le quinte mediante una combinazione di iframe nascosti e di XMLHttp.
L’interfaccia utente si sposta per fare spazio ai nuovi risultati di ricerca, che vengono caricati non appena
ricevuti dal server. Ciò che si ottiene è una pagina di risultati di ricerca molto più reattiva e che non
occorre ricaricare quando si vogliono cercare tipologie differenti di informazioni.
Figura 1.5
Yahoo! News
Anch’esso introdotto nel 2005, il sito Yahoo! News (news.yahoo.com) presenta un design rinnovato. L’innovazione consiste in un’interessante funzionalità: quando l’utente muove il puntatore del mouse
su un determinato titolo, appare un piccolo riquadro che offre un riassunto dell’articolo ed eventualmente una fotografia associata alla notizia (Figura 1.6).
I dati relativi a foto e riassunto vengono recuperati dal server mediante XMLHttp e inseriti dinamicamente nella pagina. Questo è un esempio perfetto di come si possa impiegare Ajax per migliorare una
pagina web. Invece di rendere Ajax la modalità di utilizzo primaria, il sito Yahoo! News è totalmente
usabile senza Ajax; la funzionalità Ajax viene utilizzata solo per aggiungere un’esperienza utente più
reattiva per quei browser che la supportano. Sotto la superficie si trova una pagina HTML semanticamente corretta che viene arrangiata anche senza formattazione CSS.
10
Cos’è Ajax?
Figura 1.6
Figura 1.7
11
Capitolo 1
Bitflux Blog
Un altro esempio notevole dell’uso di Ajax come semplice miglioria aggiuntiva è Bitflux Blog (blog.
bitflux.ch/), che presenta una tecnologia chiamata LiveSearch. LiveSearch lavora congiuntamente alla casella di ricerca del sito. Mentre si scrive nel campo di ricerca, un elenco di possibili risultati
viene visualizzato immediatamente al di sotto di essa (Figura 1.7).
I risultati della ricerca vengono recuperati utilizzando XMLHttp come una stringa HTML che viene
poi inserita nella pagina. Si possono effettuare ricerche nel sito anche alla vecchia maniera: scrivendo
nell’apposito campo e premendo Invio. La funzionalità Ajax LiveSearch è soltanto una miglioria del sito
e non è indispensabile per le ricerche.
Confusione e polemiche
Malgrado la popolarità del termine Ajax, il concetto ha incontrato una buona dose di polemica e dissenso. Alcuni ritengono che Ajax sia un’aberrazione di ciò verso cui il Web si stava muovendo prima dell’avvento di Ajax. I proponenti dell’HTML semantico, dell’accessibilità e della separazione di contenuti
e presentazione stavano guadagnando terreno e consensi fra gli sviluppatori web, e alcuni credono che la
popolarità di Ajax abbia ricacciato quel movimento in una posizione di sfondo. La convinzione di questi
detrattori è che Ajax promuova la creazione della presentazione all’interno di JavaScript, convertendola
quindi in un miscuglio disordinato simile agli albori dello scripting lato server. Molti ritengono che l’accessibilità possa risentirne se un numero maggiore di sviluppatori passerà a soluzioni Ajax.
Altri hanno dedicato molto tempo a sviscerare l’articolo di Garrett e a confutare svariate sue presupposizioni. Per esempio, l’articolo più volte identifica nell’utilizzo di XML e di XMLHttp il nucleo del
modello Ajax, ma molti degli esempi portati da Garrett non si servono dell’una o dell’altra di queste due
tecnologie. Gmail e Google Maps utilizzano queste tecnologie molto moderatamente; Google Suggest
utilizza soltanto XMLHttp e per l’interscambio dati si serve di vettori JavaScript e non dello XML. I
critici fanno notare inoltre che la spiegazione tecnica di Ajax data nell’articolo è del tutto fuorviante,
nominando svariate tecnologie non solo superflue (come XML e XMLHttp) ma il cui uso è improbabile
in molti casi (come XSLT).
Un’altra grande controversia che circonda Ajax e l’articolo di Garrett riguarda il fatto che Ajax sia semplicemente un nome nuovo per una tecnica in uso ormai da tempo. Anche se questo tipo di recupero di
informazioni poteva essere attivato in Netscape Navigator 2.0, esso divenne molto più importante nel
2001-2002, specialmente con la pubblicazione di un articolo sul sito Apple Developer Connection dal
titolo “Remote Scripting With IFRAME” ( “Scripting remoto con IFRAME”), disponibile all’indirizzo
http://developer.apple.com/internet/webcontent/iframe.html. Questo
scritto viene ampiamente considerato come il primo articolo pubblicato riguardante metodologie di tipo
Ajax. L’espressione remote scripting non ha mai preso piede con la stessa potenza ed efficacia di Ajax.
Altri ancora si fanno beffe del termine Ajax e dell’articolo di Garrett, ritenendo che la sua creazione sia
stata poco più che un espediente di marketing per favorire l’azienda di Garrett, Adaptive Path LLC. Alcuni pensano che il coniare un nome per una tecnica già esistente sia un atto insincero e un chiaro segno
di cattive intenzioni. A prescindere da questa e molte altre polemiche intorno ad Ajax, tale approccio ora
possiede un nome sempre più familiare a molti sviluppatori. Di qui l’esigenza di un approfondimento e
di una spiegazione, così che questo nome possa essere impiegato nei modi migliori.
Ajax e il Web 2.0
Poco tempo dopo che fu coniato il termine Ajax comparve un’altro nuovo lemma: Web 2.0. Inizialmente
Web 2.0 fu il nome di una conferenza tenuta da O’Reilly Media e CMP Media nel 2005. Successivamente il termine rimase in vita e divenne popolare su tutta Internet come descrizione dei cambiamenti che
12
Cos’è Ajax?
il Web avrebbe effettuato. Per fare in modo che non si dessero i significati più disparati al termine Web
2.0, Tim O’Reilly (fondatore e CEO di O’Reilly) scrisse un articolo intitolato “What is Web 2.0” (disponibile online su www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/
what-is-web-20.html) descrivendo i concetti che credeva rappresentassero il Web 2.0. Questi
concetti includono:
Il Web inteso come insieme di servizi e non come software.
La mentalità di gruppo del Web; gli utenti incoraggiati a partecipare (a commentare, a scrivere blog, a
connettersi in rete e così via).
Separazione dei dati dalla presentazione; i dati possono essere rappresentati in tanti modi diversi e combinati con altre sorgenti di dati (chiamate mashup).
Esperienze dell’utente più ricche e sensibili.
Ajax è legato all’ultimo punto, creando esperienze utente più ricche. Per chiarire il concetto, Ajax non
è un sinonimo di Web 2.0, e il Web 2.0 d’altra parte non parla mai di Ajax. Il Web 2.0 tratta il cambiamento di comportamento del Web. Mentre Ajax è una parte importante per creare le esperienze utente
di prossima generazione che il Web 2.0 promuove; è come una tessera di un grande puzzle.
Riepilogo
Questo capitolo è servito da introduzione alla premessa fondamentale di Ajax. Forma contratta di Asynchronous JavaScript + XML, il termine Ajax è stato coniato da Jesse James Garrett in un articolo pubblicato sul sito web dell’azienda Adaptive Path LLC. L’articolo ha presentato Ajax come un nuovo modello
di interazione utente per applicazioni web in cui non sono più necessari i caricamenti completi delle
pagine.
Il presente capitolo ha inoltre trattato l’evoluzione del Web in relazione allo sviluppo di tecnologie che
hanno permesso ad Ajax di essere una realtà oggi. Ajax deve la propria esistenza all’introduzione di
JavaScript e dei frame nei browser web, che resero teoricamente possibile il recupero dati asincrono in
Netscape Navigator 2.0. Attraverso l’evoluzione di nuove tecnologie web, si svilupparono metodologie
Ajax come la tecnica del frame nascosto. L’introduzione degli iframe e di XMLHttp diede una forte
spinta allo sviluppo di Ajax.
Sebbene Ajax possa essere impiegato per realizzare moltissime funzioni, lo si utilizza in maniera più
efficace per migliorare l’esperienza utente, e non per creare piacevoli effetti visivi. Questo capitolo ha
trattato svariati principi di Ajax, tutti accomunati da un requisito basilare, ovvero che sia l’utente il centro
dello sviluppo di applicazioni web.
Sono state presentate inoltre alcune delle più note applicazioni Ajax, fra cui Google Suggest, Gmail,
Google Maps, Yahoo! News e Bitflux Blog.
Infine nel capitolo si è parlato delle polemiche e delle controversie che circondano Ajax, l’articolo di
Garrett, e il ruolo di Ajax nel Web. Alcuni ritengono che la diffusione di Ajax porterà a una generale
mancanza di accessibilità, mentre altri criticano le motivazioni che hanno spinto Garrett a scrivere questo articolo ormai famoso. Come per ogni approccio, Ajax dà il meglio di sé quando viene impiegato nel
perfezionamento logico di una applicazione web ben progettata.
13