Recuperare i dati di un file XML
Lo spirito della tecnologia XML,soprattutto per quello che riguarda il Web e ciò che lo circonda, è quello di permettere e facilitare il passaggio di dati tra applicazioni.
È stato detto e ridetto che XML è in grado di lavorare, in maniera altrettanto efficace, sia con tecnologie basate su controlli lato server che lato client; lo scopo di questo articolo, nato sulla scorta del precedente Scambiare dati con il DSO di XML, è quello di mostrare come sia possibile, con l'ausilio di JavaScript, recuperare dati da un file XML, in maniera più versatile graficamente, e più funzionale dal punto di vista dell'interazione.
Il funzionamento di una simile applicazione è basato sui nodi che vengono generati in un file XML; lasciamo perdere per un momento oggetti, proprietà e metodi che potremmo utilizzare, e ragioniamo:
• RADICE
• NODO
• ELEMENTO
• ELEMENTO
• ELEMENTO
• ELEMENTO
• ELEMENTO
• NODO
• ELEMENTO
• ELEMENTO
• ELEMENTO
• ELEMENTO
• ELEMENTO
...
Questa è la struttura gerarchica di un file XML, che suppongo i lettori tutti conoscano; la cosa essenziale è quella di individuare i nodi, e gli eventuali sotto-nodi, di un simile meccanismo. Nel codice presentato sopra nel precedente esempio ho evidenziato in rosso i nodi presenti.
Aprendo un file XML di cui i nostri computer sono ormai saturi, è possibile notare che la struttura di alcuni di questi è più complessa:
• RADICE
• NODO
• ALTRO_NODO
• ELEMENTO
• ELEMENTO
• ELEMENTO
• ELEMENTO
• ELEMENTO
...
Veniamo al dunque: JavaScript è stato predisposto per permettere al browser di parserizzare (ossia elaborare e analizzare) il file XML richiamato all'interno di una pagina HTML pura, individuare i nodi e memorizzare i dati contenuti dai singoli elementi.
Per essere meno teorici ed astratti, questo articolo è corredato di un esempio pratico, strutturato in sola lettura. Nell'esempio costruiremo un file che, tramite opportune proprietà e metodi JavaScript, è in grado di restituire in output, elegantemente formattati, i dati contenuti nel file XML di cui ci serviremo.
Vediamo subito l'esempio e cominciamo a lavorare sul serio.
Esempio: progetto "Rubrica"
Una rubrica telefonica, o un più completo indirizzario, è un ottimo e pratico esempio per implementare un basilare file XML, completo dei dati normalmente richiesti da un simile strumento di consultazione. Ecco il file d'esempio:
<?xml version="1.0"?>
<rubrica>
<amico>
<nome>Gennaro</nome>
<cognome>Esposito</cognome>
<telefono>081-0000000</telefono>
<indirizzo>Via Riviera di Chiaia</indirizzo>
<citta>Napoli</citta>
</amico>
<amico>
<nome>Paolo</nome>
<cognome>Rossi</cognome>
<telefono>02-00000000</telefono>
<indirizzo>Piazza del Duomo</indirizzo>
<citta>Milano</citta>
</amico>
</rubrica>Sistemiamo il file rubrica.xml, che ha per contenuti il codice appena visto, in una cartella scelta per il progetto "Rubrica".
La struttura HTML
Il file HTML di cui ci serviremo, ad esempio index.htm, ha una struttura molto semplice, ma va corredata di alcuni elementi nuovi; questo è il codice:
<html>
<head>
<title>Estrarre dati da un file XML con JavaScript</title>
<style type="text/css">
h1 { color: #800000; font-size: 15px; font-family: Verdana; }
td { background-color: #FFFFFF; font-size: 12px; font-family: Verdana; }
</style>
<script language="javascript" for="window" event="onload" src="rubrica.js"></script>
</head>
<body>
<xml id="DSO_Amici" src="rubrica.xml"></xml>
<h1 align="center">Rubrica dei miei amici</h1>
<div id="Stampa"></div>
</body>
</html>Il richiamo al file esterno rubrica.js è stato implementato con alcuni attributi non troppo usuali, for="window" event="onload", che, fondamentalmente, specificano l'evento che deve scatenare l'output sulla pagina.
All'interno del file HTML abbiamo richiamato il file XML esterno con la stringa
<xml id="DSO_Amici" src="rubrica.xml"></xml>
assegnandogli un identificativo di lettura (DSO_Amici) che servirà a JavaScript per scorrerlo.
Alla fine utilizziamo un livello di testo (incluso neL due tag <div>) come soluzione pratica per la stampa a video dei dati contenuti nei nodi XML.
Passiamo ora subito ad analizzare il cuore dell'intero script: il file JavaScript esterno.
Lo script: il file "rubrica.js"
La cosa essenziale, in questo momento, non è pensare di implementare il codice JavaScript punto e basta: dobbiamo capire in che modo JavaScript comanda al browser di parserizzare e leggere i nodi del documento XML.
Questo scambio di dati è realizzato in base alle specifiche del Document Object Model (DOM), in particolare utilizziamo la classe XMLDocument per abilitare il parser del browser a leggere i nodi, grazie alle proprietà documentElement che scansiona gli elementi del file XML, e childNodes che legge i singoli nodi e li elabora.
Ecco il codice JavaScript che utilizzeremo per leggere i dati e stamparli a video in HTML puro:
var Mostra = "";
var StringaXml = DSO_Amici.XMLDocument;
var i;
for (i=0; i<StringaXml.documentElement.childNodes.length; i++) {
Mostra += "<table bgcolor='#F9F9F9' align='center' width='450' border='1' bordercolor='#CCCCCC'>"
Mostra += "<tr>"
Mostra += "<td colspan='2' style='background-color: #008080;'>"
Mostra += "<font color='#FFFFFF'><b>Amico # " + (i + 1) + "</b></font>"
Mostra += "</td>"
Mostra += "</tr>"
Mostra += "<tr>"
Mostra += "<td width='100'><b>Nome:</b></td>"
Mostra += "<td>" + StringaXml.documentElement.childNodes(i).childNodes(0).text + "</td>"
Mostra += "</tr>"
Mostra += "<tr>"
Mostra += "<td><b>Cognome:</b></td>"
Mostra += "<td>" + StringaXml.documentElement.childNodes(i).childNodes(1).text + "</td>"
Mostra += "</tr>"
Mostra += "<tr>"
Mostra += "<td><b>Telefono:</b></td>"
Mostra += "<td>" + StringaXml.documentElement.childNodes(i).childNodes(2).text + "</td>"
Mostra += "</tr>"
Mostra += "<tr>"
Mostra += "<td><b>Indirizzo:</b></td>"
Mostra += "<td>" + StringaXml.documentElement.childNodes(i).childNodes(3).text + "</td>"
Mostra += "</tr>"
Mostra += "<tr>"
Mostra += "<td><b>Città:</b></td>"
Mostra += "<td>" + StringaXml.documentElement.childNodes(i).childNodes(4).text + "</td>"
Mostra += "</tr>"
Mostra += "</table>"
Mostra += "<br>";
}
Stampa.innerHTML = Mostra;I passaggi che effettuiamo sono essenzialmente tre e sono stati evidenziati in rosso nel codice:
- Dichiariamo la classe del DOM che inizializza la lettura
- Eseguiamo un ciclo che conta i record (nodi) presenti nel file XML
- Andiamo a scorrere gli elementi e li richiamiamo ciclicamente
Conclusioni
L'esempio stilato fino a questo punto è piuttosto basilare ed è monco della parte di scrittura del codice. Una reale applicazione va utilizzata sia in lettura che in scrittura. Non è questa la sede adatta a parlare della scrittura, dovendo obbligatoriamente passare per tecnologie basate su controlli eseguiti dal server, ma i più esperti potranno gradire alcuni suggerimenti per favorire lo sviluppo anche di questa fase del lavoro.
Le strade che mi vengono in mente sono due: la prima, forse la più semplice e snella, è quella di andare a scrivere col FileSystemObject direttamente all'interno del file XML, avendo cura di salvaguardare i dati già presenti e di sostituire, con caratteri unicode, i caratteri speciali XML che gli darebbero fastidio. In alternativa si potrebbe convertire in formato XML i recordset di un database, preferibilmente di tipo ADO, su cui andiamo a scrivere direttamente.
