Ajax per aggiornare dinamicamente pagine HTML

Logo AjaxAjax è una tecnica di programmazione che si pone l’obiettivo di rendere le pagine web il più simili alle applicazioni desktop in cui i tempi di risposta sono inferiori alle applicazioni web e non esistono tasti per aggiornare i dati visualizzati. Con Ajax è possibile aggiornare porzioni di una pagina web senza dover ricaricare l’intera pagina.

Lo sviluppo di applicazioni HTML con Ajax si basa su uno scambio di dati in background fra web browser e server, che consente l’aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell’utente. Acronimo di Asynchronous Javascript And XML, il formato con cui avviene il trasferimento dei dati, può essere utilizzato del testo semplice o altri formati come JSON, ecc.

Ajax consente di effettuare chiamate asincrone in JavaScript introducendo la possibilità di aggiornare dei dati all’interno di una pagina web statica senza doverla aggiornare. Le chiamate sono asincrone ed avvengono in background in modo da aggiornare i dati solo quando disponibili senza bloccare l’utilizzo dell’applicazione. Non dovendo ritrasmettere ad ogni richiesta l’intera pagina, vengono trasmessi meno dati attraverso la rete e i tempi di risposta non dipendono più principalmente dalla velocità del sistema ma dalla velocità della rete.

Ajax e l’oggetto XMLHttpRequest per effettuare le richieste HTTP

Una richiesta HTTP avviene in Javascript tramite l’oggetto XMLHttpRequest che richiama lato server un servizio che in grado di processare la richiesta. Ajax sfrutta lato client la velocità di JavaScript insieme alla sua gestione degli errori e della manipolazione del DOM una volta ricevuta la risposta. Per creare un oggetto di tipo XMLHttpRequest occorre:

  1. Impostare la variabile;
  2. Creare l’oggetto e impostarlo;
  3. Definire una funziona che verrà chiamata quando la richiesta è stata eseguita che verrà definita nel campo onreadystatechange.

L’oggetto XMLHttpRequest consente di eseguire una richiesta HTTP. Ecco alcune delle sue proprietà:

  • onreadystatechange: contiene la funzione che si occuperà di processare la risposta del server;
  • readyState: contiene lo stato della richiesta. Ogni volta che readyState cambia, viene eseguita la funzione associata a onreadystatechange;
  • responseText: contiene i dati trasmessi dal server sono sotto forma di stringa;
  • responseXML: contiene la risposta del server in formato XML;
  • status: restituisce lo stato della risposta HTTP sotto forma di numero. Ad esempio: 200 (OK), 404 (Not Found), ecc.
  • statusText: restituisce lo stato della risposta HTTP sotto forma di stringa. Ad esempio: “Not Found”, “OK”, ecc.

Ecco alcuni metodi di XMLHttpRequest:

  • open(method, URL, async, uname, pswd) ha cinque argomenti, ma in genere si usano solo i primi tre:
    • Il primo parametro definisce quale metodo utilizzare per effettuare la richiesta GET/POST;
    • Il secondo parametro indica l’url dello script da invocare;
    • Il terzo parametro, booleano, specifica se la richiesta deve essere sincrona (false) oppure sincrona (true, valore di default);
  • send(content) effettua la richiesta, eventualmente passando i dati. Se la richiesta è di tipo GET si scrive xmlHttp.send(null) oppure xmlHttp.send(“”) con il metodo POST si indicano i parametri sotto forma di URL: xmlHttp.send(“myPage.php?variabile1=valore1&variabile2=valore2”);
  • abort() per annullare una richiesta in pending;
  • getAllResponseHeaders() serve per recuperare tutti gli header HTTP;
  • getResponseHeader(headername) restituisce il valore de singolo header indicato;
  • setRequestHeader(label, value) viene utilizzato per aggiungere degli header HTTP alla richiesta da effettuare.

Codice d’esempio:

function CreateXmlHttpReq(handler) {
    var xmlhttp = null;
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = handler;
    return xmlhttp;
}

XMLHttpRequest non è supportato nelle vecchie versioni di Internet Explorer per cui bisogna utilizzare Microsoft.XMLHTTP.

var xmlhttp;
if (window.XMLHttpRequest) {
    // per IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {
    // per IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

La richiesta avviene in background e quando si riceve una risposta sarà gestita dalla funzione definita in onreadystatechange.

Un possibile utilizzo di Ajax è il seguente:

var myRequest = CreateXmlHttpReq(myHandler);
myRequest.open("GET","myPage.php");
myRequest.send(null);

In questo esempio è stata effettuata una chiamata HTTP di tipo GET verso la pagina myPage.php a cui è stata indicata la funzione che si occuperà di gestire la chiamata. La chiamata effettuata al metodo open è equivalente alla chiamata con il terzo parametro true:

httpRequest.open('GET', 'http://www.example.org/some.file', true);

Passando false come terzo parametro la chiamata avverrà in maniera sincrona, ciò significa che non abbiamo bisogno di specificare una funzione di callback in quanto l’esecuzione dell’applicazione si bloccherà quando chiameremo il metodo send e si sbloccherà dopo aver ricevuto una risposta.

Attenzione, in alcune versioni di Internet Explorer se viene effettuata più volte una richiesta ad uno stesso url, IE non aggiorna i dati della richiesta HTTP ma recupera i dati salvati in chace. Una possibile soluzione a questa anomalia è quella di inserire un parametro casuale all’interno dell’url, ad esempio in questo modo:

myRequest.open("GET","myPage.php&rand="+escape(Math.random()));

Per effettuare una chiamata di tipo POST si deve specificare il Content-Type:

var params = "a=v1&b=v2";
// Vari setRequestHeader()
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send(params);

La funzione che si occupa di gestire la risposta HTTP verrà gestita in questo modo:

function myHandler() {
    if (myRequest.readyState == 4 && myRequest.status == 200) {
        alert(myRequest.responseText);
    }
}

La funzione handler viene invoca più volte durante ogni singola richiesta HTTP. È possibile capire il motivo per cui l’handler è stato chiamato tramite il valore della proprietà readyState:

  • 0: uninitialized
  • 1: loading
  • 2: loaded
  • 3: interactive
  • 4: complete

Non tutti i browser supportano tutti i valori di readyState, l’unico valore che ogni browser supporta è il valore 4 che ci indica, insieme allo status 200 (richiesta effettuata con successo), che la risposta può essere processata (nell’esempio mostra un alert con la risposta).

Per motivi di sicurezza, non è possibile effettuare chiamate Ajax a risorse non locali, ad esempio verso indirizzi url. Un dicitura del genere comporterà un errore di cross site scripting (XSS):

myRequest.open("GET","http://www.datrevo.com/");


L’accesso a risorse esterne è vietato in quanto questo tipo di applicazioni sono facilmente modificabili da malintenzionati per manipolare o raccogliere informazioni riservate.

Ajax può sembrare ostico per chi ci avvicina a questa tecnica per la prima volta, queste barriere sono superare utilizzando Ajax tramite jQuery. Tale utilizzo risulta più veloce e semplice, consente inoltre l’utilizzo di questa tecnica anche a chi non conosce minimamente i meccanismi che ne regolano il funzionamento.

Pubblicato in Ajax, Front-end, Guide, Programmazione Taggato con: , , , , , , ,

Lascia un commento

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

*