Nel precedente articolo abbiamo visto le caratteristiche principali di AJAX mettendone in luce diversi aspetti e le ragioni per le quali esso è in questo momento molto utilizzato per la realizzazione di applicazioni web. In questo articolo verrà approfondito lo studio di AJAX utilizzando una soluzione Open Source: Sarissa.
Introduzione
Come abbiamo visto nel precedente articolo, AJAX è una tecnologia che viene eseguita sul browser.
Come illustrato in figura 1, AJAX utilizza un trasferimento asincrono tra il browser e il web server, permettendo alle pagine web di richiedere al server poche informazioni per volta invece di intere pagine HTML. Questa tecnologia rende le applicazioni internet più piccole, più veloci e decisamente più user friendly.
Sfortunatamente, AJAX è supportato in modo leggermente differente tra i vari browser come Internet Explorer, Opera, Safari, Mozilla e Firefox. Per risolvere questo problema ci sono solo 2 soluzioni: la prima, che abbiamo visto nel precedente articolo, è quella di scrivere un codice javascript cross-browser molto semplice e la seconda, quella di utilizzare una libreria javascript generalizzata in cui non ci si deve preoccupare delle varie tipologie di browser.
In quest‘articolo si affronterà la seconda soluzione e verrà utilizzata una libreria Open Source denominata Sarissa. Sarissa contiene metodi che permettono di fare le chiamate AJAX e di manipolare i tracciati XML che vengono ricevuti come risposta.
Sarissa versione 0.9.7
Sarissa è un progetto Open Source mantenuto da Manos Batsis ed è distribuita sotto la licenza GNU GPL versione 2 o superiore, GNU LGPL versione 2.1 o superiore e Apache Software License 2.0 o superiore: ognuno è libero di scegliere la licenza che ritiene più opportuna.
Sarissa è una libreria ECMAScript cross-browser ed offre varie funzioni per manipolare tracciati XML, leggere tracciati XML, effettuare trasformazioni XSLT, interrogazioni Xpath, ecc. tutte attività tipiche nello sviluppo di applicazioni AJAX.
Sarissa è composta da 4 files javascript principali:
- sarissa.js
La classe principale Sarissa.
- sarissa_dhtml.js
Contiene le funzioni relative a XMLHttpRequest e alle funzioni AJAX.
- sarissa_ieemu_xpath.js
Contiene le funzioni relative a XPATH
- sarissa_ieemu_xslt.js
Contiene le funzioni relative alle trasformazioni XSL
Esempio pratico: descrizione
Vediamo adesso in dettaglio come è stato realizzato l‘esempio.
Per prima cosa, in una pagina HTML devono essere caricate le librerie di Sarissa:
Nella FORM, il campo provincia rimane in ascolto sulla pressione di un tasto:
La funzione validate() farà le seguenti azioni:
Legge il parametro della FORM:
var prov = document.getElementById("provincia");
Prepara URL del server da richiamare per la validazione:
var url = "./servletSearch?provincia=" + encodeURIComponent(prov.value);
L‘url “servletSearch” rimappa la classe uk.co.marcoratto.servlet.Search.java.
Questa classe riceve come parametro il nome per esteso di una provincia e legge sulla base dati tutti i comuni di quella provincia.
Richiama Sarissa per fare un colloquio asincrono con il server:
Sarissa.updateContentFromURI(url, document.getElementById("comune"), null, validateCallback, true);
Il metodo Sarissa.updateContentFromURI richiede 2 parametri obbligatori:
- URL del server
- L‘oggetto della pagina HTML che dovrà essere aggiornato
e 3 parametri opzionali:
- Il transformer XSL che deve essere richiamato subito dopo il ritorno dal server;
- La funzione javascript che dovrà essere richiamata subito dopo la trasformazione XSL;
- Il valore true oppure false se si vuole gestire la cache dei tracciati XML;
La funzione validateCallback, richiamata da Sarissa, riceverà in input 2 parametri: il documento XML appena letto dal server e l‘oggetto target da aggiornare. Vediamo nel dettaglio:
Per prima cosa, viene verificato se il documento XML è valido:
if(Sarissa.getParseErrorText(xml) == Sarissa.PARSED_OK) {
i valori restituiti dalla funzione Sarissa.getParseErrorText sono:
- Sarissa.PARSED_OK = se il documento non presenta errori
- Sarissa.PARSED_EMPTY = se il documento è vuoto
- Sarissa.PARSED_UNKNOWN_ERROR = se c‘è stato un errore sconosciuto
Leggo le righe del tracciato XML:
var xRows = xml.getElementsByTagName(‘COMUNE‘);var submitBtn = document.getElementById("submit_btn");
Se l‘elenco non e‘ vuoto sblocco il pulsante conferma:
if (xRows.length > 0) {submitBtn.disabled = false;} else {submitBtn.disabled = true;}
Svuoto la combo:
obj.options.length = 0;
La carico con i dati del documento XML:
for (var j=0; j < xRows.length; j++) {var value = xRows[j].firstChild.nodeValue;var opt = new Option(value, value);obj.add(opt, null);}} else{// Ci sono stati degli errorialert(Sarissa.getParseErrorText(xml));}}
Esecuzione dell‘esempio
Aprire un browser all‘url http://localhost:8080/ajax_sarissa/
Cominciare a digitare per esteso il nome di una provincia, per esempio "Torino":
Si deve notare che durante la scrittura la combo si riempirà con l‘elenco dei comuni.
Scegliere un comune dall‘elenco e premere il pulsante di conferma per vedere il risultato:
Contenuto del file zippato di esempio
Qui di seguito viene data una breve descrizione del contenuto del file zippato di esempio ajax_sarissa.zip scaricabile dal menu in alto a sinistra.
./build.xml:
Script di ANT per compilare le classi, generare il JAR, il WAR e fare il deploy su Tomcat.
./classes
Directory che contiene i compilati.
./database/mysql
Directory che contiene gli script SQL e i comandi necessari a creare la base dati dell‘esempio.
./dd/war/WEB-INF/web.xml
Descrittore del Web Container.
./lib/ajax_sarissa.jar
Pacchetto delle classi compilate.
./lib/mysql-connector-java-3.1.12-bin.jar
Librerie per connettersi al DB MySql.
./lib/xerces.jar
./lib/xml-apis.jar
Librerie per generare tracciati XML con Java.
./src/java
Sorgenti java.
./src/web
Pagine web. In particolare, index.jsp contiene tutta la parte relativa ad AJAX discusse in questo articolo.
./tmp/ajax_sarissa.war
Il pacchetto WAR per il deploy.
Utilizzo dell‘esempio
Per chi vuole subito vedere l‘esempio, è sufficiente copiare il file ajax_sarissa.war all‘interno della cartella webapps di Jakarta-Tomcat, lanciare Tomcat ed aprire il link http://localhost:8080/ajax_sarissa/
Per chi, invece, vuole compilare i sorgenti e rigenerare il pacchetto WAR, può utilizzare i seguenti comandi di ANT previsti nello script:
# ant all
Per compilare e generare il file WAR.
# ant tomcat.deploy
Per effettuare il deploy.
# ant tomcat.run
Per lanciare Jakarta-Tomcat.
Preparazione dell‘ambiente
Qui di seguito verrà spiegato in dettaglio su cosa si deve fare per preparare l‘ambiente di test.
La descrizione è per utenti Linux ma con poche variazioni si possono eseguire gli stessi comandi anche su Windows.
- Database MySql
Se non avete già MySql, scaricate da Internet lo ZIP, installatelo e configuratelo secondo le indicazioni standard.
Le impostazioni dell‘esempio sono definite nella classe uk.co.marcoratto.util.Globals.java:
DB_HOST = localhostDB_PORT = 3306DB_SID = ajax_sarissaDB_USER = ajax_sarissaDB_PASS = ajax_sarissa
Creare il DB con nome ajax_sarissa (cambiate PASSWORD con la vostra password di amministrazione):
mysqladmin -h localhost --user=root --password=PASSWORD create ajax_sarissa
Creare l‘utente ajax_sarissa:
mysql -h localhost -B --user=root --password=PASSWORD -A mysql <Creare i grants corretti per l‘utente ajax_sarissa:
mysql -h localhost -B --user=root --password=PASSWORD -A mysql <Creare la tabella delle province:
mysql -h localhost --user=ajax_sarissa --password=ajax_sarissa -A ajax_sarissa < province.sqlCaricare la tabella delle province:
mysql -h localhost --user=ajax_sarissa --password=ajax_sarissa -A ajax_sarissa < province.data.sqlCreare la tabella dei comuni:
mysql -h localhost --user=ajax_sarissa --password=ajax_sarissa -A ajax_sarissa < comuni.sqlCaricare la tabella dei comuni:
mysql -h localhost --user=root --password=PASSWORD -A ajax_sarissaload data infile ‘/tmp/comuni.csv‘ into table COMUNI fields terminated by ‘,‘;
- Sarissa
Se scaricate il file direttamente da internet, fate attenzione che la versione 0.9.7 presenta un baco e pertanto l‘esempio non funzionerà .
Il file incriminato è "sarissa_dhtml.js". In riga 94 dovete cambiare:
oTargetElement.value = new XMLSerializer.serializeToString(oNode);con
oTargetElement.value = new XMLSerializer().serializeToString(oNode);e in riga 99 dovete cambiare:
oTargetElement.innerHTML = new XMLSerializer.serializeToString(oNode);con
oTargetElement.innerHTML = new XMLSerializer().serializeToString(oNode);Conclusioni
In questo articolo abbiamo visto come utilizzare una libreria Open Source per realizzare applicazioni AJAX. Questo ci ha permesso di togliere molto codice javascript all‘interno della nostra pagina HTML di esempio e di sfruttare al meglio le potenzialità offerte dalla libreria Sarissa per essere sicuri di realizzare applicazioni cross-browser.
Riferimenti bibliografici
[1]
Dave Crane, Eric Pascarello,Darren James, "Ajax in Action", Manning, 10/2005[2]
Marco Ratto, "Sviluppare Applicazioni AJAX - I parte", Mokabyte 107, Maggio 2006Risorse
[1]
JDK 1.4.2
http://java.sun.com/j2se/1.4.2/download.html[2] ANT
http://ant.apache.org/[3] Jakarta Tomcat
http://jakarta.apache.org/[4] Sarissa 0.9.7
http://sarissa.sourceforge.net/doc/[5] JDOM 1.0
http://www.jdom.org/[6] Mysql 4
http://www.mysql.com/[7]
MySQL Connector/J
http://www.mysql.com/products/connector/j/[8]
Esempio (scarica dal menu in alto a sinistra)Marco Ratto ha conseguito la laurea in Scienze dell‘Informazione nel 1999 presso la Facoltà di Scienze Matematiche Fisiche e Naturali dell‘Università degli Studi di Torino con la realizzazione della tesi ‘‘Accesso remoto ad un servizio di creazione di un orario: autenticazione dell‘utente in ambiente Java‘‘ .
Dal 1994 ha iniziato a lavorare come consulente nel settore IT e dal 2000 lavora come esperto di tecnologie J2EE ed Open Source in Banksiel per quanto riguarda il campo bancario/assicurativo e in Finsiel nel campo della Pubblica Amministrazione.