AJAX, acronimo di Asyncronous JavaScript And XML, è una tecnologia che combina per l’appunto JavaScript e XML per scambiare dati tra il client e il server in modo asincrono, ovvero non necessariamente al momento del caricamento della pagina. In realtà ad oggi la tecnologia AJAX non è più strettamente legata all’XML, ma tramite AJAX è possibile accedere a dati di qualsiasi tipo sul server, ad esempio file, dati formattati con JSON, ecc.
Ma a che serve AJAX, vi domanderete? La risposta è molto semplice: ad alterare i dati della pagina web senza ricaricarla. In questo modo è possibile implementare sistemi come ad esempio le notifiche su Facebook, i tweet su Twitter, i suggerimenti di ricerca su Google, liste dinamiche, e quant’altro.
Come usare AJAX? Guardate il codice JavaScript qui sotto:
// creare un oggetto XMLHttpRequest
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
In questo modo abbiamo creato un oggetto XMLHttpRequest con il quale possiamo creare la connessione. Ora proviamo a caricare un file di testo presente sul server:
xmlhttp.open("POST", "esempio.txt", true);
xmlhttp.send();
Come è facile intuire con queste due righe si imposta una richiesta tramite POST al file “esempio.txt”. L’impostazione true serve per indicare che vogliamo che la richiesta sia asincrona, ovvero che non blocca lo script. Se impostata a false, lo script rimarrà bloccato finchè la richiesta non avrà ricevuto risposta, il che può andare bene per piccole richieste, altrimenti usate true.
Nel caso abbiate impostate il parametro async a false, il codice per la gestione della risposta va messo direttamente in seguito alle istruzioni
// async settato a false
xmlhttp.open("POST", "esempio.txt", false);
xmlhttp.send();
document.getElementById("testo").innerHTML = xmlhttp.responseText;
Nel caso invece più probabile che sia settato a true, va impostate un listener che si attiva quando la risposta è pronta
// async settato a true
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("testo").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "esempio.txt", true);
xmlhttp.send();
Nell’esempio precedente abbiamo caricato un file di testo e abbiamo preso il suo contenuto e scritto all’intetno di un elemento HTML (ad esempio un <div> o un <p>). Tuttavia possiamo ricevere vari tipi di risposta:
// risposta tipo XML
xml = xmlhttp.responseXML;
// risposta tipo testo
text = xmlhttp.responseText;
Ora passiamo a qualcosa di più serio che caricare un file di testo. Ad esempio possiamo creare una richiesta ad un servizio e catturare la risposta. Ad esempio possiamo fare una richiesta ad una pagina PHP che restituisce dei dati. La pagina PHP per restituire dati dovrà semplicemente stampare tramite echo la risposta (che può essere testo, xml, html…). La richiesta però possiamo farla tramite GET o POST:
// GET request
xmlhttp.open("GET", "pagina.php?codice=12345&nome=Daniele", true);
xmlhttp.send();
// POST request
xmlhttp.open("POST", "pagina.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("codice=12345&nome=Daniele");
Come potete vedere è molto semplice. A questo punto tramite il metodo più appropriato possiamo prendere la risposta e gestirla come più ci pare adatto.
Questo è il modo nativo di JavaScript per gestire l’AJAX. Ci sono però molti framework che consentono di fare richieste AJAX in modo ancora più semplice. Prendiamo ad esempio jQuery:
$("#testo").load("esempio.txt");
Con questa semplicissima istruzione jQuery abbiamo caricato la risposta del file esempio.txt (ovvero il suo contenuto) e caricato all’interno dell’elemento “testo”. Possiamo anche assegnargli una funzione da eseguire quando si ottiene la risposta, per esempio per controllare se la richiesta ha avuto buon esito:
$("#testo").load("esempio.txt", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success") alert("External content loaded successfully!");
if(statusTxt == "error") alert("Errore: " + xhr.status + ": " + xhr.statusText);
});
Di nuovo, possiamo chiamare esplicitamente una richiesta GET o POST:
// GET request
$.get(URL, callback);
// POST request
$.post(URL, data, callback);
Dove data sono i dati passati in formato JSON (es. { codice: 12345, nome: “Daniele” }) mentre callback è una funzione da eseguire quando si ottiene la risposta. Infine jQuery mette a disposizione un’ultimo metodo ancora più esplicativa per eseguire una richiesta AJAX:
$.ajax({
url: "esempio.txt",
success: function(result){
$("#testo").html(result);
}
});
Anche questo esempio prende il contenuto del file esempio.txt e lo imposta come contenuto dell’elemento “testo”.
Come avete potuto constatare da questa rapida carrellata di esempi, eseguire una richiesta AJAX è molto semplice, e il suo utilizzo permette di realizzare funzioni molto interessanti. Ovviamente in questi esempi abbiamo più che altro caricato il testo di un documento .txt, ma possiamo come accennato in precedenza fare una richiesta ad una pagina PHP che restituisce tramite echo la risposta richiesta. In questo modo si può implementare sistemi come una pagina PHP che interroga un database MySQL e tramite AJAX si può fare la richiesta in modo asincrono, ad esempio ripetendola ad intervalli regolari in modo che la pagina si aggiorni ad intervalli regolari.
