Come abbiamo visto in un precedente articolo fare una richiesta con AJAX non comporta grandi difficoltà, tuttavia con la classe Request di MooTools il tutto risulta ancora più semplice ed efficace:

var ajaxRequest = new Request({
    url: $("urlTextBox").value,
    method: "post",
    data: "parametro1=ciao¶metro2=salve",
    async: true,
    noCache: true,
    headers: {
        "Warning": "just an header"
    },
    onProgress: function(info, xhr) {
        statusDiv.innerHTML = parseInt(info.loaded / info.total * 100, 10) + "%";
    },
    onSuccess: function(responseText, responseXML){
    	statusDiv.innerHTML = "Richiesta terminata con successo: " + responseText;
    },
    onFailure: function(xhr) {
    	statusDiv.innerHTML = "Richiesta fallita: " + xhr.status + " - " + xhr.statusText;
    }
});

ajaxRequest.send();

Questo codice permette di sfruttare tutte le più interessanti funzionalità dell'oggetto Request. Per prima cosa bisogna instanziarlo passandogli tutte le impostazioni, quindi è sufficiente invocare il metodo send per inviare la richiesta. Ma vediamo i parametri uno ad uno:

• url: l'URL della pagina verso la quale inoltrare la richiesta, deve includere anche i parametri della query (ad esempio "/pagina.aspx?parametro=valore");
• method: "post" o "get" (per conoscere la differenza riferirsi all'articolo su POST), di default è "post";
• data: corpo della richiesta, utilizzato solamente in una richiesta con method impostato a "post";
• async: specifica se effettuare la richiesta in maniera asincrona o meno, nel primo caso (valore true, predefinito) una volta chiamato send l'esecuzione del codice continuerà senza fermarsi, mentre se async è impostato su false verrà interrotta fino al completamento della richiesta;
• noCache: se impostato su true aggiunge alla fine dell'URL della richiesta un parametro fittizio per impedire ad Internet Explorer di memorizzare in cache il risultato di una richiesta, così da fare sempre un responso appena generato;
• headers: è un insieme di coppie nome-valore contenente gli header HTTP da inviare, si consideri però che di default l'header Content-Type è già impostato su "www-form-urlencoded" con codifica UTF-8;
• onProgress: specifica la funzione che deve gestire l'evento di avanzamento della richiesta, in questo caso ce ne serviamo per mostrare una percentuale ad ogni chiamata; il primo parametro (info) ha due attributi, loaded, che indica la quantità di byte caricati, e total, che indica la quantità totale di byte; xhr è invece l'oggetto XMLHttpRequest;
• onSuccess: specifica la funzione che deve gestire l'evento di corretto completamento della richiesta (responso HTTP 200); i parametri responseText e responseXML contengono rispettivamente il responso in formato stringa o, in caso di dati XML, come oggetto DOM XML;
• onFailure: specifica la funzione che deve gestire una richiesta non andata a buon termine; tramite l'oggetto XMLHttpRequest è possibile conoscere il codice d'errore e il testo associato al responso;

Un'altra interessante funzionalità di MooTools è la capacità di inviare FORM classici HTML tramite AJAX. Dato il seguente FORM HTML:

<form action="destinazione.htm" id="ajaxForm">	
    <input type="text" name="campo1" value="valore1">
    <input type="hidden" name="campo2" value="valore2">
    <select name="campo3">
        <option value="valore3a" selected>Valore 3A</option>
        <option value="valore3b">Valore 3B</option>
    </select>
    <input type="submit" value="Invia">
</form>

Con il seguente codice è possibile intercettare l'evento di invio del form, fermarlo e quindi inoltrarlo via AJAX:

window.addEvent("domready", function() {
    $('ajaxForm').addEvent('submit', function(event) {
        event.stop();

        this.set("send", {
            onSuccess: function(responseText, responseXML) {
                alert(responseText);
            }
        });

        this.send();

    });
});

Come detto, event.stop() permette di interrompere l'elaborazione dell'evento, poi con impostando sul FORM la proprietà "send", possiamo specificare tutte le opzioni viste precedentemente e infine con this.send() il form viene inviato. Semplice ed efficace.