Le basi di AJAX
[Traduzione di Getting started with AJAX di Mike Hall a cura di Marco Catani ]
Questo articolo è un'introduzione ad AJAX e, in particolare, racconta come usare l'oggetto XMLHttpRequest in JavaScript per aggiornare dinamicamente le pagine con i dati ricevuti da un web server.
Che cosa è AJAX?
AJAX sta per Asynchronous JavaScript And XML. Fa parte della tipologia di codice DHTML che serve per l'aggiornamento automatico delle pagine, ma con una marcia in più: si può comunicare infatti con il web server, mandando e caricando dati senza la necessità di ricaricare la pagina in cui il codice risiede.
Per far questo si usa l'oggetto XMLHttpRequest. Questo oggetto è supportato dalla maggior parte dei browser, in un modo o nell'altro. Come dice il nome, l'oggetto permette di effettuare richieste HTTP. La parte XML del nome si riferisce al fatto che l'oggetto può nativamente elaborare un documento XML, che viene spedito in risposta a una richiesta.
L'idea di per se non è nuova, anche iFrame nascosti sono stati usati per ottenere lo stesso risultato, ma l'oggetto XMLHttpRequest è molto più felssibile e semplifica il processo.
HTTP
Come già accennato l'oggetto XMLHttpRequest permette di effettuare richieste HTTP, quindi una breve panoramica sull'HTTP è d'obbligo.
Quando si carica una pagina nel browser - diciamo "http://www.example.net/about/index.html"- il browser prima apre una connessione con l'host www.example.net, poi spedisce al server una richiesta HTTP che consiste di diverse linee di testo; una tipica richiesta assomiglia a qualcosa del genere:
GET /about/index.html HTTP/1.1
Host: www.example.net
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12)...
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,...
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Proxy-Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
La prima riga contiene il verbo o il metodo HTTP. In questo caso il metodo è GET che significa "ritorna il documento specificato di seguito", ossia (/about/index.html). La stringa HTTP/1.1 dice al server che versione di HTTP il browser supporta.
Le righe seguenti sono chiamate request headers. Specificano informazioni aggiuntive che potrebbero essere di aiuto al server per fornire una risposta appropriata al browser.
Il web server ritornerà una risposta, che come la richiesta, cosiste di alcune riche ti testo; ecco una risposta esemplificativa:
HTTP/1.x 200 OK
Server: Microsoft-IIS/5.1
Date: Fri, 20 Jan 2006 19:29:47 GMT
Content-Length: 534
Content-Type: text/html
Cache-Control: private
<html>
<head>
<title>About Us</title>
</head>
<body>
<h1>About us</h1>
<p>...</p>
</body>
</html>
La prima riga contiene la versione HTTP e un numero di 3 cifre che reppresenta lo status code. Il testo che segue il numero è una breve descrizione del codice, per esempio 200 significa "OK", la richiesta è stata soddisfatta con esito positivo, 404 invece sta per documento non trovato: 404 Not Found.
Le righe successive sono request headers. Così come i response headers, anche questi danno informazioni aggiuntive come il document type ("text/html") e la dimensione (534 byte).
Una riga bianca segnala il termine del response header. Il resto delle righe rappresentano il response data. In questo caso la pagina HTML di cui il browser farà parsing e rendering.
Come passare i dati in una richiesta HTTP
Ci sono tipicamente due modi per passare dati usando una richiesta HTTP. Uno è appendere una query string all'URL, per esempio:
http://www.example.net/signup.asp?name=Jane+Doe&email=jane%40myhost.com
Da notare qui il formato del dato presente nella query string. Ogni campo è rappresentato da una coppia nome=valore e i campi sono separati dal carattere '&'. Questo consente al web server di elaborare i singoli campi.
Inoltre ogni nome e valore è url-encoded (gli spazi sono rimpiazzati dal segno '+' , i caratteri non alfanumerici sono rimpiazzati dal loro valore esadecimale nel formato "%xx". Questa codifica è necessaria a causa delle limitazioni imposte sui caratteri che si possono usare in un URL.
Il secondo modo per passare dati in una richiesta HTTP è usando il metodo "POST"; questo metodo è usato di frequente nelle FORM. Un esempio di una richiesta in POST generata al submit di una form è mostrata di seguito:
POST /signup.asp HTTP/1.1
Host: www.example.net
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12)...
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,...
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded
Content-Length: 38
name=Jane+Doe&email=jane%40myhost.com
Notare qui la riga vuota che segue i request header. Questa indica la fine della sezione header e l'inizio della parte relativa ai dati.
I dati sono nello stesso formato dell'esempio della query string in GET visto precedentemente. Nella sezione header i campi "Content-Type" e "Content-Length" dicono al web server il formato con cui i dati sono spediti e la quantità, in byte, di dati spediti.
L'oggetto XMLHttpRequest
Con l'oggetto XMLHttpRequest, si possono fare richieste HTTP come quelle appena viste usando codice Javascript, e accedendo ai dati ritornati dal web server allo stesso modo.
Vedremo un esempio di come a breve, ma prima ecco una lista delle proprietà delgi oggetti, metodi ed eventi che saranno usati:
| l'oggetto XMLHttpRequest | |
|---|---|
| Proprietà | |
| readyState | Un numero rappresenta lo stato della richiesta:
|
| status | Il codice numerico - status code - tornato dal server |
| statusText | Il testo associato al codice numerico. Per esempio 200 significa "OK" and 404 invece "Not found". |
| responseText | Una stringa contenent i dati (la risposta) ritornati dal web server. |
| responseXML | Se il web server ritorna un documento XML questo sarà un DOM document object che rappresenta l'XML parsato. |
| Metodi | |
| open(method, url, asynch, username, password) | Inizializza una nuova richiesta. method è il verbo usato nella richiesta HTTP, tipicamente "GET" o "POST". Le ultime tre opzioni sono: asynch di default a true, username e password vanno specificate se il server richiede un'autenticazione. |
| setRequestHeader(name, value) | Setta il valore della variabile name nel request header. |
| send(data) | Effettua la richiesta, eventalmente passando i dati (data) |
| abort() | Termina una richiesta attiva |
| getResponseHeader(name) | Ritorna il valore della variabile name, relativa al response header. |
| getAllResponseHeaders() | Retorna una stringa contenente tutti il response header. |
| Eventi | |
| onreadystatechange | Viene scatenato ogni volta che la proprietà readystate cambia. |
Prima di usare l'oggetto XMLHttpRequest, bisogna crearne un'istanza. Non c'è tuttora uno standard definito ma molti browser moderni supportano l'oggetto XMLHttpRequest in modo nativo. IE, ovviamente, fa eccezione. Per simpatia Microsoft ha introdotto il concetto, ma l'ha implementato come un componente ActiveX.
Il codice seguente crea un oggetto XMLHttpRequest e definisce alcune costanti che aiuteranno ad utilizzare l'oggetto. Questo codice funziona indipendentemente dal browser usato.
//
// Define a list of Microsoft XML HTTP ProgIDs.
//
var XMLHTTPREQUEST_MS_PROGIDS = new Array(
"Msxml2.XMLHTTP.7.0",
"Msxml2.XMLHTTP.6.0",
"Msxml2.XMLHTTP.5.0",
"Msxml2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP"
);
//
// Define ready state constants.
//
var XMLHTTPREQUEST_READY_STATE_UNINITIALIZED = 0;
var XMLHTTPREQUEST_READY_STATE_LOADING = 1;
var XMLHTTPREQUEST_READY_STATE_LOADED = 2;
var XMLHTTPREQUEST_READY_STATE_INTERACTIVE = 3;
var XMLHTTPREQUEST_READY_STATE_COMPLETED = 4;
//
// Returns l'oggetto XMLHttpRequest.
//
function getXMLHttpRequest()
{
var httpRequest = null;
// Create the appropriate HttpRequest object for the browser.
if (window.XMLHttpRequest != null)
httpRequest = new window.XMLHttpRequest();
else if (window.ActiveXObject != null)
{
// Must be IE, find the right ActiveXObject.
var success = false;
for (var i = 0;
i < XMLHTTPREQUEST_MS_PROGIDS.length && !success;
i++)
{
try
{
httpRequest = new ActiveXObject(XMLHTTPREQUEST_MS_PROGIDS[i]);
success = true;
}
catch (ex)
{}
}
}
// Display an error if we couldn't create one.
if (httpRequest == null)
alert("Error in HttpRequest():\n\n"
+ "Cannot create an l'oggetto XMLHttpRequest.");
// Return it.
return httpRequest;
}
Possiamo quindi definire l'oggetto XMLHttpRequest:
var myXmlHttpRequest = getXMLHttpRequest();
Ora vediamo come usarlo.