- Tutto ruota attorno all’oggetto XMLHttpRequest
AJAX non è un nuovo linguaggio di programmazione bensì una tecnica che permette di sviluppare applicazioni web migliori, più “performanti” e più interattive. AJAX poggia le sue basi sull’impiego di codice JavaScript che, mediante l’oggetto XMLHttpRequest, provvede ad instaurare il colloquio tra client e server evitando il “reload” (ossia un nuovo caricamento) della pagina web. In questo modo, lo sviluppatore AJAX può rendere la propria applicazione web in grado di aggiornarsi automaticamente veicolando solo le informazioni strettamente necessarie e senza dover appunto ricaricare tutti gli elementi che la compongo (già richiesti in precedenza al server).
Il trasferimento dei dati in AJAX avviene in modo asincrono: ciò significa che i dati via a via necessari vengono richiesti al server e prelevati “in background” al bisogno.
AJAX sfrutta una combinazione di standard per il web: JavaScript, XML, HTML e CSS. Le applicazioni che poggiano su AJAX sono in grado di funzionare su qualunque configurazione client, indipendentemente dal browser e dalla piattaforma in uso.
Uno dei vantaggi di AJAX consiste nella possibilità di utilizzare la tecnica per rendere le applicazioni web più “ricche” e più semplicemente fruibili rendendo così sempre più sfumato il confine con i software “desktop” tradizionali.
Coloro che operano da anni sul web non avranno difficoltà a comprendere i rudimenti di AJAX dal momento che gli standard utilizzati sono gli stessi ai quali si è ricorso in passato.
L’oggetto XMLHttpRequest
Si pensi ad un’applicazione web tradizionale, non basata su AJAX, che provveda a salvare in un database i dati inseriti dall’utente. Questi, lato client, dovrà compilare un modulo (form), cliccare sul pulsante “Invia”, attendere la risposta del server quindi l’arrivo di una nuova pagina web che mostrerà il risultato dell’operazione.
Nell’approccio AJAX, è JavaScript a comunicare direttamente con il server web attraverso l’utilizzo dell’oggetto XMLHttpRequest, supportato da tutti i browser più importanti (Internet Explorer, Firefox, Safari, Chrome, Opera). Grazie ad esso, l’utente potrà restare sulla medesima pagina web: i dati saranno inviati in modo “trasparente” così come la risposta del server sarà elaborata senza la necessità di aprire un’altra pagina.
La tecnica AJAX è stata sfruttata a partire dal 2005 e, successivamente, sono nati un sempre maggior numero di servizi che ne attingono a piene mani. Il primo esempio che balza alla mente è la funzionalità “Google Suggest”: il motore di ricerca di Mountain View, per impostazione predefinita, ogniqualvolta si iniziano a digitare i termini di una ricerca propone una lista di suggerimenti. La pagina html visualizzata è sempre la stessa ma il contenuto dell’elenco viene aggiornato dinamicamente ad ogni tasto premuto.
Il codice seguente si fa carico di istanziare un nuovo oggetto XMLHttpRequest:
<script type=”text/javascript”>
function chiamaAjax()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// codice valido per IE7 e succ., Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// codice valido per IE6 e IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
else
{
alert(“Il browser non supporta XMLHTTP”);
}
}
</script>
Com’è possibile notare, per creare l’oggetto XMLHttpRequest (denominato, in questo caso,xmlhttp), vengono usate due sintassi differenti, a seconda del browser con il quale si ha a che fare. Se la prima fallisce, viene utilizzata la seconda. In caso di nuovo fallimento, viene mostrato un messaggio che informa circa il mancato supporto di XMLHttp da parte del browser.
Come inviare una richiesta al server
Al solito, come se si trattasse di un qualunque form, la richiesta può essere inviata al server sotto forma di GET o di POST. I metodi utilizzabili allo scopo sono open() e send().
Il primo metodo necessita, in ingresso, di tre parametri: è necessario specificare l’uso di GET o di POST, la pagina lato server da richiamare, un’indicazione che consente di attivare il trasferimento asincrono dei dati:
xmlhttp.open(“GET”,”ajaxtest.asp”,true);
xmlhttp.send(null);
A proposito di GET e POST
In HTML, nel momento in cui si vogliono trasmettere delle informazioni al server, ad esempio i dati inseriti in un comune modulo online (“form”), si utilizza solitamente il metodo POST: i dati vengono codificati dal browser sotto forma di un URL. Nel caso di GET, invece, il contenuto delle variabili trasmesse ad una pagina web, viene visualizzato direttamente nella barra degli indirizzi del browser (nella forma nomepagina.php?var1=abc&var2=def).
I dati inviati al server attraverso richieste GET o POST verranno elaborati per rispondere opportunamente alle richieste specifiche dell’utente. In tutte le pagine web dinamiche, il cui contenuto, cioè, viene generato dal server al momento della richiesta proveniente dal sistema client collegato e che quindi, di volta in volta, può differire, si analizzano le richieste GET e POST per visualizzare il materiale richiesto dall’utente (client). In particolare, i dati ricevuti attraverso richieste GET e POST viene solitamente impiegato, previa analisi ed eventuali rielaborazione, per effettuare interrogazioni su una base dati. Ad esempio, se una certa pagina web è stata studiata per visualizzare l’elenco degli articoli appartenenti a diverse categorie, attraverso l’uso di GET e POST, si possono estrarre da un database collegato e quindi visualizzare solo i contenuti che si riferiscono alla specifica categoria indicata dall’utente.
Nel nostro esempio si è utilizzato il metodo GET senza specificare alcun parametro accessorio. Per “colloquiare” con la pagina dinamica lato server si può decidere di abbinare dei parametri aggiuntivi.
I preparativi per l’invio della richiesta al server
Per stabilire in quale circostanza dovrà essere inviata la richiesta al server, è possibile ricorrere agli eventi JavaScript di base. Ecco una lista di quelli più utili:
onclick L’utente clicca sull’elemento HTML indicato.
onblur Un elemento HTML perde il “focus” ossia non è più selezionato.
onchange Viene modificato il contenuto del campo o della casella di testo.
ondblclick L’utente fa doppio clic con il mouse su un oggetto.
onfocus L’elemento viene selezionato dall’utente.
onkeydown L’utente ha premuto un tasto qualunque sulla tastiera.
onkeyup L’utente ha rilasciato un tasto precedentemente premuto.
onkeypress E’ stato premuto un tasto oppure mantenuto premuto.
onload La pagina o l’immagine è stata caricata.
onmousedown L’utente ha premuto un tasto del mouse.
onmouseup L’utente ha rilasciato un tasto del mouse.
onmouseover Il puntatore del mouse è stato spostato sopra l’elemento indicato.
onmouseout Il puntatore del mouse è stato spostato fuori dall’elemento indicato.
onresize La finestra del browser od un frame sono stati ridimensionati.
onsubmit E’ stato cliccato il pulsante “Invia”.
onselect Il testo è stato selezionato.
onunload L’utente ha abbandonato la pagina in corso di visita.
Ciascun evento può essere inserito all’interno di una tag HTML per scatenare l’esecuzione di uno specifico codice JavaScript.
- Elaborare e gestire la risposta del server
Un’importante proprietà dell’oggetto XMLHttpRequest è onreadystatechange. Essa consente di gestire i dati ricevuti in risposta da parte del server web. Abbinando l’utilizzo della proprietà conreadyState, è possibile innanzi tutto stabilire se la comunicazione è andata o meno a buon fine. Nel caso in cui il valore della proprietà readyState, associata all’oggetto XMLHttpRequest, assuma il valore “4”, significa che la richiesta è stata completata con successo.
La proprietà responseText consentirà, successivamente, di leggere la risposta vera e propria fornita dal server.
Ecco come si presenta il codice finale, lato client:
<html>
<body>
<script type=”text/javascript”>
function chiamaAjax()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// codice valido per IE7 e succ., Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// codice valido per IE6 e IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
else
{
alert(“Il browser non supporta XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.getElementById(‘frasè).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”ajaxserver.asp”,true);
xmlhttp.send(null);
}
</script>
<form name=”miomodulo”>
<img src=”immagine.gif” border=”0″ onclick=”chiamaAjax();” />
</form>
<div id=”frase”></div>
</body>
</html>
Il codice dovrà essere salvato sotto forma di file html sul sistema locale (esempio:ajaxclient.html).
La tag <div> funge da “segnaposto”: all’interno di essa verrà inserito il testo ricevuto come risposta dal server web. L’operazione si concretizza con una semplice istruzione JavaScript:document.getElementById(‘frasè).innerHTML=xmlhttp.responseText;
Preparazione di una pagina dinamica lato server
La pagina ajaxserver.asp è una semplice pagina dinamica ASP. Ovviamente, lato server, sarà possibile ricorrere a qualunque linguaggio di scripting, ad esempio PHP.
<%
Response.Expires=-1
Dim massimo,minimo
Dim risultato
minimo=1
massimo=12
Randomize
risultato=Int((massimo-minimo+1)*Rnd+minimo)
select case risultato
case 1
frase=”Tanto va la gatta al lardo che ci lascia lo zampino”
case 2
frase=”Chi semina vento raccoglie tempesta”
case 3
frase=”Chi ha tempo non aspetti tempo”
case 4
frase=”Batti il ferro finché è caldo”
case 5
frase=”A buon intenditor poche parole”
case 6
frase=”Chi dorme non piglia pesci”
case 7
frase=”Chi la dura la vince”
case 8
frase=”Chi trova un amico trova un tesoro”
case 9
frase=”Chi va con lo zoppo impara a zoppicare”
case 10
frase=”Chi va per uccellar resta uccellato”
case 11
frase=”Dire a nuora perch´ suocera intenda”
case 12
frase=”Impara l’arte e mettila da parte”
end select
Response.Write(frase)
%>
Lo script ASP lato server è banale: viene generato casualmente un numero tra 1 e 12 quindi viene visualizzato il detto popolare corrispondente.
Salvando su un server web IIS le due pagine ajaxserver.asp e ajaxclient.html quindi richiamando da browser il secondo file, si noterà come i proverbi vengano visualizzati ad ogni clic sull’immagine senza che sia effettuato alcun reload della pagina web.
Insieme ai file ajaxserver.asp e ajaxclient.html dovrà essere memorizzato anche un file d’immagine, in formato gif, con il nome di ajaxserver.asp e immagine.gif.
Recuperare informazioni da una base dati
Come già evidenziato in precedenza, nello scrivere il codice della funzione JavaScriptchiamaAjax(), abbiamo usato il metodo GET per l’invio della richiesta al server. Nel semplice esempio illustrato, il server selezionava a caso un detto popolare tra quelli indicati e lo “stampava” sulla pagina. La pagina dinamica lato server è invece solitamente, com’è ovvio, più “intelligente” ossia restituisce un risultato, sulla base della specifica richiesta ricevuta dal client. Tipicamente, inoltre, il server – ottenuti dal sistema client (il browser dell’utente collegato) uno o più parametri in ingresso – effettua una interrogazione all’interno di una base dati. A questo punto, dopo aver selezionato i valori d’interesse, invia il risultato dell’operazione al client.
Supponiamo che sul server sia memorizzato un database (tralasciamo i dettagli sul formato) che contenga i dati per la gestione di un’attività commerciale. La base dati ospita le informazioni circa gli acquisti effettuati dai vari clienti. Ipotizziamo, ancora, di volere fare in modo che vengano visualizzati gli acquisti effettuati da un cliente identificato con un certo ID. La pagina dinamica lato server (nel nostro caso, ajaxserver.asp) deve ricevere in ingresso l’ID del cliente e restituire l’elenco degli acquisti effettuati.
La richiesta GET effettuata mediante JavaScript diventerà qualcosa di simile:
xmlhttp.open(“GET”,”ajaxserver.asp?id=”+idcliente,true);
ove idcliente è una variabile contenente l’ID del cliente.
La realizzazione di una chiamata POST è leggermente diversa. In questo caso, è necessario fare utilizzo degli headers (setRequestHeader):
xmlhttp.open(“GET”,”ajaxserver.asp”,true);
xmlhttp.setRequestHeader(“content-type”, “application/x-www-form-urlencoded”);
xmlhttp.send(“id=”+idcliente);
Nel corso dei prossimi appuntamenti approfondiremo, sempre per esempi, l’utilizzo di AJAX. Vedremo, in particolare, come sia possibile gestire eventuali problematiche legate all’irraggiungibilità del server ed all’elaborazione di dati strutturati in forma più complessa (lettura di documenti XML).
fonte: ilSoftware
Mountain View converte all’open source alcuni degli strumenti utilizzati per costruire le sue appliance più popolari. Affinché il web sia sempre più veloce
Dopo poco più di tre mesi dall’ultimo 
Sempre più spesso si sente parlare di web 1.0 e web 2.0 senza sapere esattamente di cosa si tratti e fondamentalmente che differenza ci sia tra i due.
