MICHELEPISANI.IT

Ajax e l'oggetto XMLHttpRequest

Un esempio di una chiamata asincroma per lo scambio dati tra client e server

L'oggetto XMLHttpRequest come cuore della tecnologia Ajax

Settembre 21
07:592014

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.

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Grazie Paolo,
spero possa tornarti utile per i tuoi scopi.

Paolo

salve,mi interessa il progetto sensore gas ,per applicazioni in agricoltura.Vedremo gli …

Michele Pisani

Ciao Rossana,
strano problema, una domanda: continui a visualizzare entrambe le pagine o una …

Rossana

Ciao Michele, il mio problema è che Facebook non mi risponde. Mi è successo tre volte: faccio …