I concetti di base per sviluppare applicazioni Ajax

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à con readyState, è 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>

</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)

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 JavaScript chiamaAjax(), 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).