Introduzione

Per gli informatici, Ajax non è nè una squadra di calcio, nè un detersivo, nè il leggendario eroe dell'Iliade di Omero.
AJAX (acronimo di Asynchronous JAvascript and Xml) è un gruppo di tecniche di sviluppo per il Web utilizzate sul lato client per creare applicazioni Web asincrone. Grazie a queste tecniche, le applicazioni web possono scambiare dati con un server in modo asincrono (in background) senza interferire con la visualizzazione ed il comportamento della pagina esistente.
I dati possono essere recuperati utilizzando l'oggetto XMLHttpRequest.
Nonostante sia presente nell'acronimo, invece, l'uso di XML non è necessario e le richieste non hanno bisogno di essere asincrone.
HTML e CSS possono, naturalmente, essere usati in combinazione per la creazione dei contenuti e dello stile.

In estrema sintesi Ajax è, dal punto di vista tecnico, l'unione di due caratteristiche:

• 1 - La capacità di Javascript di aggiornare parte di una pagina HTML senza che questa venga caricata nuovamente.
• 2 - La capacità di Javascript di fare richieste tramite il protocollo HTTP.

Molto spesso si parla di Ajax anche quando viene utilizzata una soltanto di queste due caratteristiche.
Vediamo, tanto per cominciare, la prima di queste caratteristiche, servendoci di un paio di esempi concreti che servono a dimostrare cosa si intende per aggiornamento in tempo reale di una pagina.

Premendo sul pulsante Rispondi il testo della domanda verrà sostituito con una risposta. Mentre premendo sul pulsante Reset si tornerà alla situazione di partenza.
Esaminiamo, allora, il codice Html dell'Esempio A:

<DIV id=playA><p>Finchè la barca va...</p></DIV> <p><INPUT onclick=script1(); type=button value="Rispondi" style="width:100px"></p> <p align='right'> <INPUT onclick=script2(); type=button value="Reset" style="width:60px"></p>

Il messaggio viene identificato come elemento tramite il tag DIV id=playA, mentre ai 2 pulsanti vengono associate le funzioni Javascript script1 e script2, definite qui di seguito.

<script> function script1() { var elem = document.getElementById("playA"); elem.innerHTML = "<p>... lasciala andare!</p>"; } function script2() { var elem = document.getElementById("playA"); elem.innerHTML = "<p>Finchè la barca va...</p>"; } </script>

A parte il testo del messaggio, le 2 funzioni sono praticamente identiche. In esse vengono svolte 2 operazioni:

• Prelievo dell'elemento interessato tramite getElementById
• Modifica della sua proprietà innerHTML con il nuovo messaggio

La funzione document.getElementById("playA") restituisce un riferimento all'elemento della pagina che ci interessa modificare. L'oggetto in questione ha una proprietà chiamata innerHTML che può essere letta/scritta. Se viene letta restituisce il codice HTML presente dentro il DIV, se viene scritta, impostandola a qualcosa di diverso, come avviene nell'ultima riga delle funzioni, provoca il cambiamento del contenuto del DIV.

Premendo ripetutamente sul pulsante ON/OFF il messaggio perde e riacquista la sua collocazione nella pagina.
Esaminiamo, allora, il codice Html dell'Esempio B:

<DIV id="playB"><p>Messaggio Fantasma</p></DIV> <p><INPUT type="button" value="ON/OFF" onClick="script3()"></p>

Il messaggio viene identificato come elemento tramite il tag DIV id=playB, mentre al pulsante viene associata la funzione Javascript script3, definita qui di seguito.

<script> function script3() { var elem = document.getElementById("playB"); if (elem.style.visibility == 'hidden') { elem.style.visibility = 'visible'; elem.style.display = 'block'; } else { elem.style.visibility = 'hidden'; elem.style.display = 'none'; } } </script>

La funzione preleva, dapprima, l'elemento interessato tramite getElementById, come nel caso precedente.
Poi utilizza 2 proprietà dell'oggetto per effettuare le commutazioni:

• visibility rende l'oggetto visibile quando viene impostata a visible, altrimenti se impostata a hidden rende l'oggetto invisibile.
• display viene impostata a none quando si vuole che l'oggetto non occupi più il suo spazio nella pagina, altrimenti anche se invisibile manterrebbe ugualmente il suo spazio. A volte questo comportamento è desiderabile, altre volte no. Si noti come la proprietà display venga impostata a block quando si vuole far riapparire l'oggetto, nel caso esso sia contenuto in un DIV, in altri casi e per altri elementi occorrerà impostarlo a inline.

Tutta la soluzione funziona, praticamente, sfruttando le proprietà dei CSS, e quindi una loro buona conoscenza diventa sempre più importante con l'evolversi degli strumenti per la programmazione del web.