Cominciare con Ajax

Questo articolo è un’introduzione ai fondamenti di AJAX e offre due semplici esempi per cominciare a capire cosa è AJAX.

AJAX (Asynchronous JavaScript and XML) è un termine coniato di recente per due caratteristiche di browser potenti che sono stati in circolazione per anni, ma non furono considerati da molti sviluppatori web fino ai tempi attuali quando applicativi come Gmail, Google Suggest e Google Maps hanno aperto la via.
Le due caratteristiche in questione permettono di:

  • fare richieste al server senza ricaricare la pagina;
  • analizzare e lavorare con documenti XML.

Fase 1 – Come fare una richiesta HTTP 
Per fare una richiesta HTTP al server usando JavaScript, avete bisogno di una istanza di classe che vi fornisca questa funzionalità. Tale classe fu originariamente introdotta in Internet Explorer come un oggetto ActiveX, chiamato XMLHTTP. Poi browser come Mozilla, Safari ed altri sono seguiti, implementando una classe XMLHttpRequest che supporta i metodi e le proprietà dell’oggetto originario di Microsoft ActiveX.
Conseguentemente, per creare un’istanza cross-browser (oggetto) della classe richiesta potete fare in questo modo:

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

(Per scopi illustrativi, il codice sovrastante è una versione un po’modificata del codice da usare per creare un’istanza XMLHTTP. Per un esempio più “real-life” vi rimandiamo alla fase 3 di questo articolo).

Certe versioni di alcuni browser di Mozilla non funzioneranno propriamente se la risposta dal server non ha un header mime-type in XML. Per colmare questa lacuna, potete usare una chiamata extra di metodo per fare l’override dell’header inviato dal server nel caso non fosse text/xml.

http_request = new XMLHttpRequest();
http_request.overrideMimeType(‘text/xml’);

Il passo successivo è decidere cosa desiderate fare dopo aver ricevuto la risposta del server alla vostra richiesta. A questo punto avete solo bisogno di dire all’oggetto di richiesta HTTP quale funzione JavaScript farà il lavoro di trattare la risposta. Ciò è fatto fissando la proprietà onreadystatechange dell’oggetto al nome della funzione JavaScript che progettate di usare, come questa:

onreadystatechange http_request.onreadystatechange = nameOfTheFunction;

Si noti che non vi sono parentesi dopo il nome della funzione nè parametri passati. Invece di dare un nome di funzione, potete usare la tecnica JavaScript di definizione le funzioni e precisare le azioni che tratteranno la risposta:

http_request.onreadystatechange = function(){
// do the thing
};

In seguito, dopo che avete esposto ciò che succederà non appena ricevete la risposta, dovete formulare la richiesta. Avete bisogno di chiamare i metodi open() e send() della classe di richiesta HTTP, come:

http_request.open(‘GET’, ‘http://www.example.org/some.file’, true);
http_request.send(null);

  • il primo parametro di chiamata a open() è il metodo di richiesta HTTP – GET, POST, HEAD o qualsiasi altro metodo che vogliate usare e che è supportato dal vostro server. Mantenete il metodo in maiuscolo come per lo standard HTTP, altrimenti alcuni browser (come Firefox) potrebbero non elaborare la richiesta. Per maggiori informazioni sui possibili metodi di richiesta HTTP potete controllare il WC3specs.
  • il secondo parametro è l’URL della pagina che state richiedendo. Per sicurezza, non potete chiamare le pagine su domini di terzi. Assicuratevi di usare il nome esatto del dominio su tutte le vostre pagine od otterete un errore di ‘permesso negato’ quando chiamate open(). Un tranello comune è accedere al vostro sito da domain.tld, ma tentando di chiamare le pagine con http://www.domain.tld.
  • Il terzo parametro stabilisce se la richiesta è asincrona. Se true, l’esecuzione della funzione JavaScript continuerà mentre la risposta del server non è ancora arrivata. Questo è il fondamento di Ajax.

Il parametro del metodo send() può essere costituito dai dati che volete inviare al server se la richiesta è POST-ing. I dati dovrebbero essere nella forma della stringa di query, come:

name=value&anothername=othervalue&so=on

Si noti che se volete postare i vostri dati, dovete cambiare il MIME type della richiesta usando la seguente linea:

http_request.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
Altrimenti, il server cestinerà i dati postati.


Fase 2 – Gestire la risposta del server

Ricordate che mentre inviavate la richiesta, avete fornito il nome di una funzione JavaScript predisposta a gestire la risposta.http_request.onreadystatechange = nameOfTheFunction;

Vediamo cosa dovrebbe fare questa funzione. Innanzitutto, la funzione ha bisogno di controllare lo stato della richiesta. Se lo stato ha valore 4, significa che la risposta completa del server è ricevuta e potete continuare ad elaborarla.

if (http_request.readyState == 4) {
// everything is good, the response is received
} else {
// still not ready
}

La lista completa dei valori readyState comprende:

  • 0 (non inizializzato)
  • 1 (caricamento)
  • 2 (caricamento completato)
  • 3 (interattivo)
  • 4 (completo)

(Source)

La cosa successiva da controllare è il codice dello status della risposta del server HTTP. Tutti i codici possibili sono elencati nel W3C site.

Per i nostri scopi siamo interessati solo a risposte 200 ok.

if (http_request.status == 200) {
// perfect!
} else {
// there was a problem with the request,
// for example the response may be a 404 (Not Found)
// or 500 (Internal Server Error) response codes
}

Dopo aver controllato lo stato della richiesta ed il codice di stato HTTP della risposta, dipende da voi cosa fare con i dati che il server vi ha inviato. Avete due opzioni per accedere ai dati:

  • http_request.responseText – restituirà la risposta del server come una stringa di testo
  • http_request.responseXML – restituirà la risposta di un oggetto XMLDocument che potete attraversare utilizzando le funzioni del DOM JavaScript


Fase 3 – Un semplice esempio

Mettiamo tutto insieme e facciamo una semplice richiesta HTTP. Il nostro JavaScript richiederà un documento HTML, test.html, che contiene il testo “Sono un test” e poi utilizzerà alert() per i contenuti del file test.html.<script type=”text/javascript” language=”javascript”>

var http_request = false;

function makeRequest(url) {

http_request = false;

if (window.XMLHttpRequest) { // Mozilla, Safari,…
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType(‘text/xml’);
// See note below about this line
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try {
http_request = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {}
}
}

if (!http_request) {
alert(‘Giving up😦 Cannot create an XMLHTTP instance’);
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open(‘GET’, url, true);
http_request.send(null);

}

function alertContents() {

if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert(‘There was a problem with the request.’);
}
}

}
</script>
<span
style=”cursor: pointer; text-decoration: underline”
onclick=”makeRequest(‘test.html’)”>
Make a request
</span>

In questo esempio:

  • l’utente clicca il link “Make a request” (“Formulate una richiesta”) nel browser;
  • questo chiama la funzione makeRequest() con un parametro – il nome test.hmtl di un file HTML nella stessa directory;
  • la richiesta è fatta e poi (onreadystatechange) l’esecuzione è passata a alertContents();
  • alertContents() controlla se la risposta è stata ricevuta ed è tutto in regola, poi allerta i contenuti del file test.html

Potete testare l’esempio qui e vedere il file di verifica qui.

Nota: la linea sovrastante http_request.overrideMimeType(‘text/xml’); causerà errori di JavaScript Console in Firefox 1.5b come documentato in https://bugzilla.mozilla.org/show bug.cgi?id=311724 se la pagina chiamata da XMLHttpRequest non è XML valido (per esempio se è testo semplice).

Se ottenete Syntax Error oppure Not Well Formed Error su quel browser e non state provando a caricare una pagina XML da una XMLHttpRequest, rimuovete la linea da quel codice.

Nota 2: se state inviando una richiesta a un pezzo di codice che restituirà XML, piuttosto che a un file XML statico, dovete impostare alcuni header di risposta se la vostra pagina deve funzionare su Internet Explorer oltre che a Mozilla. Se non impostate l’header Content-Type: application/xml, IE darà un errore JavaScript ‘Object Expected’ dopo la linea in cui provate ad accedere ad un elemento XML. Se non fissate l’header Cache-Control: no-cache il browser metterà in cache la risposta e non sottoporrà nuovamente la richiesta, rendendo il debug ‘stimolante’.

Fase 4 – “Il file X”: lavorare con la risposta XML
Nell’esempio precedente, dopo che la risposta alla richiesta HTTP è stata ricevuta, abbiamo usato la proprietà responseText dell’oggetto di richiesta che racchiudeva i contenuti del file test.html. Ora proviamo la proprietà responseXML.

Prima di tutto, creiamo un documento XML valido che richiederemo più avanti. Il documento (test.xml) contiene:

<?xml version=”1.0″ ?>
<root>
I’m a test.
</root>

Nello script abbiamo solo bisogno di cambiare la linea di richiesta con:

...
onclick=”makeRequest(‘test.xml’)”>

Poi in alertContents() necessitiamo di restituire la linea alert()-ing alert(http_request.responseText); con:

var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName(‘root’).item(0);
alert(root_node.firstChild.data);

3 Risposte

  1. Complimenti! Ottimo articolo!!

  2. Ti ringrazio. Mi fa piacere che sia stato gradito… Lo trovo molto utile anche per una ripassatina personale di tanto in tanto.

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: