Scrivo questa breve guida per poter permettere a tutti gli sviluppatori di iniziare ad utilizzare AJAX partendo da zero.

Iniziamo!

Che cos’è AJAX?

Dalle definizioni che si trovano in giro, AJAX sembra una cosa complicatissima, in realtà non lo è.

L’acronimo AJAX sta per Asynchronous Javascript And XML,cioè richieste asincrone attraverso javascript e xml.

Comunque si può utilizzare ajax anche senza conoscere XML e senza utilizzarlo.

AJAX sfrutta la capacità di Javascript di caricare parte di una pagina web senza dover ricaricare l’intera pagina e la capacità di Javascritp di fare richieste HTTP.

Vediamo come Javascript riesce ad aggiornare elementi della pagina.

<script>
function script() {
var c = document.getElementById(“div1″);
c.innerHTML = “Testo2″;
}
</script>
<div id=”div1″>
Testo1
</div>
<input type=”button” value=”Cliccami” onClick=”script()” />

Abbiamo visto come con la funzione innerHTML possiamo generare del codice html partendo da zero.

Ora dobbiamo vedere le richieste HTTP.

Le richieste HTTP sono veri e propri accessi a pagine dinamiche in asp o php( oa ltri linguaggi naturalmente), attraverso l’oggetto XMLHttpRequest().

Potremmo anche eseguire query su database.

Vediamo come :

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

La funzione CreateXmlHttpReq vuole come parametro una funzione, che si chiama handler.

Questo perchè Javascript utilizza come input/output gli eventi(onClick(),onChange(),ecc.).

Quando si verifica un evento Javascript entra in azione, chiamando la funzione handler, cioè la funzione che gestisce l’evento.

Le richieste HTTP richiedono tempo, quindi si può decidere di lanciare la funzione CreateXmlHttpReq in background.

Quindi creiamo anche la funzione myHandler() che gestirà gli stati della richiesta effettuata.

Facciamo un esempio completo,capirete meglio:

La parte Javascript

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

function esempio1(){
var myRequest = CreateXmlHttpReq(myHandler);
myRequest.open(“GET”,”file1.php”,false);
myRequest.send(null);
}

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

Ora la parte HTML

<input type=”button” value=”cliccami” onClick=”esempio1()”>

E per ultimo il file in php

<? echo “Ciao”; ?>

Analizziamo ora il codice.

Alla pressione del bottone(input) viene generato l’evento onClick() che chiama la funzione esempio1.

La funzione esempio1 genera una richiesta con CreateXmlHttpReq a cui passa come parametro la funzione per gestire la richiesta, chiamata myHandler.

Poi attraverso il comando myRequest.open(“GET”,”file1.php”) apre il file in php, a cui può passare delle variabili con il get, anche se in realtà non ne passa.

La variabile booleana true o false serve per fare o meno richieste asincrone al server, cioè in un secondo momento, io lo messa a false perchè voglio il risultato immediatamente, ma ricordatevi che nel caso di molte chiamate al server sarà indispensabile utilizzare chiamate asincrone,magari regolate anche nel tempo.

Poi viene eseguito il comando myRequest. send(null), perchè è un comando utilizzato solo nel caso di passare variabili con il metodo POST,vedremo successivamente come.

La richiesta effettuata con l’oggetto XMLHttpRequest() genera degli stati,che sono:

0 : initializzata la richiesta

1: caricamento della richiesta

2: richiesta caricata

3: richiesta interattiva

4: richiesta completata

Questi stati vengono controllati attraverso la funzione myHandler.

Se la richiesta è completata, quindi myRequest.readystate==4 e la richiesta non genera errori, quindi myRequest.state==200 (200 è il numero generato in caso non ci siano errori,404 pagina non trovata, e così via…), stampiamo un messaggio,con la funzione myRequest.responseText, che non è altro se non il risultato della richiesta.

Il risultato naturalmente protremo visualizzarlo attraverso la prima funzione di questa guida, cioè con il metodo innerHTML.

Abbiamo visto come è semplice fare una richiesta con il GET, basterà passare alla pagina la variabile che ci interessa così:

myRequest.open(“GET”,”file1.php?var=”+var1,false);

Purtroppo esiste anche Internet Explorer, che naturalmente ha problemi con AJAX, in quanto fa il caching delle richieste, cioè mantiene in memoria tutte le richieste già effettuate.

Ma si può ovviare al problema, così:

var myRequest = null;

function CreateXmlHttpReq(handler) {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
try {
xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch(e) {
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
}
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}

Questo per quanto riguarda la generazione della richiesta, e ora risolviamo il problema della memorizzazione delle richieste attraverso una bellissima funzione, il random !

Come? Così:

function esempio2() {
var1= 10;
var casuale = Math.random();
myRequest = CreateXmlHttpReq(myHandler);
myRequest.open(“GET”,”file2.php?var1=”+var1+”&random=”+casuale,false);
myRequest.send(null);
}

Siamo quasi alla fine, ultime battute sul metodo POST.

Dovremmo sapere tutti che il GET rende le variabili visibili al client, cosa molto scomoda per quanto riguarda la sicurezza,ecco perchè entra in gioco il metodo POST.

Non dovremo far altro che inviare prima del metodo open gli header appositi attraverso la funzione setRequestHeader, così :

myRequest.open(“POST”, “file3.php”,false);
myRequest.setRequestHeader(“content-type”, “application/x-www-form-urlencoded”);
myRequest.send(“var1=10″);

Bene, adesso sapete come poter fare richieste a pagine lato server utilizzando Javascript.

Successivamente pubblicherò alcuni post per vedere più in dettaglio le varie particolarità di AJAX.

Alla prossima !