Introduzione ad AJAX

Mi sto dedicando un pò più approfindatemente ad AJAX in quanto mi servirà per un lavoro che sto facendo per un'azienda.

Qui vediamo un semplce script facilmente realizzabile e soprattutto multi-borwser.

Prima di tutto create un file js; io l'ho chiamato ajax.js (che fantasia eh?).

Includetelo nell'head della pagina a cominciamo a scrivere.

Il file si comporrà di varie funzioni.

var xmlHttpObj = createXmlHtttpRequest();

function createXmlHtttpRequest() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
var XmlHttpVersions = new Array(
"MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
for(var i = 0; i < XmlHttpVersions.length && !xmlHttp; i++) {
try {
xmlHttp = new ActivexObject(XmlHttpVersions[i]);
} catch(e) {}
}
}
if(!xmlHttp) {
alert("Errore durante la creazione dell'oggetto XMLHttpRequest");
} else {
return xmlHttp;
}
}

Prima di tutto memoriziamo in una variabile, visibile a tutto il file, un oggetto di tipo XMLHttpRequest o ActivexObject.

Nella funzione sottostante creiamo appunto l'oggetto a seconda che sia un browser Internet Explorer (ActivexObject) o no (XMLHttpRequest).

Nel caso di IE controlliamo anche la versione; infatti esistono vari tipi di ActivexObject.

Dopo aggiunete la funzione process:

function process(str) {
if(xmlHttpObj) {
try {
xmlHttpObj.open("GET","home-cat.php?sid=" + str, true);
xmlHttpObj.onreadystatechange = createList;
xmlHttpObj.send(null);
} catch(e) {
alert("Impossibile connettersi al server: " + e.toString());
}
}
}

Questa è la funzione che verrà richiamata nella parte HTML.

Se esiste l'oggetto xmlHttpObj richiamiamo in GET il file home-cat.php passandogli un valore.

Attiviamo l'evento onreadystatechange che richiama l'utlima funzione dello script, e inviamo i dati.

Infine:

function controlStatus() {
if(xmlHttpObj.readyState == 4) {
if(xmlHttpObj.status == 200) {
return true;
}
}
}

function createList() {
if(controlStatus() == true) {
try {
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer") {
document.getElementById("td_cat").innerHTML = "<div><select name=\"categoria\" id=\"categoria\"><option value=\"*\">*</option>" + xmlHttpObj.responseText + "</select></div>";
} else {
document.getElementById("categoria").innerHTML = "<option value='*'>*</option>" + xmlHttpObj.responseText;
}
} catch(e) {
alert("Errore durante la lettura della risposta: " + e.toString());
}
}
}

La funzione controlStatus() controlla i valori di stato della richiesta fatta nella pagina.

Se si verificano quelle condizioni restituisce true e createList() effettua le sue operazioni.

Qua no facciamo altro che raccogliere la risposta data dal server e la inniettiamo nella pagina.

Ho deciso di fare una funzionciana a parte per controlStatus() solo perchè così può essere riusata anche in altre funzioni senza dover riscrivere il tutto; in fond quei controli vengono sempre fatte quando facciamo chiamate AJAX.

Inoltre potete vedere che ho usato i try/catch per intercettare eventuali eccezioni; questa pratica è quella classica in OOP e sta prendendo sempre più piede sia in Javascript che in PHP.