Mattepuffo.com

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.