Ajax è costituito da tecnologie Web già esistenti e può essere utilizzato con il linguaggio preferito. Grazie a un browser moderno, Ajax fornisce applicazioni Web di tipo desktop estremamente interattive. In questo primo articolo della serie, vediamo come si caratterizza e quali sono i concetti di base.

Introduzione

Con questo articolo inizia una serie di articoli che hanno la finalità di spiegare come si realizza una interazione client server tramite Ajax, dapprima in maniera generale per poi passare ad analizzare questa interazione attraverso le principali librerie che la gestiscono. Da quando è apparso sulla scena del mondo Web, Ajax ha raccolto, col passare degli anni, numerosi consensi, grazie anche all’uso massiccio che ne fa Google (il successo di Google negli ultimi anni è dovuto anche alle innovazioni che ha apportato nel mondo delle applicazioni Web), e questo ha fatto sì che si sviluppassero intorno ad Ajax una serie numerosa di librerie JavaScript e di tool applicativi che cercano di semplificarne l’utilizzo.

Cos’è Ajax

Ajax (Asynchronous JavaScript And XML) è un pattern per sviluppare applicazioni Web dinamiche e interattive, che sfrutta più tecnologie esistenti, ciascuna sviluppata indipendentemente l’una dall’altra, ma che tutte insieme danno vita ad un nuovo sistema molto potente.
Ajax incorpora:

• presentazioni standard-based con XHTML e CSS
• esposizione e interazione dinamica con Document Object Model
• scambio e manipolazione dei dati con XML e XSLT
• recupero dei dati in modo asincrono usando XMLHttpRequest
• JavaScript che lega insieme tutto

Questa è la definizione che Jesse James Garret, fondatore di Adaptive Path e ideatore della User Experience Strategy, fornisce all’interno dell’articolo “Ajax: A New Approach to Web Applications” [1], pubblicato sul sito di Adaptive Path il 18 febbraio 2005. Garret è colui che ha coniato il nome Ajax, battezzando e formalizzando questo approccio innovativo ed emergente per l’interattività delle applicazioni Web.
Strutturalmente si può descrivere Ajax attraverso:

1. Asincronicità: quando si inoltra una richiesta, non si attende il ritorno della risposta, ma si ha la possibilità di continuare l’interazione con il browser nell’attesa. La risposta probabilmente non ritornerà immediatamente: si imposta una funzione che aspetterà che il server risponda e che reagirà una volta che questo accade.
2. JavaScript: è usato per far la richiesta al server. Una volta che la risposta è arrivata dal server, si utilizza JavaScript per gestirla e modificare la pagina in basa a questa.
3. XML: i dati che sono restituiti dal server spesso sono impacchettati in XML, in modo da poter essere facilmente processati con JavaScript. Questi dati possono essere di qualsiasi tipo e lunghezza.

Ajax in dettaglio

Quando parliamo di Ajax, parliamo di un oggetto specifico: XMLHttpRequest [2], [3].
Tale oggetto ha nomi differenti o viene richiamato in maniera differente in base al browser in cui viene istanziato. Nel caso di Internet Explorer, ad esempio, questo oggetto è restituito da un ActiveXObject mentre nei browser alternativi più diffusi (Mozilla, Safari, FireFox, Netscape, Opera e altri) XMLHttpRequest è supportato in modo nativo, cosa che accade anche per IE dalla versione 7. Esso permette di effettuare la richiesta di una risorsa (con HTTP). Nella richiesta è possibile inviare informazioni, ove opportuno, attraverso i metodi GET o POST in maniera simile all’invio dati di un form. La richiesta può essere asincrona, il che significa che non è necessario attendere che sia stata ultimata per effettuare altre operazioni, stravolgendo sotto diversi punti di vista il flusso dati tipico di una pagina Web.

Il ciclo di un’interazione Ajax

Il tipico ciclo di interazione di Ajax è descritto in Figura 1. I punti fondamentali sono i seguenti:

1. Un utente genera un evento sul client. Questo causa una chiamata JavaScript.
2. Una funzione JavaScript crea e configura un oggetto XMLHttpRequest sul client, e specifica una funzione JavaScript di callback.
3. L’oggetto XMLHttpRequest fa una chiamata, una richiesta asincrona HTTP, al Web server.
4. Il Web server processa la richiesta e restituisce un documento XML che contiene il risultato.
5. L’oggetto XMLHttpRequest chiama la funzione di callback e mostra la risposta dal Web server così che la richiesta può essere processata.
6. Il client aggiorna il DOM HTML che rappresenta la pagina con i nuovi dati.

Figura 1 – Ciclo di una tipica interazione Ajax

Creazione dell’oggetto XMLHttpRequest

Per creare un’istanza di XMLHttpRequest che funzioni sui diversi browser è necessario scrivere il seguente codice:

// Mozilla, Safari, ...
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();}
// IE
else if (window.ActiveXObject) {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

Certe versioni di alcuni browser della famiglia Mozilla, non si comportano correttamente nel caso in cui la risposta del server non contenga un’intestazione HTTP mime type. Per ovviare a questo problema, è possibile utilizzare un metodo aggiuntivo per sovrascrivere l’header inviato dal server, nel caso non sia presente o non sia impostato a text/xml:

http_request.overrideMimeType("text/html");

A questo punto occorre impostare la proprietà onreadystatechange dell’oggetto XMLHttpRequest assegnandogli una funzione che definisca le azioni da effettuare una volta che si ha a disposizione questa istanza:

http_request.onreadystatechange = nomeFunzione;

nomeFunzione rappresenta la funzione di callback che si occuperà della gestione della risposta del server.

La richiesta

Adesso, attraverso i metodi open e send, si esegue l’invio della richiesta:

http_request.open("GET/POST/HEAD", "URL", true);
http_request.send(params);

Il primo parametro da passare a open() è il metodo che si desidera utilizzare per la richiesta HTTP: GET, POST, HEAD o qualsiasi altro metodo che si desideri utilizzare e sia supportato dal server. Il metodo deve essere scritto in lettere maiuscole, come specificato dallo standard HTTP; altrimenti alcuni browser (come Firefox) potrebbero non eseguire la richiesta.
Il secondo parametro è l’URL della pagina che si sta richiedendo. Per ragioni di sicurezza, non è possibile chiamare pagine che si trovino su un dominio differente da quello in cui si trova la pagina corrente. È necessario assicurarsi di utilizzare esattamente lo stesso dominio in tutte le pagine o si avrà un errore di “permission denied” quando si chiama il metodo open() [4].
Il terzo parametro specifica se la richiesta deve essere asincrona. Se è impostato a TRUE (e di solito è così), la funzione JavaScript resterà in esecuzione anche prima dell’arrivo della risposta.
Il parametro del metodo send() è costituito dai dati che si vogliono inviare al server se la richiesta è di tipo POST. I dati vengono passati sotto forma di querystring:

nome1=valore1&nome2=valore2&ecc=ecc

Se si desidera inviare i dati come POST, occorre modificare il tipo MIME della richiesta con la riga seguente:

http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

altrimenti il server ignorerà la richiesta.

La risposta

La funzione che deve elaborare la risposta del server deve innanzitutto controllare lo stato della richiesta che può essere:

• 0, la richiesta è stata inizializzata (prima di chiamare open());
• 1, la richiesta è in stato di caricamento, non è ancora stata inviata (prima di chiamare send());
• 2, la richiesta è stata inviata e sarà processata(solitamente a questo punto si può prendere il content headers dalla risposta);
• 3, la richiesta è processata, il server non ha ancora inviato tutta la risposta, ma ne possono essere disponibili alcune parti;
• 4, la risposta è completa, può essere presa e utilizzata.

Se la richiesta si trova nello stato 4 significa che la risposta è stata ricevuta per intero e si può continuare l’elaborazione:

if (http_request.readystate == 4){
    // tutto corretto, la risposta è stata ricevuta
}
else {
    // l'oggetto non è ancora pronto
}

Si può poi controllare il codice di stato della risposta http: 200 indica che la richiesta ha avuto successo.

if (http_request.status == 200) 
    { // tutto bene!} 
else { 
    /*c'è stato un problema nella richiesta,
      per esempio un codice di errore 404 (Not 
      Found) o 500 (Internal Server Error)*/
}

Una volta controllati lo stato della richiesta e il codice di stato HTTP della risposta si devono gestire i dati ricevuti dal server. Questi possono essere restituiti o sotto forma di stringa di testo:

http_request.responseText;

oppure sotto forma di oggetto XMLDocument che si può navigare tramite le funzioni DOM:

http_request.responseXML

Il content type della risposta

Anche se la X in Ajax indica che il contenuto della risposta è impacchettato in formato XML, questo non è il solo formato che si può utilizzare per lo scambio di dati tra client e server: infatti non c’è niente che precluda l’uso di JavaScript, testo o HTML. Dipende dal contesto in cui si opera e dagli obiettivi del programmatore.
Per esempio, se si intende realizzare un Web Service che implementi le logiche di comunicazione di Ajax, allora, senza dubbio, l’XML rappresenta il formato più indicato, anche perche’ è facilmente leggibile e comprensibile.
Ma si può utilizzare senza problemi anche del semplice testo, in questo caso il testo generato dal server sarà inserito in un documento oppure valutato dalla logica sul client.
JavaScript invece è un’estensione dell’utilizzo del testo puro con l’eccezione che un componente che risiede sul server passa un frammento di JavaScript incluso in una dichiarazione di un oggetto JavaScript. Grazie alla funzione eval() si può creare l’oggetto sul client. JavaScript Object Notation(JSON)[5], che è un formato JavaScript adatto allo scambio di dati, si basa su questa tecnica.
Per ultimo si può inserire direttamente un frammento di HTML generato dal server nel documento che costituisce la risposta.

Conclusioni

In questo articolo abbiamo visto com’è strutturata una generica interazione Ajax, come fare una richiesta e come è caratterizzata la risposta del server. Nei prossimi articoli vedremo più in dettaglio come realizzare una vera e propria comunicazione client server tramite Ajax attraverso i diversi tool e le principali librerie JavaScript che si sono evolute e diffuse proprio grazie al tipo di supporto che hanno deciso di offrire a questo nuovo pattern per lo sviluppo di applicazioni Web dinamiche e interattive.

Riferimenti

[1] Jesse James Garret, “Ajax: A New Approach to Web Applications”
http://www.adaptivepath.com/publications/essays/archives/000385.php

[2] XMLHttpRequest
http://www.w3.org/TR/XMLHttpRequest

[3] XMLHttpRequest
http://www.alexhopmann.com/xmlhttp.htm

[4] Introduzione ad AJAX
http://developer.mozilla.org/it/docs/AJAX:Iniziare

[5] JSON
http://www.json.org/