Pillole di Ajax
AJAX o Asynchronous JavaScript and XML è una tecnica per sviluppare applicazioni web interattive e dinamiche usando una combinazione di:
- HTML e CSS per la parte visiva
- DOM (Document Object Model) modificato attraverso JavaScript per mostrare dinamicamente le informazioni e interagirci
- L'oggetto XMLHttpRequest per interscambiare e manipolare dati in modo asincrono tra il browser dell'utente e il web server.
La potenzionalita' di una tecnologia del genere risiede nella possibilita' di modificare/aggiornare/ricaricare singole parti del documento html evitando pero' il caricamento dell'intera pagina.
Le applicazioni web che usano AJAX richiedono browser che supportano le tecnologie sopraelencate. Questi browser includono: Mozilla, FireFox, Internet Explorer, Opera, Konqueror e Safari.
Proviamo ora a sviluppare una semplice pagina HTML/Javascript che utilizzi la tecnologia asincrona.
Per prima cosa, realizziamo un file .js, con all'interno tutte le funzioni di cui avremo bisogno e che includeremo poi nel documento html.
La prima funzione sara' quella necessaria a instanziare l'oggetto XMLHttpRequest, in un certo senso il cuore della nostra applicazione:
/** * Funzione che istanzia un oggetto XMLHttpRequest usando un meccanismo cross browser. * * @return restituisce un'istanza di XMLHttpRequest oppure il valore false in caso * di errori. */
function getXMLHttpRequestInstance() {
var xmlhttp;
// Prova il metodo Microsoft usando la versione più recente: try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {
try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } }
// Se non è stato possibile istanziare l'oggetto forse siamo // su Mozilla/FireFox o su un altro browser compatibile: if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp = false; } }
// Restituisce infine l'oggetto: return xmlhttp;}
In seguito avremo bisogno di una funzione che si occupi di modificare parti della pagina HTML:
/** * Funzione che sostituisce il contenuto HTML di un nodo della pagina. * * @param nodeId ID del nodo * @param html codice HTML da sostituire a quello del nodo */function updateContent(nodeId, html) { var node = document.getElementById(nodeId); if(null == node) { //alert("[ERRORE] L'elemento " + nodeId + " non esiste"); return; } node.innerHTML = html; node.style.visibility = "visible";}
In ultimo una funzione (sara' quella realmente utilizzata) che si occupera' di richiamare getXMLHttpRequestInstance() per instanziare l'oggetto, utilizzarlo per richiedere dati al webserver e richiamare updateContent(nodeId, html) per aggiornare un elemento della pagina con i dati ricevuti:
/** * Richiede al web server il contenuto di una pagina (testo o HTML) in maniera asincrona. * @param nodeId ID dell'elemento della pagina che conterrà la slide * @param url URL della slide (deve essere sullo stesso server per motivi di sicurezza) */function LoadElement(nodeId, url) { var xmlhttp = getXMLHttpRequestInstance(); if(!xmlhttp) { alert("Il browser non supporta l'oggetto XMLHttpRequest"); return false; } updateContent(nodeId,""); updateContent(nodeId,"
...Caricamento in corso...
");xmlhttp.open("GET", url,true); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { if (xmlhttp.status==200) { updateContent(nodeId, xmlhttp.responseText); } else if (xmlhttp.status==404) { alert("[ERRORE] l'URL "+url+"non esiste!"); } else { alert("[ERRORE] errore non gestito (" + xmlhttp.status + ")"); } } } xmlhttp.send(null);}
A questo punto salviamo le tre funzioni in un file (ad esempio ajax.js) e proviamo a realizzare una pagina HTML con tecnologia asincrona:
AJAX Test
oldsite.andreafortuna.net" onclick="javascript:LoadElement('elemento','http://oldsite.andreafortuna.net')">
Per prima cosa includiamo nella pagina il file ajax.js appena creato, in seguito creiamo un bottone e associamo all'evento OnClick la funziona LoadElement, alla quale passiamo l'ID del nodo da aggiornare (dichiarato alla riga successiva) e l'indirizzo dei dati da utilizzare per l'aggiornamento.
In questo modo, al click del pulsante, viene caricata l'HomePage di andreafortuna.net (giustamente spogliata dai fogli di stile, che non vengono scaricati).