Sviluppare Applicazioni AJAX

II parte: realizzare applicazioni AJAX utilizzando il progetto Open Source Sarissadi

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

Caricare la tabella delle province:

mysql -h localhost --user=ajax_sarissa --password=ajax_sarissa -A ajax_sarissa < province.data.sql

Creare la tabella dei comuni:

mysql -h localhost --user=ajax_sarissa --password=ajax_sarissa -A ajax_sarissa < comuni.sql

Caricare 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 2006

Risorse
[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)

Condividi

Pubblicato nel numero
108 giugno 2006
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…
Articoli nella stessa serie
Ti potrebbe interessare anche