Utilizzo di XML con Javascript

Transcript

1 Utilizzo di XML con Javascript Moltissime applicazioni Web si scambiano i dati con l'utilizzo di un formato intelligibile e fruibile che non necessita di particolari autorizzazioni come ne necessitano i database. Il formato di dati di cui stiamo parlando è l'xml. All'XML in genere ci si interfaccia con linguaggi lato server come ASP, ASP.NET, PHP ed altri, ma è possibile interfacciarvisi anche con linguaggi lato client come VBScript e Javascript. Quest'ultimo è oggetto del presente Articolo. In effetti ci sono dei pro e dei contro nell'utilizzo di un linguaggio lato client piuttosto che lato server: i pro sono legati alla velocità di esecuzione ed al fatto che non è necessario che su un server siano installati i parser XML adatti, che (per contro) devono necessariamente essere installati sui client che visitano una pagina XTML che importa uno script che legge un XML, ovvero una cosa che non si può controllare. La scelta di implementare un'applicazione con Javascript ed XML è adatta ad un'applicazione Intranet, dove si sa per certo che solo determinati client accederanno alle pagine. Introduzione ad XML XML è l'acronimo di extensible Markup Language, ovvero linguaggio di marcatura che, a differenza dell'html, ha delle proprietà estensibili e non è atto a definire layout di pagine bensì a creare delle strutture di dati. Si crei il file database.xml semplicemente rinominando un normale file di testo Nuovo Documento di testo.txt e vi si inserisca il seguente codice: <?xml version="1.0"?> <biblioteca> <libro> <autore>j.r.r. Tolkien</autore> <titolo>il Signore degli Anelli</titolo> <descrizione>fantastica storia epica fantastica medievale</descrizione> <prezzo>100</prezzo> </libro> <libro> <autore>b. Stocker</autore> <titolo>dracula</titolo> <descrizione>la storia del noto vampiro transilvano</descrizione> <prezzo>50</prezzo> </libro> <libro> <autore>d. Defoe</autore> <titolo>moll Flanders</titolo> <descrizione>la storia di una ladra e prostituta</descrizione> <prezzo>35</prezzo> </libro> </biblioteca> E' possibile notare una struttura gerarchica di tipo padre.figlio e figlio.nipote; questi legami si chiamano nodi a cui è possibile accedere in via programmatica. Più avanti, nel corso dell'articolo, vedremo come. L'oggetto XMLDOM Esistono diversi sistemi per accedere ai dati di un documento XML, uno dei quali, probabilmente il migliore, è di casa Microsoft e si chiama XMLDOM che sfrutta le potenzialità del Document

2 Object Model. Utilizzato lato server l'xmldom permette anche di aggiornare file modificando nodi esistenti e creandone di nuovi, come se si trattasse di un database. Con Javascript il discorso cambia perchè un client riconoscerebbe una simile operazione come frutto di un ActiveX potenzialmente pericoloso. Il problema non si verifica in lettura. Per leggere un documento XML con l'xmldom è necessario creare un'istanza della libreria Microsoft.XMLDOM con la seguente sintassi: var objxml = new ActiveXObject("Microsoft.XMLDOM"); Si crei il file test.htm e si inserisca il seguente codice in un blocco di script: var errore = 0; try var objxml = new ActiveXObject("Microsoft.XMLDOM"); errore = 0; alert("componente supportato"); catch (e) errore = 1; alert("componente NON supportato"); finally if (errore = 0) objxml.close(); Con l'istruzione try dichiaro l'istanza dell'oggetto; nell'istruzione catch gestisco un'eventuale eccezione dovuta ad un errore; nell'istruzione finally inserisco il codice che dovrà comunque essere eseguito, in questo caso la chiusura dell'istanza per non tenere la memoria del computer occupata. Ad ogni modo il costrutto try catch finally è proprietario di Javascript e serve per la gestione degli errori: non ha nulla a che vedere nativamente con XML o con XMLDOM. Leggere un file XML con Javascript Passiamo alla lettura del file database.xml all'interno del file leggi.htm di cui riporto il codice commentato:

3 var errore = 0; try var objxml = new ActiveXObject("Microsoft.XMLDOM"); // Carico il file XML objxml.async = false; objxml.load("database.xml"); // Leggo tutti i nodi del file col metodo getelementsbytagname() var autore = objxml.getelementsbytagname("libro/autore"); var titolo = objxml.getelementsbytagname("libro/titolo"); var descrizione = objxml.getelementsbytagname("libro/descrizione"); var prezzo = objxml.getelementsbytagname("libro/prezzo"); var i = 0; // Ciclo tutti i nodi utilizzando la proprietà text per la lettura with(document) for (i=0; i<autore.length; i++) write("autore: " + autore[i].text + "<br>"); write("titolo: " + titolo[i].text + "<br>"); write("decrizione: " + descrizione[i].text + "<br>"); write("prezzo: " + prezzo[i].text + " <br><br>"); errore = 0; catch (e) document.write("spiacenti, il tuo computer non supporta XML"); errore = 1; finally if (errore = 0) objxml.close();

4 Un sistema di login in Javascript ed XML Con un po di fantasia e con l'oggetto XMLDOM possiamo creare una serie di interessanti applicazioni basate su XML. L'oggetto di questo Articolo è un sistema di autenticazione, o che dir si voglia di login, basato su un file XML di cui presento la struttura, contenuta all'interno del file login.xml <?xml version="1.0"?> <database> <utente> <id>1</id> <password>pippo</password> </utente> <utente> <id>2</id> <password>pluto</password> </utente> <utente> <id>3</id> <password>paperino</password> </utente> </database> La struttura esplica chiaramente che ad ogni utente è assegnata una coppia di valori UserID e Password, ovvero le credenziali di accesso. Di seguito il codice HTML del modulo in cui inserire le proprie credenziali per l'autenticazione, contenuto nel file login.html <form name="modulo"> User ID:<br> <input type="text" name="u_id"><br> Password:<br> <input type="password" name="pass"><br> <input type="button" value="login" onclick="xml_login()"> </form> L'evento click del bottone di login fa riferimento alla funzione XML_Login() da inserire nell'header dello stesso file. Di seguito il codice commentato: <script language="javascript"> <!-- function XML_Login() // Recupero i dati dal modulo HTML var u_id = document.modulo.u_id.value; var pass = document.modulo.pass.value; // Imposto un'espressione regolare per verificare che // i caratteri inseriti nei campi UserID e Password // siano alfanumerici, in modo da non dar fastidio all'xml var re = /^[a-z0-9]/; // Verifico che i campi siano valorizzati (correttamente) if (re.test(u_id) == false re.test(pass) == false) alert("inserire le credenziali di accesso!");

5 else // Una volta soddisfatte le condizioni... // Apro un oggetto XMLDOM var login = new ActiveXObject("Microsoft.XMLDOM"); // Carico il file XML login.async = false; login.load("login.xml"); // Recupero i nodi dal file XML var id = login.getelementsbytagname("utente/id"); var password = login.getelementsbytagname("utente/password"); // Creo un indice per individuare il nodo relativo // all'utente che sta effettuando il login var indice = u_id - 1; // Verifico che l'utente esista e gli concedo o meno l'accesso if (id[indice].text == u_id && password[indice].text == pass) alert("benvenuto!"); else alert("accesso negato!"); //--> </script> Non è tutto oro quel che luccica! Il sistema è semplice e funzionante e potrebbe risolvere i problemi di molti Webmaster che non utilizzano (o non ancora) linguaggi sicuri come ASP, ASP.NET o PHP. Tuttavia ci sono due controindicazioni: 1. utilizzare un file XML che contenga dati sensibili come delle credenziali di accesso non è una scelta sicura perchè ci si potrebbe arrivare via HTTP, conoscendo o immaginando come potrebbe chiamarsi il file; 2. utilizzare Javascript lato client mette in chiaro nel codice il nome ed il percorso del file XML contenente le credenziali di accesso dei vari utenti. Con queste considerazioni non sto smontando i lettori in merito all'utilizzo di questo sistema, anche perchè altrimenti non ci avrei scritto un Articolo! Considerate questo Articolo come risorsa puramente didattica: vi propongo un altro Articolo (reperibile nella sezione ASP - Tutorial) che sfrutta questo stesso sistema con uno script ASP, in modo da rendere sicura l'autenticazione e da non mettere i dati a rischio... o non più di tanto!

6 Paginazione a colonne di un file Xml Per questioni pratiche e di spazio sulla pagina, conviene sempre, o comunque quando possibile, disporre i risultati di un report in una tabella formata da più colonne. Abbiamo già visto in un Articolo precedente come è possibile paginare a colonne i risultati di una query su di un database: allo stesso modo possiamo paginare i dati di un file XML, oggetto di questo Articolo. Consideriamo il codice del seguente file, amici.xml <?xml version="1.0"?> <amici> <amico> <nome>alessandro</nome> </amico> <amico> <nome>claudio</nome> </amico> <amico> <nome>emanuela</nome> </amico> <amico> <nome>felice</nome> </amico> <amico> <nome>jacopo</nome> </amico> <amico> <nome>luca</nome> </amico> <amico> <nome>max</nome> </amico> </amici> Il codice ASP di seguito riportato ed opportunamente commentato, spiega come eseguire la paginazione a colonne sul file XML appena esaminato: <%@LANGUAGE = VBScript%> <table border="1"> <tr> <% ' DICHIARO LE VARIABILI CHE MI SERVONO PER L'APPLICAZIONE Dim xml, nome, i, x ' APRO UN NUOVO OGGETTO XMLDOM E CARICO IL FILE XML Set xml = Server.CreateObject("Microsoft.XMLDOM") xml.async = False xml.load Server.MapPath("amici.xml") ' RECUPERO IL NODO CHE MI INTERESSA Set nome = xml.getelementsbytagname("amico/nome") ' VALORIZZO I CONTATORI i = 0 x = 0 ' ESEGUO IL CICLO SU TUTTI I NODI For i = 0 To nome.length - 1

7 %> <% ' VERIFICO CHE IL REPORT SI DISPONGA SU 3 COLONNE If x = 3 Then x = 0 Response.Write "</tr><tr>" End If <td width="100" align="center"><%=nome(i).text%></td> ' INCREMENTO IL CONTATORE x = x + 1 Next ' UN PO DI PULIZIA... Set nome = Nothing Set xml = Nothing %> </tr> </table> Le fasi salienti dello script sono evidenziate in grassetto... il resto è un comune report di un file XML utilizzando una pagina ASP/VBScript e l'xmldom. Celle di colori alternati con ASP, XML ed XSLT Le istruzioni condizionali dell'xslt consentono di realizzare con semplicità report che si comportano in maniera differente a seconda di calcoli o dei dati presenti all'interno di un documento XML. L'esempio di questo Articolo mette in pratica un utile script che genera un report in celle di colori alternati, effettuando la trasformazione lato server attraverso ASP. Creiamo una semplice struttura di dati XML nel file database.xml <?xml version="1.0"?> <database> <utente> <id>1</id> <nome>luca</nome> <cognome>ruggiero</cognome> </utente> <utente> <id>2</id> <nome>max</nome> <cognome>bossi</cognome> </utente> <utente> <id>3</id> <nome>claudio</nome> <cognome>garau</cognome> </utente> <utente> <id>4</id> <nome>alessandro</nome> <cognome>alessandrini</cognome> </utente> </database> Stilizziamo ora dinamicamente l'output del file XML col seguente codice XSLT nel file style.xsl

8 <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:output method="html" /> <xsl:template match="/"> <h1>utenti</h1> <table border="1"> <thead bgcolor="#000000" style="color: #FFFFFF;"> <th>nome</th> <th>cognome</th> </thead> <xsl:for-each select="database/utente"> <xsl:choose> <xsl:when test="id mod 2 = 1"> <tr bgcolor="#ffffff"> <td><xsl:value-of select="nome" /></td> <td><xsl:value-of select="cognome" /></td> </tr> </xsl:when> <xsl:otherwise> <tr bgcolor="#ffffcc"> <td><xsl:value-of select="nome" /></td> <td><xsl:value-of select="cognome" /></td> </tr> </xsl:otherwise> </xsl:choose> </xsl:for-each> </table> </xsl:template> </xsl:stylesheet> Commentiamo un po il codice per renderci conto delle sue azioni dinamiche. Prima operazione è quella di impostare l'output in formato HTML per evitare che la trasformazione, da ASP, avvenga importando Tag XML: <xsl:output method="html" /> questa operazione possiamo considerarla come valore aggiunto al report ma non è fondamentale ai fini della riuscita dello script. Apriamo il template XSLT ed iniziamo a scrivere il codice HTML. Ad un certo punto, all'interno del ciclo che estrae tutti i dati dal file XML, utilizziamo le istruzioni condizionali xsl:when ed xsl:otherwise, all'interno di un gruppo di scelta condizionale xsl:choose, per impostare due condizioni, ovvero quelle secondo le quali le celle su una stessa riga saranno, in maniera alternata, di un colore piuttosto che di un altro <xsl:choose> <xsl:when test="id mod 2 = 1"> <tr bgcolor="#ffffff"> <td><xsl:value-of select="nome" /></td> <td><xsl:value-of select="cognome" /></td> </tr> </xsl:when> <xsl:otherwise> <tr bgcolor="#ffffcc"> <td><xsl:value-of select="nome" /></td> <td><xsl:value-of select="cognome" /></td> </tr> </xsl:otherwise> </xsl:choose>

9 Effettuiamo il test condizionale con l'operatore modulo in base 2, impostando la condizione di uguaglianza su 1, in modo da ottenere una condizione vera ogni due. Di seguito il codice commentato del file ASP che effettua la trasformazione: = VBScript%> <% ' Dichiaro le variabili che mi servono Dim database, style ' Setto due oggetti XMLDOM, uno per il file XML ' ed un secondo per il file di stile dinamico XSLT Set database = Server.CreateObject("Microsoft.XMLDOM") Set style = Server.CreateObject("Microsoft.XMLDOM") ' Setto i due oggetti come sincroni database.async = False style.async = False ' Carico i file XML ed XSLT database.load Server.MapPath("database.xml") style.load Server.MapPath("style.xsl") ' Nel corpo della pagina effettuo la trasformazione... %> <html> <head> <title>celle di colori alternati con ASP, XML ed XSLT</title> </head> <body> <%=database.transformnode(style)%> </body> </html> <% ' Un po di pulizia... Set database = Nothing Set style = Nothing %>

10 Accedere ad un file XML generato dinamicamente con Javascript Il metodo loadxml() di XMLDOM permette di supplire al tradizionale metodo load(), utilizzato per specificare il percorso di un file XML reale a cui accedere, quando il file XML non è fisicamente presente sul server ma viene generato al volo all'interno del codice Javascript stesso. La domanda nasce spontanea: perchè creare al volo un file XML direttamente all'interno del codice Javascript piuttosto che utilizzare un file XML reale? In effetti una risposta secca e definita non c'è ma ci sono tante risposte che si traducono in specifiche casistiche di programmazione a cui è necessario, all'occorrenza, far fronte. Immaginiamo ad esempio un'applicazione Intranet basata o meno su XML in cui è necessario fare dei rapidi calcoli al volo, ad esempio per monitorare dinamicamente il numero e/o il valore di una serie di elementi di un form HTML. A prescindere dal fatto che potrebbero esserci altre soluzioni altrettanto valide, la soluzione di creare una struttura XML al volo è comunque una soluzione ed è anche piuttosto valida; a questo proposito torna comodo avere una struttura XML volatile su cui agire col DOM piuttosto che dover andare a creare fisicamente un file XML, verificarne l'esistenza, andarci a scrivere o a modificarlo... operazioni più lunghe e dispendiose che richiedono, per altro, l'intervento di un linguaggio lato server come ASP. Il codice, simile a tanti altri codici già visti riguardanti l'interazione con l'xmldom, è molto semplice e non ha bisogno di commenti var testo = ""; testo += "<?xml version='1.0'?>"; testo += "<utenti>"; testo += "<utente><nome>luca</nome></utente>"; testo += "<utente><nome>max</nome></utente>"; testo += "<utente><nome>claudio</nome></utente>"; testo += "</utenti>"; var x = new ActiveXObject("Microsoft.XMLDOM"); x.async = false; x.loadxml(testo); var i = 0; for (i=0; i<x.documentelement.childnodes.length; i++) document.write(x.documentelement.childnodes(i).text + "<br>"); x.close(); Nella variabile testo costruisco dinamicamente la struttura XML e la richiamo all'interno del metodo loadxml(). Il resto è ordinaria amministrazione.

11 XML Data Binding: unire XML ed HTML Il Data Binding è una tecnica di programmazione basata sul recupero di un elemento attraverso l'oggetto DSO (Data Source Object) che dispone di una serie di proprietà per recuperare i dati. Microsoft ha implementato nel parser MSXML la possibilità di gestire lato client i dati di una struttura XML attraverso la tecnica del Data Binding. Trattandosi di una tecnica lato client non so fino a che punto possa effettivamente essere utile, ma in ogni caso vediamo di cosa si tratta. Si prenda la seguente struttura XML da inserire nel file rubrica.xml <?xml version="1.0"?> <database> <record> <nome>pippo</nome> < >pippo@disney.com</ > <telefono>112233</telefono> </record> <record> <nome>pluto</nome> < >pluto@disney.com</ > <telefono>445566</telefono> </record> <record> <nome>paperino</nome> < >paperino@disney.com</ > <telefono>778899</telefono> </record> </database> Nella nostra pagina HTML utilizzeremo il Tag <xml>, con relativa chiusura </xml>, per recuperare il file XML; a questo Tag assegneremo l'id identificativo del DSO da utilizzare <xml id="dso_rubrica" src="rubrica.xml"></xml> Passiamo alla materiale estrazione dei dati all'interno di una tabella HTML <table datasrc="#dso_rubrica" border="1"> <thead bgcolor="#eeeeee"> <th align="left"><b>nome</b></th> <th align="left"><b> </b></th> <th align="left"><b>telefono</b></th> </thead> <tr> <td><span datafld="nome"></span></td> <td><span datafld=" "></span></td> <td><span datafld="telefono"></span></td> </tr> </table> Alla tabella assegno l'attributo datasrc che recupera l'id del DSO associato al file XML a cui accedere; utilizziamo i Tag thead e th per definire l'intestazione della tabella ed evitare che si ripeta per ogni nodo XML visualizzato; all'interno di una serie di Data Fields andiamo ad estrarre i veri e propri dati, sfruttando l'attributo datafld. NOTA: se volete disporre i dati di uno stesso nodo in verticale piuttosto che in orizzontale dovete far si che l'intestazione si ripeta ed utilizzare i Tag tr e td al posto di thead e th.

12 XML ed HTML: creazione di una struttura intuibile Una delle principali raccomandazioni per la realizzazione di una struttura XML, che esula dalle regole per la creazione di strutture valide o ben formate, è quella di creare Tag intuibili. Mi capita di vedere strutture XML a prima vista del tutto incomprensibili, sia pur perfettamente funzionanti. Allo stesso modo in cui si raccomanda ad un programmatore di assegnare, ad esempio, a variabili e funzioni nomi intuibili, allo stesso modo è necessario creare strutture XML semplici da interpretare. Dal momento che l'xml somiglia, almeno nella sua struttura all'html, possiamo volgere a nostro favore questa platonica somiglianza e "rubare" i Tag con i relativi attributi. Supponiamo di voler creare una struttura XML i cui dati siano un elenco di siti con relativi link, icona e descrizione. Una struttura come quella appena descritta si può tradurre come segue <?xml version="1.0"?> <database> <html> <h1>mrw Corsi</h1> <a href=" title="corso professionali" /> <img src="mrwcorsi.gif" alt="icona MRW Corsi" border="0" /> <p>vuoi essere un professionista? Acquista i nostri corsi!</p> </html> <html> <h1>mr.webmaster</h1> <a href=" title="mister Webmaster" /> <img src="mrwebmaster.gif" alt="icona Mr.Webmaster" border="0" /> <p>vuoi imparare a programmare? Leggi i nostri Articoli!</p> </html> </database> Abbiamo usato il nome h1 al posto di titolo; a, con relativi attributi href e title al posto di collegamento; abbiamo utilizzato il Tag img, con relativi attributi classici dell'html, al posto di immagine o icona; in fine abbiamo usato p al posto di descrizione. Si tratta solo di un semplice esempio. Fate tesoro di questo consiglio! Capire la struttura XML di Google SiteMaps Google SiteMaps è un sistema introdotto nel 2005 dal gigante di Mountain View allo scopo di segnalare al suo spider le pagine di un sito e, tanto per smentire chi lo crede fermamente, questo sistema NON favorisce l'indicizzazione dei contenuti, essendo appunto solo uno strumento di segnalazione. In questo articolo by-passeremo le spiegazioni teoriche e di Marketing e ci concentreremo sulla struttura XML in cui questo sistema è materialmente redatto. Il file XML va preferibilmente messo nella root di un sito ed il nome del file non è importante. Supponiamo possa essere sitemaps.xml. Esaminiamo la sua struttura di base:

13 <?xml version="1.0" encoding="utf-8"?> <urlset xmlns=" <url> <loc> <lastmod> </lastmod> <changefreq>weekly</changefreq> <priority>1.0</priority> </url> </urlset> Alla prima riga troviamo la dichiarazione e la versione del linguaggio XML e la sua codifica UTF. In seguito troviamo il Tag principale che è urlset con relativa chiusura alla fine del file; il suo Namespace, specificato dal Tag xmlns, fa riferimento al percorso remoto di Google stesso, su cui è presente la DTD relativa agli spazi nei nomi utilizzati e gestiti stesso da Big G. A questo punto esaminiamo il nodo composto da dal Tag principale url e dall'elenco dei Tag utili a specificare i valori per singola pagina. loc - Specifica la pagina da segnalare allo spider di Google: in questo caso la Homepage. lastmod - Indica la data dell'ultima modifica della pagina in formato: aaaa-mm-gg ovvero anno-mese-giorno changefreq - Indica la frequenza con cui una pagina viene aggiornata : daily - quotidianamente weekly - settimanalmente monthly - mensilmente priority - Indica il livello di importanza della pagina: si può dire a Google, in questo modo, che la sua importanza va da 0.1 a 1.0 e non oltre. Proviamo adesso ad ampliare il file XML costituente il Google SiteMaps, specificando anche la pagina del Forum di Mr. Webmaster, oltre alla già specificata Homepage: <?xml version="1.0" encoding="utf-8"?> <urlset xmlns=" <url> <loc> <lastmod> </lastmod> <changefreq>weekly</changefreq> <priority>1.0</priority> </url> <url> <loc> <lastmod> </lastmod> <changefreq>daily</changefreq> <priority>1.0</priority> </url> </urlset> La modifica (aggiunta) è evidenziata in grassetto. Si consiglia di automatizzare il meccanismo di aggiornamento del file XML in questione attraverso un qualsiasi software o webware, di propria creazione, attraverso il linguaggio di scripting lato server che si preferisce.

14 Impostare un link di base con XML: Base Nel tutorial dedicato ad XLink abbiamo visto come creare link attraverso un documento XML. Vediamo adesso come semplificarci la vita utilizzando l'elemento XML:Base per definire la URL di base dei documenti da linkare all'interno nel nostro file XML. Il funzionamento di XML:Base è simile a quello del Tag <base> dell'html, il cui funzionamento è descritto minuziosamente in questo articolo. Nell'articolo relativo ad XLink, a cui ho fatto riferimento in precedenza, abbiamo creato una struttura di file XML relativa al noto gruppo musicale Queen. Riportiamo lo stesso esempio in questa sede ed adattiamo al suo interno la gestione dei link di base con XML:Base, come nell'esempio che segue: <?xml version="1.0" encoding="utf-8"?> <queen xml:base=" xmlns:xlink=" <band xlink:type="simple" xlink:href="freddie-mercury.html"> Voce e piano: Freddie Mercury <band> <band xlink:type="simple" xlink:href="brian-may.html"> Chitarra elettrica: Brian May <band> <band xlink:type="simple" xlink:href="john-deacon.html"> Basso: John Deacon <band> <band xlink:type="simple" xlink:href="roger-taylor.html"> Batteria: Roger Taylor <band> </queen> Non facciamo altro che definire all'interno del Tag "queen", root del documento XML, l'attributo xml:base assegnandogli come valore la URL di base a cui i file HTML specificati all'interno dei singoli nodi faranno riferimento.