JavaScript/Introduzione ad AJAX

Con l'acronimo AJAX (Asynchronous JavaScript And XML) si identifica l'uso di un particolare oggetto JavaScript (l'oggetto XMLHttpRequest) che permette di effettuare le cosiddette richieste asincrone.

Un altro tipo di dinamicità

Finora abbiamo visto come rendere dinamica una pagina nell'ambito dei file in cui viene inserito il file JavaScript. Usando l'oggetto XMLHttpRequest, invece, possiamo rendere dinamica la pagina nell'ambito delle richieste file-server tramite il protocollo HTTP.

In pratica, possiamo caricare, tramite JavaScript, pagine presenti sul nostro web server; questo permette quindi di poter eseguire una grande quantità di operazioni senza dover far caricare all'utente altre pagine.

Un esempio

Supponiamo ad esempio di voler creare una tipica pagina "mostra suggerimenti": vogliamo che, ogni volta che l'utente clicca su un pulsante, venga caricato un nuovo suggerimento.

Per fare questo abbiamo implementato sul server una pagina scritta in un linguaggio lato server (come Java, PHP o ASP) che restituisca un suggerimento casuale tra un elenco di suggerimenti contenuti in un database. La pagina restituita dal nostro script lato server non deve contenere la struttura del documento HTML, ma solo il testo del suggerimento.

Con AJAX in questo modo potremmo fare sì che quando l'utente clicca sul pulsante "Mostra suggerimento" tramite l'oggetto XMLHttpRequest richiamiamo il testo restituito dal nostro script lato server (attenzione, non carichiamo il sorgente del PHP o ASP o quello che sia, ma il testo che restituiscono) e lo mostriamo all'interno di un apposito div.

Creare l'oggetto XMLHttpRequest

Per istanziare un oggetto XMLHttpRequest usare la seguente sintassi:

xmlhttp=new XMLHttpRequest();

Tutti i browser moderni supportano nativamente l'oggetto XMLHttpRequest. Tuttavia Internet Explorer lo supporta solamente dalla versione 7. Se si vuole garantire compatibilità anche con le versioni precedenti di IE, si può usare la funzione fornita di seguito (che restituisce un oggetto AJAX oppure avvisa l'utente che la funzionalità non è presente sul browser in uso):

function newAjax() {
    var xmlHttp;
    try
    {
        // Firefox, Opera e Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (exc)
    {
        // Internet Explorer
        try
        {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (exc)
        {
            try
            {
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (exc)
            {
                alert("Il tuo browser non supporta AJAX!");
                return false;
            }
        }
    }
    return xmlHttp;
}

Questa funzione che restituisce un nuovo oggetto XMLHttpRequest utilizza il costrutto try... catch; senza analizzarlo nei dettagli, questo costrutto permette di eseguire una porzione di codice (indicata nel blocco try) e, nel caso questa porzione generi un errore, eseguirne un altro (blocco catch).
In questo modo se la prima riga xmlHttp=new XMLHttpRequest(); non funziona viene richiamato il blocco successivo, che istanzia l'oggetto in modo corretto per le versioni di Internet Explorer precedenti alla 7.

Per creare un nuovo oggetto AJAX, quindi, basterà inserire nel nostro script la funzione sopra indicata e poi la riga:

var ajax = newAjax();

Altri progetti

Altri progetti

• Wikipedia
• Wikimedia Commons

• Wikipedia contiene una voce su AJAX
• Wikimedia Commons contiene immagini o altri file su AJAX

Collegamenti esterni

• (IT) Iniziare AJAX | MDN
• (EN) Tutorial ad AJAX su w3schools