Estrarre dati da un file Xml con Javascript

Corso XML
Creazione di strutture XML, XSL ed altri linguaggi eXtensible

Scritto da Luca Ruggiero nella sezione Xml

Comparso su HTML.it il 10 Gennaio 2003 - E' vietata la riproduzione, anche parziale, senza esplicito consenso dell'autore

Introduzione

Lo spirito della tecnologia Xml,soprattutto per quello che riguarda il Web e ciò che lo circonda, è quello di permettere, ed in molti casi di facilitare, il passaggio di dati tra applicazioni.
E' 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, sulla scorta di un precedente che già abbiamo avuto con l'articolo Binding dei dati col DSO, è 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, data la sua struttura; lasciamo perdere per un attimo 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 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
...
Javascript è stato predisposto per permettere al browser di parserizzare il file Xml che intende richiamare all'interno di una pagina Html pura, individuare i nodi e carpire i dati contenuti dai singoli elementi.
Per essere meno teorici ed astratti, questo articolo è corredato di un esempio pratico, strutturato in sola lettura, 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.

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 un 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, implementato col 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.
Richiamiamo il file Xml esterno con la stringa
<xml id="DSO_Amici" src="rubrica.xml"></xml>
assegnandogli un identificativo di lettura che servirà a Javascript per scorrerlo.
In fine utilizziamo un layer di testo come soluzione pratica per la stampa a video dei dati contenuti nei nodi Xml.

Lo script: il file "rubrica.js"

La cosa essenziale, in questo momento, non è pensare di implementare il codice Javascript punto e basta, è bene 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.

Propongo adesso 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:
  1. Dichiariamo la classe del DOM che inizializza la lettura
  2. Eseguiamo un ciclo che conta i record (nodi) presenti nel file Xml
  3. Andiamo a scorrere gli elementi e li richiamiamo ciclicamente
Conclusioni

L'esempio stilato fino a questo punto sa tanto di incompletezza, 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 posso, per i più esperti del settore, impartire qualche suggerimento atto a favorire lo sviluppo anche di questa fase del lavoro.
Non è importante il linguaggio con cui intendiamo colloquiare direttamente col server, certo, Asp sarebbe l'ideale data la provenienza di casa Microsoft, comunque limitiamoci ad analizzare le strade da percorrere.
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.
La seconda è quella di convertire in formato Xml i recordset di un database, preferibilmente di tipo ADO, su cui andiamo a scrivere direttamente.

I più cliccati della sezione Xml

:: Un motore di ricerca con Xml e Javascript (25.881)

:: Applicare un foglio di stile Xsl ad un file Xml (22.255)

:: Leggere un file Xml con l'oggetto XMLDOM (18.113)

:: Introduzione all'oggetto XMLHTTP (16.951)

:: Leggere un Feed RSS con PHP (14.623)

:: Scorrere i record di un file Xml con Javascript (14.517)

:: Leggere un file Xml con Php (12.863)

:: Un sistema di login in Javascript ed Xml (11.908)

:: Applicare un foglio di stile Css ad un file Xml (11.024)

:: Inserire dati in un file Xml con l'oggetto XMLDOM (11.015)

IN EVIDENZA
DOWNLOAD