Cos è Ajax? Nasce Ajax

Transcript

1 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 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

2 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.

3 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, Java- Script 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.

4 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.

5 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 Dati Richiesta HTTP Richiesta dati/interrogazione Web Server Database Modello di applicazione Web Ajax Web Browser HTML, CSS Dati Dati Interfaccia utente Chiamata JavaScript Motore Ajax Richiesta HTTP Database Richiesta dati/interrogazione Web Server 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 ( sviluppatore di software ed esperto di usabilità, ha identificato svariati principi chiave di ottime applicazioni Ajax; vale la pena ripeterli qui:

6 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-

7 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 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 ( 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 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

8 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

9 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 ( presentò una forma di ricerca avanzata che permette di cercare

10 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

11 Cos è Ajax? Figura 1.6 Figura

12 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 , 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 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 Successivamente il termine rimase in vita e divenne popolare su tutta Internet come descrizione dei cambiamenti che 12

13 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 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