L'oggetto XMLHttpRequest come cuore della tecnologia Ajax

L'oggetto XMLHttpRequest, un oggetto Javascript che rappresenta il cuore della tecnologia Ajax e che definisce un'API che assegna al client la funzionalità di trasferimento dati tra client e server, ha come caratteristica principale la capacità di effettuare richieste asincrone ad un server HTTP permettendo appunto all'utente di svolgere più azioni contemporaneamente senza dover attendere il caricamente della pagina web come avviene invece per una classica richiesta HTTP.

Una richiesta sincrona comporta un'attesa derivante da un periodo di interruzione del browser, fino al completamento della richiesta HTTP effettuata, prima di poter effettuare un'operazione successiva. Una richiesta asincrona invece permette di effettuare altre operazioni anche prima che la risposta da parte del server sia stata ultimata, senza contare che le richieste al server possono essere più di una ed essere indipendenti l'una dall'altra.

Per iniziare è necessario, molto schematicamente, istanziare l'oggetto, effettuare la richiesta ed assegnare una funzione al termine della stessa in base al suo successo o fallimento.

Di seguito un esempio di chiamata Ajax:

var xmlHttp;
function createHMLHttpRequest() {
    if (window.ActiveXOblect) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}

function MiaFunzione(parametri) {
    //recupero parametri
    //ed eventuale elaborazione di altri dati
    createHMLHttpRequest();
    var MiaPagina = "/pagina_chiamata.asp?param=" + parametri + "&timeStamp=" + new Date().getTime();
    xmlHttp.open("GET", MiaPagina, true);
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.send(null);
}

function handleStateChange() {
    var responseDIV = document.getElementById("id_contenitore");
    responseDIV = '<img src="images/loader.gif" alt="" />';
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            ShowResult();
        }
        else {
            ShowNoResult();
        }
    }
}

function ShowResult() {
    var responseText = xmlHttp.responseText;
    var responseDIV = document.getElementById("id_contenitore");
    if (responseDIV.hasChildNodes()) {
       responseDIV.removeChild(responseDIV.childNodes[0]);
    }
    responseDIV.innerHTML = responseText;
}


function ShowNoResult() {
    var error = 'Messaggio dal server:<br />"Attenzione! Errore nella richiesta, avvisa gentilmente il reparto informatico."';
    var responseDIV = document.getElementById("id_contenitore");
    responseDIV.innerHTML = error;
}

Analizziamo negli articoli successivi, il flusso, e pertanto i metodi con cui viene effettuata la chiamata Ajax ed i parametri con cui viene costruita la risposta, andando ad analizzare il codice appena inserito come esempio.