La tecnologia AJAX

Note preliminari

Questo articolo è stato scritto da Matteo Tinazzi. La pubblicazione su questo sito è stata autorizzata dall’autore.

Introduzione

AJAX è un acronimo che sta per Asynchronous Javascript And XML il che significa uno scambio di dati asincrono tra il server e il client attraverso javascript e XML.

Tanto per non farci impressionare dalla terminologia spieghiamo in parole semplici questo concetto: attraverso l’oggetto javascript xmlHttpRequest il nostro browser aprirà una nuova connessione verso il server e scaricherà il contenuto di una pagina “al volo”, cioè senza ricaricare la pagina principale. Questo ci permette di poter aggiornare i contenuti della nostra pagina iniziale senza doverla per forza ricaricare, il che ci farà (sia ai webmaster che ai visitatori) risparmiare tempo e banda.

Perchè viene chiamato in causa l’XML? Bhe semplice questo oggetto è stato creato appositamente per restituire un documento nel formato XML, il che permette una grande semplicità e flessibilità nel gestire i dati.

Per capire meglio il funzionamento vediamo innanzitutto come istanziare questo oggetto per i browser basati su ActiveX:

var xml = new ActiveXObject("Microsoft.XMLHTTP");

e per tutti gli altri:

var xml = new xmlHttpRequest();

Questa differenza è dovuta alle solite incompatibiltà tra browsers, ma fortunatamente, una volta istanziato, i metodi di questo oggetto sono uguali e sono sei:

• abort() blocca la richiesta corrente.
• getAllResponseHeaders() restituisce tutti gli header in formato stringa.
• getResponseHeader(“etichetta”) restituisce un particolare header.
• open(“metodo”,”URL”[,”Flag Sincronia”[,”nome utente”[,”passwrod”]]]) assegna all’oggetto l’URL da aprire, il metodo di invio dei dati (GET o POST), il FLag di sincronia che poi andremo a spiegare, uno username ed una password. Gli attributi racchiusi tra parentesi quadre sono opzionali.
• send(“contenuto”) invia la richiesta impostata con open e il parametro opzionale “contenuto” passerà i dati POST in formato stringa.
• setRequestHeader(“etichetta”, “valore”) imposta un header definito da “etichetta” ad un valore.

oltre a questi metodi l’oggetto ha anche sei proprietà:

• onreadystatechange è il gestore di eventi che viene richiamato ad ogni cambio di stato della chiamata http
• readyState indica i 5 stati del caricamento e va da 0 (non inizializzato) a 4 (caricamento completato)
• responseText questa proprietà, dopo il completo caricamento, contiene una versione testuale della risposta del server
• responseXML un oggetto di tipo DOM XML contenente i dati ritornati dal server
• status il codice numerico ritornato dal server (200 OK, 404 Non trovato, 403 Non autorizzato ecc)
• statusText la descrizione testuale del codice numerico ritornato da status

Funzionamento

Ora che abbiamo fatto una carrellata generale sull’argomento perchè non provarne subito il funzionamento?

Innanzitutto inizializziamo subito l’oggetto in questione

con il sistema di try e catch evitiamo di generare errori che bloccano lo script e creiamo l’istanza in base al tipo di oggetto supportato dal browser.

Effettuare una chiamata

Ora andiamo a scrivere una funzione che ci permetta di effettuare le chiamate ad un’altra pagina e che ci permetta di decidere se inviare i dati a queste usando il meodo $_GET o il metodo $_POST.

function initXml(){
    try {
        x = eval("new ActiveXObject('Microsoft.XMLHTTP');");
        return x;
    } catch(e){
        try{
            x = eval("new XMLHttpRequest();");
            return x;
        } catch(e){
            alert("Questo browser non supporta AJAX");
            x = false;
            return x;
        }
    }
}

Se analizziamo questa funzione noteremo che il funzionamento non è poi così complicato, infatti alla prima riga andiamo a richiamare la funzione che fa l’inizializzazione e ne salviamo il valore ritornato nella variabile xml e alla riga successiva andiamo a verificare che l’inizializzazione sia andata a buon fine, e quindi che la variabile xml sia diversa da false.

Il passo successivo è quello di assegnare una funzione al gestore dell’evento di cambio stato, in modo che ad ogni cambiamento della proprietà readyState questa venga richiamata. Il codice che ci permette di fare questo è xml.onreadystatechange = parseResponse; che assegna la funzione parseResponse.

Perchè abbiamo dovuto assegnare una funzione al gestore del cambio stato dell’oggetto? La risposta è semplice ma non ovvia e viene chiarita meglio nelle righe di codice succesive.

Sia per il metodo POST che per quello GET la prima operazione da eseguire è di impostare attraverso il metodo open i tre parametri principali per poter inviare una richiesta ad un’altra pagina e sono il metodo di invio dati (POST/GET), il nome del file della pagina da chiamare e il flag di sincronia.

Proprio quest’ultimo indica se il tipo di chiamata sarà sincrono (valore false) o asincrono (valore true), analizziamo le differenza tra i due tipi di chiamata.

La chiamata sincrona ed asincrona

La chiamata sincrona in poche parole “blocca” l’esecuzione dello script fino a che la pagina chiamata non è stata completamente caricata il che ci semplificherebbe la vita in quanto non sarebbè più necessario assegnare una funzione al gestore onreadystatechange in quanto dopo aver chiamato il metodo send subito dopo potremmo inserire il codice che interpreta la risposta, ma se la chiamata per qualche motivo tarda nel caricare i dati o ahimè si interrompe il collegamento al server ci ritorveremmo con il browser completamente bloccato, cosa che è meglio evitare.

La chiamata asincrona invece (ed è questa che andremo ad usare), invia la richiesta alla pagina e poi prosegue con il resto dello script senza più attendere nessuna risposta, infatti a gestire le risposte abbiamo delegato la funzione parseResponse.

Con questo metodo abbiamo risolto qualsiasi problema di connessione tra client e server e anche se i tempi di caricamento dei dati sono lunghi il client comunque non resta bloccato.

L’if che controlla il valore della variabile metodo ci semplifica la vita per differenziare i due metodi di invio dati alla pagina da richiamare, le diferenze tra il metodo GET e il POST sono semplici.

Per il GET file dovrà essere nella forma “nomefile.php?var=1&var2=2&var3=valore3” e quindi sarà “nomefile + variabili” come se fosse una stringa creata dal submit di una form con method GET e alla pagina chiamata dovremo inviare un null come contenuto del metodo send() in quanto tutti i dati sono già nella chiamata.

Per il POST, invece, ci sono due passaggi aggiuntivi e sono: spezzare file dove troviamo il carattere “?” recuperare parte successiva e nominarla args, mentre la parte precedente riassegnarla a file, facendo questo ci troveremo con file che sarà uguale a “nomefile.php” metre args varrà “var=1&var2=2&var3=valore3”. Il secondo passaggio sarà impostare un header che indicherà alla pagina che il Content-Type (tipo di contenuto) è ‘application/x-www-form-urlencoded’, praticamente indica che i dati saranno di tipo codificato come da una form con method POST.

Il metodo send nel caso di chiamate di tipo POST, oltre a chiamare la pagina impostata con il metodo open, sarà incaricato di inviare args che, come ricordiamo, contiene i dati.

Ora non ci resta che creare la funzione che si occupa di ricevere i risultati della nostra chiamata

function parseResponse(){
   if(xml.readyState==4 && xml.status=="200"){
      alert(xml.responseText)
   }
}

Per non dilungarci troppo, ed essendo questo un articolo sulle basi della tecnologia AJAX andremo semplicemente a verificare lo stato di caricamento dell’xml usando la sua proprietà xml.readyState e lo stato http attraverso xml.status, se il primo vale 4 (caricamento completato) e il secondo vale “200” (OK) visualizzeremo un alert con il contenuto testuale della chiamata usando xml.responseText.