Che cosa e' Ajax?

Quando si cerca di spiegare a qualcuno cosa e' Ajax, si possono seguire due strade. La prima e' quella che spiega il termine come acronimo di Asynchronous JAvascript and XML. La seconda invece e' quella che parla di una tecnica per creare applicazioni web interattive usando richieste asincrone di dati fatte al web server.

In entrambi i casi pero' probabilmente c'e' bisogno di capire cosa significa il termine "asincrono" nella progettazione di applicazioni web.

Spero innanzitutto che sappiate come creare una pagina web, statica o dinamica che sia.

Quando volete visualizzare una pagina web sul browser dalla vostra macchina locale viene inviata una richiesta al web server remoto dove e' pubblicata. Il web server ricevendo questa richiesta reagisce inviando al computer richiedente tutto il codice html che compone la pagina statica richiesta. A questo punto il browser interpreta il codice html che ha ricevuto e comincia a ricostruire in memoria l'insieme di elementi ed oggetti che poi mostrera' a video.

Se invece e' stata richiesta una pagina web dinamica allora il web server esegue il codice dinamico, che in sostanza e' un programma, sul server remoto. Il risultato dell'elaborazione di questo codice e' una pagina html che viene restituita e segue infine il percorso precedente fino alla visualizzazione sullo schermo dell'utente.

In questo scenario l'interazione tra client, la macchina dell'utente che vuole visualizzare la pagina web all'interno del suo browser, ed il web server, dove risiede fisicamente la pagina web, e' sincrono.

Cioe' quando il client invia una richiesta, rimane in uno stato di attesa, fino a quando non riceve una risposta di qualche tipo dal web server o finche' non viene raggiunto un periodo timeout. Questo sincronismo viene governato dal protocollo HTTP, cui client e web server aderiscono, e che regola il meccanismo di richiesta-risposta che intercorre tra le due macchine collegate in rete.

Se l'utente richiede un aggiornamento di una pagina che mostra in tempo reale l'andamento dell'indice azionario di borsa, il client richiede al server una versione aggiornata, se esiste, della pagina web. In caso affermativo il server invia al client il codice html della pagina web che conterra' al suo interno le informazioni aggiornate da visualizzare sullo schermo.

Se dalla visualizzazione precedente e' cambiato solo un valore tra molti indici azionari mostrati in una tabella, qualcuno potrebbe chiedersi se non sia piu' efficiente da parte del web server inviare solo i dati che sono cambiati rispetto alla pagina mostrata in precedenza. Di sicuro verrebbero trasmessi molti meno dati dal web server verso il client. E se si sta navigando su internet con un modem a 56k, come avveniva fino a qualche anno fa, trasmettere qualche centinaio di kbytes piuttosto che solo qualche byte fa una bella differenza.

Qualcun'altro a questo punto potra' ribattere che ormai quasi tutti hanno connessioni veloci, ADSL o su fibra ottica, e risparmiare qualche millisecondo (!!!) non fa nessuna differenza.

Dobbiamo tenere presente anche di un'altro aspetto che avviene quando ricarichiamo una pagina web: la ricostruzione del Document Object Model.

Il browser quando interpreta il codice html costruisce in memoria un modello degli elementi che compongono la pagina. La sezione di "head", la sezione di "body", la presenza di paragrafi di testo, di caselle di input, di bottoni, di immagini, di checkbox, di un Form. Ovvero tutti gli elementi che possono essere inseriti in una pagina html hanno la loro controparte in quello che viene chiamato DOM, ovvero Modello ad Oggetti del Documento.

In questo modo abbiamo un mezzo per agire in modo programmatico sul nostro documento visualizzato usando un linguaggio di scripting direttamente sul client, come puo' essere il JavaScript.

Il classico esempio che si riporta e' quello della validazione dei dati di un Form quando si inviano i dati al server. Se dobbiamo valorizzare un campo data dobbiamo controllare che l'utente stia digitando la data nel formato desiderato. E che stia immettendo una data "lecita". Il mese numero 13 ad esempio non esiste sul calendario!

Un programmatore di applicazioni web sa bene che quando possibile e' sempre meglio effettuare la validazione dei dati direttamente sul client per risparmiare l'invio di dati scorretti al server che altrimenti dovra' lui provvedere ad effettuare questo controllo.

Dicevo, quando una pagina web viene ricaricata, anche per la variazione di un singolo dato al suo interno, il browser distrugge il DOM precedentemente memorizzato e ricostruisce da zero il DOM della "nuova" pagina caricata.

Questo e' uno dei motivi per cui la programmazione tradizionale delle applicazioni web basate su pagine dinamiche non ha avuto sviluppi eclatanti. Le pagine web tradizionali non riescono a mantenere lo "stato" delle variabili che compongono il DOM della pagina stessa e che "descrivono" lo stato attuale dell'applicazione sul browser nel client di un dato utente.

Se l'utente ha valorizzato il campo data con la proria data di nascita, non potremmo mantenere "viva" questa informazione quando passiamo ad un'altra pagina e nemmenoquando ricarichiamo quella attuale, se non grazie al supporto del web server a cui magari abbiamo passato il valore di quella variabile da memorizzare come variabile di sessione interna al web server.

Quanti di voi hanno avuto a che fare con questi meccanismi? Tanti imnagino se avete creato qualche piccola applicazione web usando una tecnologia come php, jsp o asp(.net).

Solo per citare gli aspetti piu' elementari della progettazione di una web application.

Torniamo ora alla nostra questione iniziale: le richieste asincrone.

Nella progettazione di una pagina web si ha a disposizione un oggetto manipolabile con Javascript - l'oggetto XMLHttpRequest, o il componente ActiveX corrispondente su IE6 - che puo' effettuare richieste asincrone al web server.

Cioe' richieste che non implicano necessariamente che il client rimanga in attesa della risposta dal server bloccando l'interazione con l'utente della pagina visualizzata, ne' tantomeno la distruzione del Document Object Model quando riceve la risposta alla richiesta effettuata.


E' un po' come se il browser abbia la possibilita' di effettuare operazioni in multithreading nella gestione di una pagina web, grazie allo scambio in background di pacchetti di dati con il server, così che l'intera pagina web non debba essere ricaricata ogni volta che l'utente effettua una modifica.

In realta' Javascript, che e' un linguaggio interpretato in run-time, non ha capacita' di multithreading come linguaggio di scripting/programmazione all'interno di un browser, ed anzi e' molto rigido e perfino oscuro a volte sui meccanismi interni di gestione temporale dell'esecuzione delle sue istruzioni.

In piu', non dovendo ricaricare la pagina completa ad ogni fase di interazione con il web server, come avveniva nelle applicazioni tradizionali, si riesce facilmente a mantenere lo stato delle variabili in gioco nel DOM di un documento visualizzato quanto si vuole. Ovvero fino alla dimissione di quel documento e al caricamento di un'altra pagina.

In sostanza Ajax e' questo. Un nuovo approccio nella realizzazione di applicazioni web. Puo' intervenire anche l'XML, come metodo per l'interscambio dei pacchetti dati asincroni con il server, come menzionato nell'acronimo iniziale, ma vedremo successivamente che alla fine l'uso dell' XML e' piuttosto inusuale nelle applicazioni complesse, preferendo l'utilizzo di altre tecnologie/metodologie pu' facilmente manipolabili da parte del Javascript.

Come si puo' facilmente intuire poi, l'utilizzo di Javascript assume ora un ruolo assolutamente predominante, anche rispetto all' html, mentre prima aveva sicuramente marginale, limitato solo a determinate operazioni limitate all'interno del documento visualizzato.

Adesso Javascript e' lo strumento principale per gestire tutte le interazioni tra utente ed interfaccia grafica visualizzata sul browser, e per la gestione di tutte le richieste asincrone di scambio dati con il server, che puo' avvenire in entrambe le direzioni, e della gestione delle eventuali risposte che ci si aspetta dal web server.