15315 Letture

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.


I concetti di base per sviluppare applicazioni Ajax - IlSoftware.it