AJAX, acronimo di Asynchronous JavaScript and XML, è una tecnica di sviluppo software 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 websenza esplicito ricaricamento da parte dell'utente.
AJAX è asincrono nel senso che i dati extra sono richiesti al server e caricati in background senza interferire con il comportamento della pagina esistente. Normalmente le funzioni richiamate sono scritte con il linguaggio JavaScript. Tuttavia, e a dispetto del nome, l'uso di JavaScript e di XML non è obbligatorio, come non è detto che le richieste di caricamento debbano essere necessariamente asincrone.
Descrizione
AJAX è una tecnica multi-piattaforma utilizzabile cioè su molti sistemi operativi, architetture informatiche e browser web, ed esistono numerose implementazioni open source di librerie e framework.
La tecnica Ajax utilizza una combinazione di:
- HTML (o XHTML) e CSS per il markup e lo stile;
- DOM (Document Object Model) manipolato attraverso un linguaggio ECMAScript come JavaScript o JScript per mostrare le informazioni ed interagirvi;
- l'oggetto XMLHttpRequest per l'interscambio asincrono dei dati tra il browser dell'utente e il web server. In alcuni framework Ajax e in certe situazioni, può essere usato un oggetto Iframe invece di XMLHttpRequest per scambiare i dati con il server e, in altre implementazioni, tag <script> aggiunti dinamicamente (JSON);
- in genere viene usato XML come formato di scambio dei dati, anche se di fatto qualunque formato può essere utilizzato, incluso testo semplice, HTML preformattato, JSON e perfino EBML. Questi file sono solitamente generati dinamicamente da script lato server.
Come DHTML o LAMP, Ajax non è una tecnologia individuale, piuttosto è un gruppo di tecnologie utilizzate insieme.
Le applicazioni web che usano Ajax richiedono browser che supportano le tecnologie necessarie (quelle dell'elenco sopra). Questi browser includono: Firefox, Opera, Konqueror, Safari, Internet Explorer e Chrome. Tuttavia, per specifica, "Opera non supporta la formattazione degli oggetti XSL".
Confronto con applicazioni tradizionali
Le applicazioni web tradizionali consentono agli utenti di compilare moduli e, quando questi moduli vengono inviati, viene inviata una richiesta al web-server. Il web server agisce in base a ciò che è stato trasmesso dal modulo e risponde bloccando o mostrando una nuova pagina. Dato che molto codice HTML della prima pagina è identico a quello della seconda, viene sprecata moltissima banda. Dato che una richiesta fatta al web server deve essere trasmessa su ogni interazione con l'applicazione, il tempo di reazione dell'applicazione dipende dal tempo di reazione del web server. Questo comporta che l'interfaccia utente diventi molto più lenta di quanto dovrebbe essere.
Le applicazioni Ajax, d'altra parte, possono inviare richieste al web server per ottenere solo i dati che sono necessari (generalmente usando SOAP e JavaScript per mostrare la risposta del server nel browser). Come risultato si ottengono applicazioni più veloci (dato che la quantità di dati interscambiati fra il browser ed il server si riduce). Anche il tempo di elaborazione da parte del web server si riduce poiché la maggior parte dei dati della richiesta sono già stati elaborati.
Un esempio concreto: molti siti usano le tabelle per visualizzare i dati. Per cambiare l'ordine di visualizzazione dei dati, con un'applicazione tradizionale l'utente dovrebbe cliccare un link nell'intestazione della tabella che invierebbe una richiesta al server per ricaricare la pagina con il nuovo ordine. Il web server allora invierebbe una nuova query SQL al database ordinando i dati come richiesto, la eseguirebbe, prenderebbe i dati e ricostruirebbe da zero la pagina web reinviandola integralmente all'utente. Usando le tecnologie Ajax, questo evento potrebbe preferibilmente essere eseguito con uno JavaScript lato client che genera dinamicamente una vista dei dati con DHTML. Un altro esempio potrebbe essere la scelta di un nuovo nickname in fase di creazione di un account su un sito web, nel caso classico, se il nome che abbiamo scelto fosse già esistente, dovremmo compilare prima tutto il modulo ed accorgerci solo dopo aver atteso il caricamento della pagina di conferma che il nome è già esistente e dobbiamo cambiarlo, invece con AJAX può essere introdotto un controllo sull'evento onChange o addirittura OnKeyUp della casella di testo che ci può informare tempestivamente che il nome inserito non è valido, magari evidenziando il testo in rosso (CSS + Javascript).
Pro e contro
Come per le applicazioni DHTML, anche le applicazioni AJAX devono essere testate su più browser per verificarne la compatibilità (librerie come Sarissa di SourceForge possono tuttavia essere di aiuto). Inoltre è richiesto che nel client sia attivato Javascript. Il vantaggio di usare AJAX è la grande velocità alla quale un'applicazione risponde agli input dell'utente.
Un problema abbastanza degno di nota è che, senza l'adozione di adeguate contromisure, le applicazioni AJAX possono rendere non utilizzabile il tasto "indietro" del browser: con questo tipo di applicazioni, infatti, non si naviga da una pagina all'altra, ma si aggiorna di volta in volta una singola parte del medesimo documento. Proprio per questo i browser, che sono programmi orientati alla pagina, non hanno possibilità di risalire ad alcuna di tali versioni "intermedie". Google, nella sua Google Maps, ha sviluppato una possibile soluzione al problema: invece di usare XMLHttpRequest quando l'utente clicca sul pulsante di ricerca, il risultato della ricerca viene inviato in un iframe invisibile, dal quale le informazioni sono portate nella pagina visibile.
Le ultime tecnologie HTML5 (non ancora totalmente supportate ovunque) che permettono di manipolare la cronologia del browser, hanno permesso di ovviare al problema dell'orientamento a pagina. Questo utilizzo si svolge principalmente in 4 fasi:
- Blocco dell'evento di refresh con un event.preventDefault()
- Introduzione di una nuova entità nella cronologia tramite il metodo history.pushState(state_object, title, link)
- Richiesta in Ajax
- Handling dell'evento popstate
In ogni modo, un attento design delle applicazioni AJAX permette di risolvere in parte (talvolta tutti) questi aspetti negativi.
