Blackbirdblog

Ho messo on-line da poco il nuovo sito del LUG Orvieto e poco dopo mi sono accorto della necessità di avere uno strumento per inviare brevi messaggi privati agli altri utenti collegati al sito. Una specie di instant messenger ma basato sul classico protocollo HTTP. All’inizio i messaggi venivano visualizzati solamente al refresh delle pagine e potevano passare diversi minuti prima che ci si accorgesse di un nuovo messaggio. La soluzione era ovvia: AJAX. L’unico approccio vincente in questi tipi di applicazioni web.

Per realizzare ciò ho scritto una piccola libreria JavaScript che mi mette a disposizione l’oggetto XMLHttpRequest in maniera trasparente dal browser, attraverso due classi:

• AjaxRequest()
• AjaxResponse()

La classe AjaxRequest permette di creare delle richieste GET HTTP e ritorna come risposta una istanza della classe AjaxResponse se si lavora in modalità sincrona. Ed ecco come funziona la libreria:

Prima di tutto devo creare una istanza della classe AjaxRequest. Il parametro in entrata true sta ad indicare che voglio una richiesta asincrona. Una richiesta asincrona si distingue da una sincrona per il fatto che è parallela alle altre richieste del browser e all’esecuzione di altro codice JavaScript, viaggiando in un vero e proprio thread separato. Una volta chiamato il metodo open() l’esecuzione del codice non si ferma fino alla fine della richiesta ma continua, quindi devo registrare un evento ed inserire all’interno il codice che verrà eseguito alla fine.

var req = new AjaxRequest(true);

Registro l’evento di cambio di stato della richiesta, inserisco all’interno il codice e chiamo il metodo open() passandogli l’url della risorsa HTTP:

req.onStateChange = function(){
    if( req.getReadyState() == COMPLETE ){
        var responseXml = req.getResponseXML();
    }
}
req.open("/check-privatemsg.php?user=1");

In modalità sincrona invece si sarebbe dovuto fare:

var req = new AjaxRequest(false);
var res = req.open("/check-privatemsg.php?user=1");
var responseXml = res.getResponseXML();

A me interessa solamente l’evento della fine della richiesta quindi controllo che req.getReadyState() sia uguale a COMPLETE. Quindi mi prendo la risposta del server web sotto forma di oggetto XML DOM. Si tratta infatti di codice XML che viene scritto da una pagina PHP lato server. Questo è un esempio di codice di risposta:

<?xml version="1.0"?>
<messages>
    <tot>2</tot>
    <last-id>32</last-id>
</messages>

La risposta già codificata sotto forma di oggetto XML DOM è molto vantaggiosa perché posso utilizzare direttamente DOM per accedere ai dati:

var tot = responseXml.getElementsByTagName("tot")[0].firstChild.nodeValue
var lastd = responseXml.getElementsByTagName("last-id")[0].firstChild.nodeValue

Oppure, in alternativa, si può utilizzare lo stream XML da poter elaborare con la nuova libreria di Google AJAXSLT, creata appositamente per poter utilizzare il linguaggio XSL-T all’interno di applicazioni AJAX.
Aggiungendo la funzione parseInt() il gioco è fatto, abbiamo dei numeri interi JavaScript da poter utilizzare come ci pare e piace.

A questo punto controllo il numero dei messaggi e faccio comparire un messaggio di conferma:

confirm("Hai un nuovo messaggio privato!\nVuoi leggerlo ora ?") 

Aggiungere funzionalità AJAX al vostro sito è un gioco da ragazzi e ciò lo renderà più “vivo”.