1. primi passi per iniziare
Quante volte in questi ultimi mesi abbiamo sentito parlare di AJAX?
Ho deciso di scrivere quest'articolo con l'intento di aiutare a sviluppare le prime
applicazioni AJAX a coloro che si vogliono avvicinare a questo "nuovo mondo"
ritenuto spesso essere una cosa per soli esperti.
Come premesso partiamo da zero cominciando col dire che AJAX è un acronimo e sta per
Asynchronous Javascript and XML.
AJAX non è un linguaggio di programmazione ma piuttosto la combinazione di più
tecnologie (HTML , XML, Javascript, CSS) per la realizzazione di applicazioni web più
veloci.
Il tradizionale modello web si basa sul paradigma request/response sincrono cioè il
browser fa una richiesta al web server e rimane in attesa della risposta fino alla risposta
da parte del web server che a seconda dei casi può impiegare più o meno tempo.
Mentre, come il nome stesso suggerisce, AJAX si basa su comunicazione asincrona cioè il
browser fatta la richiesta non si blocca aspettando la risposta ma permette all'utente di
continuare la navigazione aggiornando solo in seguito la pagina html con i dati restituiti
dal server.
Figura. 1
Per comunicare con il server AJAX usa Javascript ed in particolare l'oggetto
XMLHttpRequest (XHR) ciò comporta che a differenza di una comunicazione web classica
ora abbiamo un livello in più lato client che viene chiamato motore AJAX (AJAX engine)
ed è proprio questo livello che permette di non dover ricaricare sempre la pagina ad ogni

2. richiesta ma soltanto quella parte che ci interessa. Il server può rispondere inviando i
dati in formato XML che vengono quindi processati utilizzando Javascript ma questo non
è strettamente necessario.

3. Figura. 2
Questo è ciò che avviene in sintesi ora vediamo un semplice esempio di utilizzo puramente
didattico di come le cose funzionino in pratica.
Come ultima cosa ricordo che AJAX lavora lato client e che quindi possiamo lavorare lato
server con il linguaggio che più ci aggrada (Java, PHP, .Net, etc).
Io utilizzerò in seguito PHP.
Let's go.
Immaginiamo di avere un form con due campi testo.
Vogliamo che il secondo campo, dopo ogni carattere digitato nella prima casella di testo,
si valorizzi con il testo reso maiuscolo del primo.
Perciò cominciamo con lo scrivere il form con i due campi testo.
<form>
Input text: <input type="text" name="inputText" onkeyup="startRequest()">
<br>
Output text: <input type="text" name="outputText" readonly>
</form>

4. Ogni volta che digitiamo un carattere nel campo inputText viene richiamata la funzione
startRequest e da qui cominciamo a parlare di AJAX.
Per prima cosa si dichiara una variabile globale (objXmlHttpReq) per contenere il
riferimento all'oggetto XMLHttpRequest (responsabile della comunicazione AJAX con il
server).
Cominciamo col dire che qui in passato si creavano i primi problemi in quanto IE non
implementava l'oggetto XMLHttpRequest standard ma ne utilizzava uno suo e quindi
dovevamo verificare quale browser stavamo utilizzando per creare l'oggetto giusto.
Tuttavia con IE7 Microsoft ha deciso di implementare anche lei l'oggetto XMLHttpRequest
superando quindi il problema che però rimane per le versioni precedenti.
Dopo aver dichiarato la variabile objXmlHttpReq scriviamo la funzione
(createXmlHttpRequest) che ci servirà per creare l'istanza dell'oggetto XMLHttpRequest.
Questa funzione molto semplice testa se il browser che utilizziamo supporta l'oggetto
XMLHttpRequest ed in tal caso ne istanziamo uno altrimenti verifica se il browser supporta
i controlli ActiveX (ciò significa che stiamo utilizzando IE5 o IE6) e se il controllo ritorna
true verrà creata un'istanza tramite la chiamata all'oggetto equivalente implementato da
Microsoft.
Qualora anche questo non fosse il caso mostriamo un messaggio di errore e settiamo a
null la variabile objXmlHttpReq.
Listato 1
var objXmlHttpReq;
function createXMLHttpRequest()
{
if (window.XMLHttpRequest){
// codice per IE7+, Firefox, Chrome, Opera, Safari
objXmlHttpReq=new XMLHttpRequest();
} else if (window.ActiveXObject){
// codice per IE6, IE5
objXmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
} else {
objXmlHttpReq=null;
alert("Il tuo browser non supporta XMLHTTP. Scaricati una versione più
aggiornata!");
}
}
La seconda funzione startRequest per prima cosa crea l'istanza dell'oggetto
XMLHttpRequest con la chiamata alla funzione sopra descritta.
Poi verificato che è stata effettivamente creata l'istanza dell'oggetto invia la richiesta al
server passandogli il valore del campo inputText ed infine imposta il gestore di eventi con
il nome della funzione da richiamare al verificarsi di un evento.

5. Listato 2
function startRequest()
{
createXMLHttpRequest();
if (objXmlHttpReq!=null){
objXmlHttpReq.open("GET",
"upperCase.php?inputText="+document.getElementById('inputText').value",
true);
objXmlHttpReq.send(null);
objXmlHttpReq.onreadystatechange = handleStateChange;
}
}
Quest'ultima funzione ha il compito di aggiornare il campo outputText con il valore di
ritorno dal server ma prima verifica che lo stato dell'oggetto XMLHttpRequest sia 4 (che
sta per complete).
Per completezza gli altri possibili stati sono:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
Listato 3
function handleStateChange()
{
if (objXmlHttpReq.readystate == 4){
if (objXmlHttpReq.status == 200 ){
document.getElementById('outputText').value =
objXmlHttpReq.responseText;
}
}
}
Non resta che vedere il codice lato server.
Come abbiamo detto vogliamo trasformare in maiuscolo il contenuto del campo inputText
che ci viene passato al momento della richiesta del client.
Per far ciò è sufficiente recuperare il valore passato e restituirlo convertito in maiuscolo
dalla funzione php strtoupper ed il gioco è fatto.
Listato 4 (upperCase.php)
<?php
if(isset($_GET['inputText']){
echo strtoupper($_GET['inputText']);
}
?>

6. Sarà ora sufficiente riassemblare le varie linee di codice sopra descritte per ottenere il
codice lato client del nostro esempio:
Listato 5 (text_to_upper.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Primo esempio di Ajax - PHP</title>
<script language="javascript">
var objXmlHttpReq;
function createXMLHttpRequest()
{
if (window.XMLHttpRequest){
// codice per IE7+, Firefox, Chrome, Opera, Safari
objXmlHttpReq = new XMLHttpRequest();
} else if (window.ActiveXObject){
// codice per IE6, IE5
objXmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} else {
objXmlHttpReq = null;
alert("Il tuo browser non supporta XMLHTTP. Scaricati una
versione più aggiornata!");
}
}
function startRequest()
{
createXMLHttpRequest();
if (objXmlHttpReq != null){
objXmlHttpReq.open("GET",
"upperCase.php?inputText="+document.getElementById('inputText').value,
true);
objXmlHttpReq.send(null);
objXmlHttpReq.onreadystatechange = handleStateChange;
}
}
function handleStateChange()
{
if (objXmlHttpReq.readystate == 4){
if (objXmlHttpReq.status == 200 ){
document.getElementById('outputText').value =
objXmlHttpReq.responseText;
}
}
}
</script>
</head>

7. <body>
<form>
Input text: <input type="text" id="inputText"
onkeyup="startRequest()" />
<br>
Output text: <input type="text" id="outputText" readonly />
</form>
</body>
</html>
Spero di essere stato chiaro e di avervi incuriosito abbastanza da farvi utilizzare AJAX
nelle vostre prossime applicazioni.
Riferimenti
• http://www.adaptivepath.com/ideas/essays/archives/000385.php
• http://it.wikipedia.org/wiki/AJAX
• http://www.w3schools.com/ajax/ajax_intro.asp
• http://www.ibm.com/developerworks/web/library/wa-ajaxintro1.html