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).

CLICCA QUI PER VEDERE L'APPLICAZIONE IN FUNZIONE


Published: December 08 2005

  • category: