INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Estrarre dati da un file Xml con Javascript

Autore: Luca Ruggiero | Tell a Friend
Corso XML
Creazione di strutture XML, XSL ed altri linguaggi eXtensible!

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:

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

IN EVIDENZA

Una slidegallery con jQuery Pagamenti online con PayPal e PHP Breve guida a jQuery Effetto ombra su testo con Photoshop Guadagna col tuo sito grazie a TradeD... Guida XHTML Riscrivere le URL con Asp Riavviare IIS HTTP 500 internal server error Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Introduzione ad Ajax ed Asp con Jscri... Referenze dei Tag Html Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript

HOT LINKS

Servizi per Webmaster E-Commerce News Manager Newsletter Corsi online eBooks PC Guadagna col sito Hosting 20 euro Reg. domini Email gratis FAX via email Tlefonare col PC ADSL Alice ADSL FastWeb