---
title: Costruire e decostruire un documento XML
slug: Costruire_e_decostruire_un_documento_XML
translation_of: Web/Guide/Parsing_and_serializing_XML
---
<p>Quest'articolo si propone di fornire una guida esaustiva per l'uso di XML per mezzo Javascript. Esso si divide in due sezioni. Nella <a href="#Costruire_DOM" title="Costruire un albero DOM">prima sezione</a> verranno illustrati tutti i possibili metodi per costruire un albero DOM, nella <a href="#Decostruire_DOM" title="Decostruire un albero DOM">seconda</a> invece si darà per scontato che <em>saremo già</em> in possesso di un albero DOM e il nostro scopo sarà quello di trattarne il contenuto.</p>
<h4 id="So_what.3F" name="So_what.3F">Che cos'è un albero DOM?</h4>
<p>Per albero DOM s'intende un'istanza di <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code>. Si tratta quindi di un oggetto Javascript e non è da confondere con una stringa di testo contenente il codice sorgente di un documento XML ancora da parsare.</p>
<p>DOM trees can be queried using <a href="/it/Usare_XPath" title="it/Usare_XPath">XPath</a> expressions, converted to strings or written to a local or remote files using <code>XMLSerializer</code> (without having to first convert to a string), POSTed to a web server (via <code><a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a></code>),</p>
<p>You can use DOM trees to model data which isn't well-suited for RDF (or perhaps you just don't like RDF). Another application is that, since XUL is XML, the UI of your application can be dynamically manipulated, downloaded, uploaded, saved, loaded, converted, or transformed quite easily.</p>
<p>Mozilla gestisce ampiamente <a href="/it/XML" title="it/XML">XML</a>. Sono gestite diverse Raccomandazioni e bozze del World Wide Web Consortium (<a class="external" href="http://w3c.org/">W3C</a>) per la famiglia XML, così come altre tecnologie relative. Tra le più importanti tecnologie native che Mozilla offre per lavorare con documenti XML sono da citare:</p>
<ul>
<li><a href="/it/XPath" title="it/XPath">XPath</a> per <strong>indirizzare parti diverse di un documento XM</strong>L,</li>
<li><a href="/it/XMLSerializer" title="it/XMLSerializer">XMLSerializer</a> per convertire <strong>alberi DOM in stringhe o files</strong>,</li>
<li><a href="/it/DOM/DOMParser" title="it/DOMParser">DOMParser</a> costruire un documento XML <strong>convertendo delle stringhe in alberi DOM</strong>,</li>
<li><a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a> per parsare <strong>a partire da file</strong> documenti XML in albero DOM. Sebbene anche le istanze di <code>DOMParser</code> abbiano un metodo chiamato <code>parseFromStream()</code>, è più facile utilizzare <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a> che lavore sia con file remoti (non confinati al solo protocollo HTTP) che con file locali,</li>
<li><a href="/it/XSLT" title="it/XSLT">XSLT</a> e <a href="/it/XLink" title="it/XLink">XLink</a> per <strong>manipolare il contenuto</strong> di un documento XML.</li>
</ul>
<p>È possibile comunque creare manualmente propri algoritmi per la serializzazione o la conversione di un documento XML, come si vedrà <a href="#JXON" title="Vai alla sezione su JXON">in seguito.</a></p>
<h2 id="Prima_parte_costruire_un_albero_DOM">Prima parte: costruire un albero DOM</h2>
<p>Come precedentemente accennato, in questa prima sezione il nostro scopo sarà quello di ottenere un albero DOM.</p>
<p>Un albero DOM è un oggetto (e precisamente un'istanza di <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code>). Ci sono molti modi per costruirlo o ottenerlo, a seconda delle proprie esigenze. Di seguito verranno elencate varie strade: a partire da una stringa di codice sorgente, a partire da file o a partire da strutture di differente natura.</p>
<h3 id="Creare_dinamicamente_un_albero_DOM">Creare dinamicamente un albero DOM</h3>
<p>Questo paragrafo illustra come utilizzare l'API JavaScript <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">W3C DOM</a> per creare e modificare oggetti DOM. Essa è attiva in tutte le applicazioni <em>Gecko-based</em> (come Firefox, per esempio) sia in <em>privileged code</em> (estensioni) che in <em>unprivileged code</em> (pagine internet).</p>
<h4 id="Dynamically_creating_a_DOM_tree" name="Dynamically_creating_a_DOM_tree">Scrivendolo a mano</h4>
<p>L'API JavaScript <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">W3C DOM</a>, supportata da Mozilla, può essere invocata manualmente.</p>
<p>Si consideri il seguente documento XML:</p>
<pre class="brush: xml"><?xml version="1.0"?>
<people>
<person first-name="eric" middle-initial="H" last-name="jung">
<address street="321 south st" city="denver" state="co" country="usa" />
<address street="123 main st" city="arlington" state="ma" country="usa" />
</person>
<person first-name="jed" last-name="brown">
<address street="321 north st" city="atlanta" state="ga" country="usa" />
<address street="123 west st" city="seattle" state="wa" country="usa" />
<address street="321 south avenue" city="denver" state="co" country="usa" />
</person>
</people>
</pre>
<p>Grazie all'API <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">W3C DOM</a> è possibile creare una rappresentazione di esso come la seguente, presente unicamente nella memoria dell'interprete:</p>
<pre class="brush: js">var doc = document.implementation.createDocument("", "", null);
var peopleElem = doc.createElement("people");
var personElem1 = doc.createElement("person");
personElem1.setAttribute("first-name", "eric");
personElem1.setAttribute("middle-initial", "h");
personElem1.setAttribute("last-name", "jung");
var addressElem1 = doc.createElement("address");
addressElem1.setAttribute("street", "321 south st");
addressElem1.setAttribute("city", "denver");
addressElem1.setAttribute("state", "co");
addressElem1.setAttribute("country", "usa");
personElem1.appendChild(addressElem1);
var addressElem2 = doc.createElement("address");
addressElem2.setAttribute("street", "123 main st");
addressElem2.setAttribute("city", "arlington");
addressElem2.setAttribute("state", "ma");
addressElem2.setAttribute("country", "usa");
personElem1.appendChild(addressElem2);
var personElem2 = doc.createElement("person");
personElem2.setAttribute("first-name", "jed");
personElem2.setAttribute("last-name", "brown");
var addressElem3 = doc.createElement("address");
addressElem3.setAttribute("street", "321 north st");
addressElem3.setAttribute("city", "atlanta");
addressElem3.setAttribute("state", "ga");
addressElem3.setAttribute("country", "usa");
personElem2.appendChild(addressElem3);
var addressElem4 = doc.createElement("address");
addressElem4.setAttribute("street", "123 west st");
addressElem4.setAttribute("city", "seattle");
addressElem4.setAttribute("state", "wa");
addressElem4.setAttribute("country", "usa");
personElem2.appendChild(addressElem4);
var addressElem5 = doc.createElement("address");
addressElem5.setAttribute("street", "321 south avenue");
addressElem5.setAttribute("city", "denver");
addressElem5.setAttribute("state", "co");
addressElem5.setAttribute("country", "usa");
personElem2.appendChild(addressElem5);
peopleElem.appendChild(personElem1);
peopleElem.appendChild(personElem2);
doc.appendChild(peopleElem);
</pre>
<p>Si veda anche <a href="/en/XUL_Tutorial/Document_Object_Model" title="en/XUL_Tutorial/Document_Object_Model">Il capitolo sul DOM del Tutorial XUL</a> (in inglese).</p>
<h4 id="Automatizzando_la_creazione_dinamica_dell'albero_DOM">Automatizzando la creazione dinamica dell'albero DOM</h4>
<p>L'invocazione dell'API Javascript <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">W3C DOM</a>, può essere anche automatizzata.</p>
<p>Non esiste un metodo unico per automatizzare la creazione di un documento XML. Esso dipende molto dal tipo di dati che andremo a scrivere. In ogni caso, per vederne un possibile esempio, si vada all'<a href="#JXON_algoritmi_inversi" title="JXON – Appendice">ultimo paragrafo</a> del <a href="#JXON" title="Convertire un foglio XML in un albero di oggetti Javascript (JXON)">capitolo su JXON</a>.</p>
<h3 id="Costruire_un_albero_DOM_XML_a_partire_da_stringhe_di_codice_sorgente">Costruire un albero DOM XML a partire da stringhe di codice sorgente</h3>
<p>Il seguente esempio mostra la costruzione di un albero DOM tramite <em>parsing</em> di un codice sorgente.</p>
<pre class="brush: js">var sSource = "<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>";
var oParser = new DOMParser();
var oDOM = oParser.parseFromString(sSource, "text\/xml");
// print the name of the root element or error message
dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);</pre>
<p><a class="external" href="http://www.van-steenbeek.net/?q=explorer_domparser_parsefromstring">Tutorial su come rendere questo codice cross browser</a> (in inglese)</p>
<h3 id="Costruire_un_albero_DOM_a_partire_da_un_file">Costruire un albero DOM a partire da un file</h3>
<p>Preambolo da stendere.</p>
<h4 id="Usando_DOMParser">Usando <code>DOMParser</code></h4>
<p>Ciascuna istanza di <code>DOMParser</code> possiede diversi metodi per parsare un documento XML a partire da un file. È possibile fare ricorso a <code>parseFromStream()</code>:</p>
<pre class="brush: js">function loadXMLFile (sFile) {
var oIOServ = Components.classes["@mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService);
var oChannel = oIOServ.newChannel(sFile,null,null);
var oStream = oChannel.open();
// alert("oStream.available() = " + oStream.available()); // debug
var parser = new DOMParser();
doc = parser.parseFromStream(oStream, "", oStream.available(),"text/xml");
// alert("doc=" + doc); // debug
oStream.close();
return doc;
}
// alert(loadXMLFile("file:///home/john/hello.xml"));
</pre>
<p>oppure utilizzare <code>parseFromBuffer()</code>:</p>
<pre class="brush: js">// Esempio mancante</pre>
<p>In ogni caso il metodo più pratico per accedere al contenuto di un file XML resta <em>ajax</em>, per l'uso del quale si rimanda al prossimo paragrafo.</p>
<h4 id="Usando_XMLHttpRequest">Usando <code>XMLHttpRequest</code></h4>
<p>Come già precedentemente accennato, sebbene ciascuna istanza di <code>DOMParser</code> possegga un metodo chiamato <code>parseFromStream()</code>, è più facile utilizzare <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a> per parsare documenti XML in alberi DOM (<code>XMLHttpRequest</code> funziona bene sia in locale che in remoto). Di seguito c'è un codice di esempio che legge e parsa in un albero DOM un file XML locale:</p>
<pre class="brush: js">var oReq = new XMLHttpRequest();
oReq.open("GET", "chrome://passwdmaker/content/people.xml", false);
oReq.send(null);
// print the name of the root element or error message
var oDOM = oReq.responseXML;
dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);
</pre>
<p>N.B. Il metodo <code>responseXML</code> è sempre un'istanza di <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code> – e di conseguenza un <em>oggetto</em> – a differenza del metodo <code>responseText</code>, che è sempre un <em>valore primario</em> (una stringa).</p>
<h4 id="Usando_l'elemento_HTMLElement(object)_.">Usando l'elemento {{ HTMLElement("object") }}.</h4>
<p>Di seguito è presentata un'altra via possibile per parsare un file XML in un albero DOM: usando il tag {{ HTMLElement("object") }}. Prima di lanciare il seguente esempio è necessario creare un file XML chiamato <code>purchase_order.xml</code> e contenente un albero simile a questo:</p>
<p>purchase_order.xml</p>
<pre class="brush: xml"><?xml version="1.0"?>
<purchaseOrder xmlns="http://example.mozilla.org/PurchaseOrderML">
<lineItem>
<name>Line Item 1</name>
<price>1.25</price>
</lineItem>
<lineItem>
<name>Line Item 2</name>
<price>2.48</price>
</lineItem>
</purchaseOrder>
</pre>
<p>Adesso proviamo a lanciare il nostro esempio:</p>
<pre class="brush: html"><!doctype html>
<html>
<head>
<title>XML Data Block Demo</title>
<script>
function runDemo() {
var doc = document.getElementById("purchase-order").contentDocument;
var lineItems = doc.getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "lineItem");
var firstPrice = lineItems[0].getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "price")[0].textContent;
document.getElementById("output-box").textContent = "The purchase order contains " + lineItems.length + " line items. The price of the first line item is " + firstPrice + ".";
}
</script>
</head>
<body onload="runDemo()";>
<object id="purchase-order" data="purchase_order.xml" type="text/xml" style="display: none;"></object>
<div id="output-box">Demo did not run</div>
</body>
</html>
</pre>
<p>Per ulteriori approfondimenti, si rimanda all'articolo: <a href="/it/Usare_le_XML_Data_Islands_in_Mozilla" title="it/Usare_le_XML_Data_Islands_in_Mozilla">Usare le XML Data Islands in Mozilla</a>.</p>
<h2 id="Seconda_parte_decostruire_un_albero_DOM">Seconda parte: decostruire un albero DOM</h2>
<p>Da adesso in poi daremo per scontato il fatto che <em>abbiamo già</em> un albero DOM nella memoria dell'interprete Javascript e che il nostro scopo è quello di utilizzare tale istanza di <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code> nei modi più disparati.</p>
<h3 id="Convertire_un_documento_XML_in_stringhe_di_codice_sorgente">Convertire un documento XML in stringhe di codice sorgente</h3>
<p>L'esempio seguente mostra come ottenere dalla variabile <code>doc</code> — il nostro albero DOM — una stringa contenente l'intero suo codice sorgente:</p>
<pre class="brush: js">var oSerializer = new XMLSerializer();
var sXML = oSerializer.serializeToString(doc);
</pre>
<p>Non è possibile creare un istanza di <code>XMLSerializer</code> (ovvero lanciare: <code>new XMLSerializer()</code>) dall'interno di un componente JS XPCOM o dall'interno di un <a class="internal" href="/it/Moduli_di_codice_JavaScript" title="it/Moduli_di_codice_JavaScript">modulo</a>. Per farlo bisogna lanciare:</p>
<pre class="brush: js">var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"].createInstance(Components.interfaces.nsIDOMSerializer);
var sXML = oSerializer.serializeToString(doc);
</pre>
<h4 id="Come_ottenere_stringhe_di_codice_sorgente_di_facile_lettura">Come ottenere stringhe di codice sorgente di facile lettura</h4>
<p>You can <a class="external" href="http://en.wikipedia.org/wiki/Pretty-print">pretty print</a> a DOM tree using <code>XMLSerializer</code> and <a href="/it/E4X" title="it/E4X">E4X</a>. First, create a DOM tree as described in the <a href="/it/Come_creare_un_albero_DOM" title="it/Come_creare_un_albero_DOM">Come creare un albero DOM</a> article. Alternatively, use a DOM tree obtained from <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a>. We assume it's in the <code>doc</code> variable.</p>
<pre class="brush: js">var oSerializer = new XMLSerializer();
var sPrettyXML = XML(oSerializer.serializeToString(doc)).toXMLString();</pre>
<p>Indents are provided with two spaces. You can, of course, use <a href="/it/DOM/treeWalker" title="it/DOM/treeWalker">DOM:treeWalker</a> to write your own, more performant version which also has the advantage that you can customize the indent string to be whatever you like.</p>
<p><strong>Note:</strong> When using the E4X <code>toXMLString</code> method your <strong>CDATA elements will be lost</strong> and only the containing text remains. So using the above method might not be useful if you have CDATA elements in your XML.</p>
<pre class="brush: xml"><content><![CDATA[This is the content]]></content></pre>
<p>Will become</p>
<pre class="brush: xml"><content>This is the content</content></pre>
<h3 id="Convertire_un_foglio_XML_in_un_albero_di_oggetti_Javascript_(JXON)">Convertire un foglio XML in un albero di oggetti Javascript (JXON)</h3>
<p>JXON (lossless <strong>J</strong>avascript <strong>X</strong>ML <strong>O</strong>bject <strong>N</strong>otation) è un nome generico col quale viene definita la rappresentazione di oggetti Javascript in linguaggio XML. Non esistono veri e propri standard per questa rappresentazione, ma da poco tempo a questa parte cominciano ad affacciarsi in rete alcune convenzioni.</p>
<p>JXON non è un metodo per indirizzare poche parti di un documento XML, dato che il suo punto di forza è la conversione per intero di un albero DOM. Se il nostro scopo è quello di accedere a delle informazioni limitate di un albero DOM, si raccomanda vivamente di <a href="/it/Usare_XPath" title="it/Usare_XPath">Usare XPath</a>.</p>
<p>Ci sono casi invece in cui un documento XML è costruito in maniera tale da avere come principale destinatario del proprio contenuto proprio l'interprete Javascript. In tal caso JXON si presenta come la via migliore.</p>
<p>Per tutto questo capitolo immagineremo di aver parsato, come al solito nella nostra variabile <code>doc</code>, questo documento XML di esempio:</p>
<h5 id="esempio.xml">esempio.xml</h5>
<pre class="brush: xml"><?xml version="1.0"?>
<!DOCTYPE catalog SYSTEM "catalog.dtd">
<catalog>
<product description="Cardigan Sweater">
<catalog_item gender="Men's">
<item_number>QWZ5671</item_number>
<price>39.95</price>
<size description="Medium">
<color_swatch image="red_cardigan.jpg">Red</color_swatch>
<color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch>
</size>
<size description="Large">
<color_swatch image="red_cardigan.jpg">Red</color_swatch>
<color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch>
</size>
</catalog_item>
<catalog_item gender="Women's">
<item_number>RRX9856</item_number>
<discount_until>Dec 25, 1995</discount_until>
<price>42.50</price>
<size description="Medium">
<color_swatch image="black_cardigan.jpg">Black</color_swatch>
</size>
</catalog_item>
</product>
<script type="text/javascript"><![CDATA[function matchwo(a,b) {
if (a < b && a < 0) { return 1; }
else { return 0; }
}]]></script>
</catalog>
</pre>
<p>Adesso proveremo a ottenere una rappresentazione della variabile <code>doc</code> — l'albero DOM — attraverso un albero di oggetti Javascript (per approfondire si leggano le guide su <a href="/it/JavaScript/Guida/Lavorare_con_gli_oggetti" title="Lavorare con gli oggetti">come lavorare con gli oggetti</a> e su <a href="/it/Introduzione_al_carattere_Object-Oriented_di_JavaScript" title="Introduzione al carattere Object-Oriented di JavaScript">come Javascript sia <em>Object-Oriented</em></a>). Per far ciò potremo utilizzare diversi algoritmi di conversione.</p>
<p>Per semplicità gli algoritmi qui proposti (si veda: <a href="#Algoritmo_JXON_1" title="Vai all'algoritmo JXON #1">#1</a>, <a href="#Algoritmo_JXON_2" title="Vai all'algoritmo JXON #2">#2</a>, <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">#3</a>, <a href="#Algoritmo_JXON_4" title="Vai all'algoritmo JXON #4">#4</a>) prenderanno in considerazione unicamente i seguenti tipi di nodi e i loro attributi:</p>
<ol>
<li><code>Document</code> (solo come argomento della funzione),</li>
<li><code>DocumentFragment</code> (solo come argomento della funzione),</li>
<li><code>Element</code>,</li>
<li><code>Text</code> (mai come argomento della funzione),</li>
<li><code>CDATASection</code> (mai come argomento della funzione).</li>
</ol>
<p>Si tratta di un buon compromesso per un uso Javascript, dacché la gran parte delle informazioni di un documento XML è contenuta in questo tipo di nodi. Ogni altra informazione (come processing instructions, xml schemas, commenti, etc.) andrà persa. Allo scopo di evitare conflitti, la lettura dei nomi dei nodi e dei loro attributi è <em>case insensitive</em> (resa sempre in <em>minuscolo</em>) e di conseguenza le proprietà locali dell'albero di oggetti così ottenuto, aggiunte via JavaScript, dovranno avere sempre un qualche tipo di lettera maiuscola al loro interno (per evitare di sovrascrivere le proprietà ottenute dal foglio XML), come si può vedere di seguito. I seguenti algoritmi sono liberamente basati sulla <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker, versione 0.4</a>, che prevede il riconoscimento del <code>typeof</code> del contenuto di testo di ogni singolo nodo letto.</p>
<h4 id="Algoritmo_1_una_via_prolissa">Algoritmo #1: una via prolissa</h4>
<p>Questo semplice costruttore ricorsivo converte un albero DOM XML in un albero di oggetti Javascript. Il contenuto di testo di ogni nodo sarà salvato all'interno della proprietà <code>keyValue</code>, mentre i <code>nodeAttributes</code>, se esistono, saranno annidati come proprietà dell'oggetto-figlio <code>keyAttributes</code>. L'argomento del costruttore potrà essere l'intero <code>Document</code>, un <code>DocumentFragment</code> o, più semplicemente, un nodo di tipo <code>Element</code> di esso.</p>
<pre class="brush: js">function buildValue(sValue) {
if (/^\s*$/.test(sValue)) { return null; }
if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
if (isFinite(sValue)) { return parseFloat(sValue); }
if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
return sValue;
}
function JXONData (oXMLParent) {
var nAttrLen = 0, nLength = 0, sCollectedTxt = "";
// children
if (oXMLParent.hasChildNodes()) {
for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId < oXMLParent.childNodes.length; nChildId++) {
oItChild = oXMLParent.childNodes.item(nChildId);
if ((oItChild.nodeType + 1 | 1) === 5) { sCollectedTxt += oItChild.nodeType === 3 ? oItChild.nodeValue.replace(/^\s+|\s+$/g, "") : oItChild.nodeValue; } // nodeType is "Text" (3) or "CDATASection" (4)
else if (oItChild.nodeType === 1 && !oItChild.prefix) { // nodeType is "Element" (1)
sItKey = oItChild.nodeName.toLowerCase();
sItVal = new JXONData(oItChild);
if (this.hasOwnProperty(sItKey)) {
if (this[sItKey].constructor !== Array) { this[sItKey] = [this[sItKey]]; }
this[sItKey].push(sItVal);
} else { this[sItKey] = sItVal; nLength++; }
}
}
this.keyValue = buildValue(sCollectedTxt);
} else { this.keyValue = null; }
// node attributes
if (oXMLParent.hasAttributes()) {
var oItAttr;
this.keyAttributes = {};
for (nAttrLen; nAttrLen < oXMLParent.attributes.length; nAttrLen++) {
oItAttr = oXMLParent.attributes.item(nAttrLen);
this.keyAttributes[oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue);
}
}
// optional properties and methods; you could safely adjoust/remove them...
this.keyLength = nLength;
this.attributesLength = nAttrLen;
// this.DOMNode = oXMLParent;
this.valueOf = function() { return this.keyValue; };
this.toString = function() { return String(this.keyValue); };
this.getItem = function(nItem) {
if (nLength === 0) { return null; }
var iItem = 0;
for (var sKeyName in this) { if (iItem === nItem) { return this[sKeyName]; } iItem++; }
return null;
};
this.getAttribute = function(nAttrib) {
if (nAttrLen === 0 || nAttrib + 1 > nAttrLen) { return null; }
var nItAttr = 0;
for (var sAttrName in this.keyAttributes) { if (nItAttr === nAttrib) { return this.keyAttributes[sAttrName]; } nItAttr++; }
return null;
};
this.hasChildren = function() { return this.keyLength > 0; };
}
var myObject = new JXONData(doc);
// abbiamo ottenuto il nostro albero di oggetti Javascript! provare per credere: alert(JSON.stringify(myObject));
</pre>
<p>Con questo algoritmo <a href="#XML_di_esempio" title="Go to the sample XML document">il nostro esempio</a> diventerà:</p>
<pre class="brush: js">{
"catalog": {
"product": {
"catalog_item": [{
"item_number": {
"keyValue": "QWZ5671",
"keyLength": 0,
"attributesLength": 0
},
"price": {
"keyValue": 39.95,
"keyLength": 0,
"attributesLength": 0
},
"size": [{
"color_swatch": [{
"keyValue": "Red",
"keyAttributes": {
"image": "red_cardigan.jpg"
},
"keyLength": 0,
"attributesLength": 1
}, {
"keyValue": "Burgundy",
"keyAttributes": {
"image": "burgundy_cardigan.jpg"
},
"keyLength": 0,
"attributesLength": 1
}],
"keyValue": null,
"keyAttributes": {
"description": "Medium"
},
"keyLength": 1,
"attributesLength": 1
}, {
"color_swatch": [{
"keyValue": "Red",
"keyAttributes": {
"image": "red_cardigan.jpg"
},
"keyLength": 0,
"attributesLength": 1
}, {
"keyValue": "Burgundy",
"keyAttributes": {
"image": "burgundy_cardigan.jpg"
},
"keyLength": 0,
"attributesLength": 1
}],
"keyValue": null,
"keyAttributes": {
"description": "Large"
},
"keyLength": 1,
"attributesLength": 1
}],
"keyValue": null,
"keyAttributes": {
"gender": "Men's"
},
"keyLength": 3,
"attributesLength": 1
}, {
"item_number": {
"keyValue": "RRX9856",
"keyLength": 0,
"attributesLength": 0
},
"discount_until": {
"keyValue": new Date(1995, 11, 25),
"keyLength": 0,
"attributesLength": 0
},
"price": {
"keyValue": 42.5,
"keyLength": 0,
"attributesLength": 0
},
"size": {
"color_swatch": {
"keyValue": "Black",
"keyAttributes": {
"image": "black_cardigan.jpg"
},
"keyLength": 0,
"attributesLength": 1
},
"keyValue": null,
"keyAttributes": {
"description": "Medium"
},
"keyLength": 1,
"attributesLength": 1
},
"keyValue": null,
"keyAttributes": {
"gender": "Women's"
},
"keyLength": 4,
"attributesLength": 1
}],
"keyValue": null,
"keyAttributes": {
"description": "Cardigan Sweater"
},
"keyLength": 1,
"attributesLength": 1
},
"script": {
"keyValue": "function matchwo(a,b) {\n if (a < b && a < 0) { return 1; }\n else { return 0; }\n}",
"keyAttributes": {
"type": "text/javascript"
},
"keyLength": 0,
"attributesLength": 1
},
"keyValue": null,
"keyLength": 2,
"attributesLength": 0
},
"keyValue": null,
"keyLength": 1,
"attributesLength": 0
}
</pre>
<p>È un approccio raccomandato nel caso in cui ci sia completamente ignota la struttura del documento XML che andremo a leggere.</p>
<h4 id="Algoritmo_2_una_via_un_po'_meno_prolissa">Algoritmo #2: una via un po' meno prolissa</h4>
<p>Quello che segue è un altro, più semplice, metodo di conversione. Dove i <code>nodeAttributes</code> saranno annidati nello stesso oggetto contenente la trascrizione dei nodi figli sebbene, a differenza di quelli, questi saranno contrassegnati dal prefisso “<code>@</code>”. Come sopra, il contenuto di testo di ciascun nodo sarà affidato alla proprietà <code>keyValue</code>. L'argomento del costruttore potrà essere l'intero <code>Document</code>, un <code>DocumentFragment</code> o, più semplicemente, un nodo di tipo <code>Element</code> di esso.</p>
<pre class="brush: js">function buildValue(sValue) {
if (/^\s*$/.test(sValue)) { return null; }
if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
if (isFinite(sValue)) { return parseFloat(sValue); }
if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
return sValue;
}
function JXONData (oXMLParent) {
if (oXMLParent.hasChildNodes()) {
var sCollectedTxt = "";
for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId < oXMLParent.childNodes.length; nChildId++) {
oItChild = oXMLParent.childNodes.item(nChildId);
if ((oItChild.nodeType + 1 | 1) === 5) { sCollectedTxt += oItChild.nodeType === 3 ? oItChild.nodeValue.replace(/^\s+|\s+$/g, "") : oItChild.nodeValue; }
else if (oItChild.nodeType === 1 && !oItChild.prefix) {
sItKey = oItChild.nodeName.toLowerCase();
sItVal = new JXONData(oItChild);
if (this.hasOwnProperty(sItKey)) {
if (this[sItKey].constructor !== Array) { this[sItKey] = [this[sItKey]]; }
this[sItKey].push(sItVal);
} else { this[sItKey] = sItVal; }
}
}
if (sCollectedTxt) { this.keyValue = buildValue(sCollectedTxt); }
}
if (oXMLParent.hasAttributes()) {
var oItAttr;
for (var iAttrId = 0; iAttrId < oXMLParent.attributes.length; iAttrId++) {
oItAttr = oXMLParent.attributes.item(iAttrId);
this["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue);
}
}
}
var myObject = new JXONData(doc);
// abbiamo ottenuto il nostro albero di oggetti Javascript! provare per credere: alert(JSON.stringify(myObject));
</pre>
<p>Con questo algoritmo <a href="#XML_di_esempio" title="Go to the sample XML document">il nostro esempio</a> diventerà:</p>
<pre class="brush: js">{
"catalog": {
"product": {
"catalog_item": [{
"item_number": {
"keyValue": "QWZ5671"
},
"price": {
"keyValue": 39.95
},
"size": [{
"color_swatch": [{
"keyValue": "Red",
"@image": "red_cardigan.jpg"
}, {
"keyValue": "Burgundy",
"@image": "burgundy_cardigan.jpg"
}],
"@description": "Medium"
}, {
"color_swatch": [{
"keyValue": "Red",
"@image": "red_cardigan.jpg"
}, {
"keyValue": "Burgundy",
"@image": "burgundy_cardigan.jpg"
}],
"@description": "Large"
}],
"@gender": "Men's"
}, {
"item_number": {
"keyValue": "RRX9856"
},
"discount_until": {
"keyValue": new Date(1995, 11, 25)
},
"price": {
"keyValue": 42.5
},
"size": {
"color_swatch": {
"keyValue": "Black",
"@image": "black_cardigan.jpg"
},
"@description": "Medium"
},
"@gender": "Women's"
}],
"@description": "Cardigan Sweater"
},
"script": {
"keyValue": "function matchwo(a,b) {\n if (a < b && a < 0) { return 1; }\n else { return 0; }\n}",
"@type": "text/javascript"
}
}
}
</pre>
<p>È un approccio possibile nel caso in cui ci sia parzialmente nota la struttura del documento XML che andremo a leggere.</p>
<h4 id="Algoritmo_3_una_via_sintetica">Algoritmo #3: una via sintetica</h4>
<p>Ora proveremo un altro metodo di conversione. Questo algoritmo è quello che si avvicina di più alla <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker</a>. Esso è molto simile al precedente, eccetto che per il fatto che i nodi che non contengono alcun nodo-figlio di tipo <code>Element</code>, ma solo nodi-figli di tipo <code>Text</code> e/o <code>CDATASection</code>, non saranno rappresentati da oggetti, ma direttamente da booleani, numeri, stringhe o istanze del costruttore <code>Date</code> (si veda la <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker</a>). La rappresentazione dei nodi completamente vuoti invece (cioè che non contengono né nodi di tipo <code>Element</code>, né nodi di tipo <code>Text</code>, né nodi di tipo <code>CDATASection</code>) avranno come valore predefinito <code>true</code> (su questo punto si vedano le <a href="#JXON_considerazioni" title="Considerazioni sul codice">Considerazioni sul codice</a>). Inoltre questa volta non si è ricorso a un costruttore, ma a una funzione. L'argomento della funzione potrà essere l'intero <code>Document</code>, un <code>DocumentFragment</code> o, più semplicemente, un nodo di tipo <code>Element</code> di esso.</p>
<p>In molti casi questo rappresenta il metodo di conversione più pratico.</p>
<pre class="brush: js">function buildValue(sValue) {
if (/^\s*$/.test(sValue)) { return null; }
if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
if (isFinite(sValue)) { return parseFloat(sValue); }
if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
return sValue;
}
function getJXONData (oXMLParent) {
var vResult = /* put here the default value for empty nodes! */ true, nLength = 0, sCollectedTxt = "";
if (oXMLParent.hasAttributes()) {
vResult = {};
for (nLength; nLength < oXMLParent.attributes.length; nLength++) {
oItAttr = oXMLParent.attributes.item(nLength);
vResult["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue.replace(/^\s+|\s+$/g, ""));
}
}
if (oXMLParent.hasChildNodes()) {
for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId < oXMLParent.childNodes.length; nChildId++) {
oItChild = oXMLParent.childNodes.item(nChildId);
if (oItChild.nodeType === 4) { sCollectedTxt += oItChild.nodeValue; } /* nodeType is "CDATASection" (4) */
else if (oItChild.nodeType === 3) { sCollectedTxt += oItChild.nodeValue.replace(/^\s+|\s+$/g, ""); } /* nodeType is "Text" (3) */
else if (oItChild.nodeType === 1 && !oItChild.prefix) { /* nodeType is "Element" (1) */
if (nLength === 0) { vResult = {}; }
sItKey = oItChild.nodeName.toLowerCase();
sItVal = getJXONData(oItChild);
if (vResult.hasOwnProperty(sItKey)) {
if (vResult[sItKey].constructor !== Array) { vResult[sItKey] = [vResult[sItKey]]; }
vResult[sItKey].push(sItVal);
} else { vResult[sItKey] = sItVal; nLength++; }
}
}
}
if (sCollectedTxt) { nLength > 0 ? vResult.keyValue = buildValue(sCollectedTxt) : vResult = buildValue(sCollectedTxt); }
/* if (nLength > 0) { Object.freeze(vResult); } */
return vResult;
}
var myObject = getJXONData(doc);
// abbiamo ottenuto il nostro albero di oggetti Javascript! provare per credere: alert(JSON.stringify(myObject));
</pre>
<div class="note"><strong>Nota:</strong> Se si vuole <em>congelare</em> l'intero oggetto (a causa della natura "statica" di un documento XML), decommentare la stringa: <code>/* if (nLength > 0) { Object.freeze(vResult); } */</code>. Il metodo <code><a href="/it/Javascript/Glossario/Oggetti_globali/Object/freeze" title="/it/Javascript/Glossario/Oggetti_globali/Object/freeze">Object.freeze</a></code> vieta l'aggiunta di nuove proprietà e la rimozione delle proprietà esistenti, congelando la loro enumerabilità, la loro configurabilità o la loro scrivibilità. In sostanza l'oggetto è reso effettivamente immutabile.</div>
<p>Con questo algoritmo <a href="#XML_di_esempio" title="Go to the sample XML document">il nostro esempio</a> diventerà:</p>
<pre class="brush: js">{
"catalog": {
"product": {
"@description": "Cardigan Sweater",
"catalog_item": [{
"@gender": "Men's",
"item_number": "QWZ5671",
"price": 39.95,
"size": [{
"@description": "Medium",
"color_swatch": [{
"@image": "red_cardigan.jpg",
"keyValue": "Red"
}, {
"@image": "burgundy_cardigan.jpg",
"keyValue": "Burgundy"
}]
}, {
"@description": "Large",
"color_swatch": [{
"@image": "red_cardigan.jpg",
"keyValue": "Red"
}, {
"@image": "burgundy_cardigan.jpg",
"keyValue": "Burgundy"
}]
}]
}, {
"@gender": "Women's",
"item_number": "RRX9856",
"discount_until": new Date(1995, 11, 25),
"price": 42.5,
"size": {
"@description": "Medium",
"color_swatch": {
"@image": "black_cardigan.jpg",
"keyValue": "Black"
}
}
}]
},
"script": {
"@type": "text/javascript",
"keyValue": "function matchwo(a,b) {\n if (a < b && a < 0) { return 1; }\n else { return 0; }\n}"
}
}
}
</pre>
<p>È un approccio raccomandato nel caso in cui ci sia nota la struttura del documento XML che andremo a leggere.</p>
<h4 id="Algoritmo_4_una_via_davvero_minimalista">Algoritmo #4: una via davvero minimalista</h4>
<p>La seguente rappresenta un'altra possibile via di conversione. Anch'essa è molto vicina alla <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker</a>. Con questo algoritmo la rappresentazione dei nodi di tipo <code>Element</code> che contengono a loro volta sullo stesso piano nodi-figli di tipo <code>Element</code> insieme con nodi-figli di tipo <code>Text</code> e/o di tipo <code>CDATASection</code> verrà resa per mezzo di istanze dei costruttori <code>Boolean</code>, <code>Number</code>, <code>String</code>, e <code>Date</code>. E di conseguenza la trascrizione di ogni eventuale nodo-figlio sarà annidata in oggetti di questo tipo.</p>
<p>Per esempio;</p>
<pre class="brush: xml"><employee type="usher">John Smith</employee>
<manager>Lisa Carlucci</manager>
</pre>
<p>diventerà</p>
<pre class="brush: js">var myObject = {
"employee": new String("John Smith"),
"manager": "Lisa Carlucci"
};
myObject.employee["@type"] = "usher";
// test
alert(myObject.manager); // "Lisa Carlucci"
alert(myObject.employee["@type"]); // "usher"
alert(myObject.employee); // "John Smith"
</pre>
<p>Come per il terzo algoritmo, i nodi che non contengono alcun nodo-figlio di tipo <code>Element</code>, ma solo nodi-figli di tipo <code>Text</code> e/o <code>CDATASection</code>, non saranno rappresentati da oggetti, ma direttamente da booleani, numeri, stringhe (valori primitivi) o da istanze del costruttore <code>Date</code> (si veda la <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker</a>). Come per il terzo algoritmo, non si è usato un costruttore, ma una semplice funzione. L'argomento della funzione potrà essere l'intero <code>Document</code>, un <code>DocumentFragment</code> o, più semplicemente, un nodo di tipo <code>Element</code> di esso.</p>
<pre class="brush: js">function buildValue (sValue) {
if (/^\s*$/.test(sValue)) { return null; }
if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
if (isFinite(sValue)) { return parseFloat(sValue); }
if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
return sValue;
}
function objectify (vValue) {
if (vValue === null) {
return new (function() {
this.toString = function() { return "null"; }
this.valueOf = function() { return null; }
})();
}
return vValue instanceof Object ? vValue : new vValue.constructor(vValue);
}
var aTmpEls = []; // loaded element nodes cache
function getJXONData (oXMLParent) {
var sItKey, sItVal, vResult, nLength = 0, nLevelStart = aTmpEls.length,
nChildren = oXMLParent.hasChildNodes() ? oXMLParent.childNodes.length : 0, sCollectedTxt = "";
for (var oItChild, nChildId = 0; nChildId < nChildren; nChildId++) {
oItChild = oXMLParent.childNodes.item(nChildId);
if (oItChild.nodeType === 4) { sCollectedTxt += oItChild.nodeValue; } /* nodeType is "CDATASection" (4) */
else if (oItChild.nodeType === 3) { sCollectedTxt += oItChild.nodeValue.replace(/^\s+|\s+$/g, ""); } /* nodeType is "Text" (3) */
else if (oItChild.nodeType === 1 && !oItChild.prefix) { aTmpEls.push(oItChild); } /* nodeType is "Element" (1) */
}
var nLevelEnd = aTmpEls.length, vBuiltVal = buildValue(sCollectedTxt);
if (oXMLParent.hasAttributes()) {
vResult = objectify(vBuiltVal);
for (nLength; nLength < oXMLParent.attributes.length; nLength++) {
oItAttr = oXMLParent.attributes.item(nLength);
vResult["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue.replace(/^\s+|\s+$/g, ""));
}
} else if (nLevelEnd > nLevelStart) { vResult = objectify(vBuiltVal); }
for (var nElId = nLevelStart; nElId < nLevelEnd; nElId++) {
sItKey = aTmpEls[nElId].nodeName.toLowerCase();
sItVal = getJXONData(aTmpEls[nElId]);
if (vResult.hasOwnProperty(sItKey)) {
if (vResult[sItKey].constructor !== Array) { vResult[sItKey] = [vResult[sItKey]]; }
vResult[sItKey].push(sItVal);
} else { vResult[sItKey] = sItVal; nLength++; }
}
aTmpEls.length = nLevelStart;
if (nLength === 0) { vResult = sCollectedTxt ? vBuiltVal : /* put here the default value for empty nodes: */ true; }
/* else { Object.freeze(vResult); } */
return vResult;
}
var myObject = getJXONData(doc);
alert(myObject.catalog.product.catalog_item[1].size.color_swatch["@image"]); // "black_cardigan.jpg"
alert(myObject.catalog.product.catalog_item[1].size.color_swatch); // "Black" !</pre>
<div class="note"><strong>Nota:</strong> Se si vuole <em>congelare</em> l'intero oggetto (a causa della natura "statica" di un documento XML), decommentare la stringa: <code>/* else { Object.freeze(vResult); } */</code> . Il metodo <code><a href="/it/Javascript/Glossario/Oggetti_globali/Object/freeze" title="/it/Javascript/Glossario/Oggetti_globali/Object/freeze">Object.freeze</a></code> vieta l'aggiunta di nuove proprietà e la rimozione delle proprietà esistenti, congelando la loro enumerabilità, la loro configurabilità o la loro scrivibilità. In sostanza l'oggetto è reso effettivamente immutabile.</div>
<p>È un approccio possibile nel caso in cui ci sia nota la struttura del documento XML che andremo a leggere.</p>
<h4 id="Algoritmi_inversi">Algoritmi inversi</h4>
<p>È possibile invertire gli algoritmi qui proposti in maniera tale da ottenere un nuovo documento XML a partire da un albero di oggetti Javascript.</p>
<p>Per semplicità proporremo qui un unico esempio, che in un unico codice rappresenta l'inversione degli algoritmi <a href="#Algoritmo_JXON_2" title="Vai all'algoritmo JXON #2">#2</a> e <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">#3</a>. È molto semplice partire da esso per creare gli inversi anche degli algoritmi <a href="#Algoritmo_JXON_1" title="Vai all'algoritmo JXON #1">#1</a> e <a href="#Algoritmo_JXON_4" title="Vai all'algoritmo JXON #4">#4</a>, qualora se ne abbia la necessità.</p>
<pre class="brush: js">function createXML (oJXONObj) {
function loadObj (oParentObj, oParentEl) {
var nSameIdx, vValue, oChild;
for (var sName in oParentObj) {
vValue = oParentObj[sName];
if (sName === "keyValue") {
if (vValue !== null && vValue !== true) { oParentEl.appendChild(oNewDoc.createTextNode(String(vValue))); }
} else if (sName.charAt(0) === "@") {
oParentEl.setAttribute(sName.slice(1), vValue);
} else {
oChild = oNewDoc.createElement(sName);
if (vValue.constructor === Date) {
oChild.appendChild(oNewDoc.createTextNode(vValue.toGMTString()));
} else if (vValue.constructor === Array) {
for (nSameIdx = 0; nSameIdx < vValue.length; nSameIdx++) { loadObj(vValue[nSameIdx], oChild); }
} else if (vValue instanceof Object) {
loadObj(vValue, oChild);
} else if (vValue !== null && vValue !== true) {
oChild.appendChild(oNewDoc.createTextNode(vValue.toString()));
}
oParentEl.appendChild(oChild);
}
}
}
var oNewDoc = document.implementation.createDocument("", "", null);
loadObj(oJXONObj, oNewDoc);
return oNewDoc;
}
var newDoc = createXML(myObject);
// abbiamo ottenuto il nostro documento! provare per credere: alert((new XMLSerializer()).serializeToString(newDoc));
</pre>
<div class="note"><strong>Nota:</strong> Con questo codice le istanze di <code>Date</code> eventualmente presenti verranno convertite in stringhe attraverso l'invocazione del metodo <code>toGMTString()</code>. Nulla vieta l'utilizzo di qualsiasi altro metodo di conversione. Inoltre le proprietà dell'albero con valore uguale a <code>true</code> verranno convertite in elementi privi di nodi di testo (si vedano le <a href="#JXON_considerazioni" title="Considerazioni sul codice">Considerazioni sul codice</a>).</div>
<p>Si tratta di una buona soluzione nel caso si voglia automatizzare la creazione di un documento XML. È una cattiva scelta invece nel caso in cui si voglia ricostruire un documento XML già precedentemente convertito in JSON. Sebbene la conversione sia molto fedele (eccetto che per i nodi di tipo <code>CDATASection</code>, che verranno riconvertiti in nodi di tipo <code>Text</code>), si tratta di un processo inutilmente dispendioso. Nel caso infatti in cui il nostro scopo sia quello di modificare un documento XML, si raccomanda vivamente di lavorare su di esso invece che di crearne di nuovi.</p>
<h4 id="La_Convenzione_di_Parker">La Convenzione di Parker</h4>
<p>Le funzioni precedentemente elencate per la conversione di un documento XML in JSON (spesso chiamate «algoritmi JXON») sono più o meno liberamente basate sulla Convenzione di Parker. È chiamata “Convenzione di Parker”, in opposizione alla “Convenzione di BadgerFish”, sulla falsa riga del fumetto di Cuadrado <em>Parker & Badger</em>. Per ulteriori approfondimenti si veda anche la <a class="external" href="http://badgerfish.ning.com/" title="BadgerFish convention">Convenzione di BadgerFish</a>.</p>
<p>La seguente è una traduzione dall'inglese del <em>paper</em> originale della Convenzione di Parker (versione 0.4), dalla pagina “<a class="external" href="http://code.google.com/p/xml2json-xslt/wiki/TransformingRules" title="TransformingRules – xml2json-xslt">TransformingRules</a>” del sito del progetto <a class="external" href="http://code.google.com/p/xml2json-xslt/" title="xml2json-xslt project">xml2json-xslt</a>.</p>
<p>Questa convenzione è stata scritta per regolamentare la conversione in <a href="/it/JSON" title="/it/JSON">JSON</a> da parte di <a href="/it/XSLT" title="/it/XSLT">XSLT</a>, di conseguenza alcune parti di essa sono futili per Javascript.</p>
<h5 id="Conversione_in_JSON">Conversione in JSON</h5>
<ol>
<li>
<p>L'elemento <code>root</code> verrà assorbito, poiché ce ne può essere soltanto uno:</p>
<pre class="brush: xml"><root>test</root></pre>
<p>diventerà</p>
<pre class="brush: js">"test"
</pre>
</li>
<li>
<p>I nomi degli elementi diventeranno proprietà di oggetti:</p>
<pre class="brush: xml"><root><name>Xml</name><encoding>ASCII</encoding></root></pre>
<p>diventerà</p>
<pre class="brush: js">{
"name": "Xml",
"encoding": "ASCII"
}
</pre>
</li>
<li>
<p>I numeri saranno riconosciuti come tali (sia interi che decimali):</p>
<pre class="brush: xml"><root><age>12</age><height>1.73</height></root>
</pre>
<p>diventerà</p>
<pre class="brush: js">{
"age": 12,
"height": 1.73
}
</pre>
</li>
<li>
<p>I booleani saranno riconosciuti come tali (<em>case insensitive</em>):</p>
<pre class="brush: xml"><root><checked>True</checked><answer>FALSE</answer></root></pre>
<p>diventerà</p>
<pre class="brush: js">{
"checked": true,
"answer": false
}
</pre>
</li>
<li>
<p>Le stringhe avranno degli <em>escape</em> quando ce ne sarà la necessità:</p>
<pre class="brush: xml"><root>Quote: &quot; New-line:
</root>
</pre>
<p>diventerà</p>
<pre class="brush: js">"Quote: \" New-line:\n"
</pre>
</li>
<li>
<p>Gli elementi vuoti diventeranno proprietà con valore nullo (<code>null</code>):</p>
<pre class="brush: xml"><root><nil/><empty></empty></root></pre>
<p>diventerà</p>
<pre class="brush: js">{
"nil": null,
"empty": null
}
</pre>
</li>
<li>
<p>If all sibling elements have the same name, they become an array</p>
<pre class="brush: xml"><root><item>1</item><item>2</item><item>three</item></root>
</pre>
<p>becomes</p>
<pre class="brush: js">[1, 2, "three"]
</pre>
</li>
<li>
<p>Mixed mode text-nodes, comments and attributes get absorbed:</p>
<pre class="brush: xml"><root version="1.0">testing<!--comment--><elementtest="true">1</element></root>
</pre>
<p>becomes</p>
<pre class="brush: js">{ "element": true }
</pre>
</li>
<li>
<p>Namespaces get absorbed, and prefixes will just be part of the property name:</p>
<pre class="brush: xml"><root xmlns:ding="http://zanstra.com/ding"><ding:dong>binnen</ding:dong></root>
</pre>
<p>becomes</p>
<pre class="brush: js">{ "ding:dong" : "binnen" }
</pre>
</li>
</ol>
<div class="note"><strong>Note:</strong> Our algorithms comply with the points 2, 3, 4 and 7. The third and the fourth algorithm comply also with the point 6 (but <code>true</code> instead of <code>null</code> – si vedano le <a href="#JXON_considerazioni" title="Considerazioni sul codice">Considerazioni sul codice</a>). The point 5 is automatically managed by the Javascript method <code><a href="/it/Javascript/Glossario/Oggetti_globali/JSON/stringify" title="/it/Javascript/Glossario/Oggetti_globali/JSON/stringify">JSON.stringify</a></code>.</div>
<h5 id="Appendice_Javascript">Appendice Javascript</h5>
<p>All the same as the JSON translation, but with these extra's:</p>
<ol>
<li>
<p>Property names are only escaped when necessary</p>
<pre class="brush: xml"><root><while>true</while><wend>false</wend><only-if/></root></pre>
<p>becomes</p>
<pre class="brush: js">{
"while": true,
wend: false,
"only-if": null
}
</pre>
</li>
<li>
<p>Within a string, closing elements "</" are escaped as "<\/"</p>
<pre class="brush: xml"><root><![CDATA[<script>alert("YES");</script>]]></root></pre>
<p>becomes</p>
<pre class="brush: js">{ script: "<script>alert(\"YES\")<\/script>" }
</pre>
</li>
<li>
<p>Dates are created as <code>new Date()</code> objects</p>
<pre class="brush: xml"><root>2006-12-25</root></pre>
<p>becomes</p>
<pre class="brush: js">new Date(2006, 12 - 1, 25)
</pre>
</li>
<li>
<p>Attributes and comments are shown as comments (for testing-purposes):</p>
<pre class="brush: xml"><!--testing--><root><test version="1.0">123</test></root>
</pre>
<p>becomes</p>
<pre class="brush: js">/* testing */ { test /* @version = "1.0" */ : 123}
</pre>
</li>
<li>
<p>A bit of indentation is done, to keep things ledgible</p>
</li>
</ol>
<div class="note"><strong>Note:</strong> Our algorithms comply with the point 3 (but without month decrease). The points 1 and 2 are automatically managed by the Javascript method <code><a href="/it/Javascript/Glossario/Oggetti_globali/JSON/stringify" title="/it/Javascript/Glossario/Oggetti_globali/JSON/stringify">JSON.stringify</a></code>.</div>
<h4 id="In_sintesi">In sintesi</h4>
<p>Prendiamo <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">il terzo algoritmo</a> come l'algoritmo di conversione JXON più rappresentativo. Un singolo nodo XML di tipo <code>Element</code> può avere in totale otto differenti configurazioni a seconda di quello che contiene. Esso può essere:</p>
<ol>
<li>un elemento vuoto,</li>
<li>un elemento contenente al suo interno solamente un nodo di testo,</li>
<li>un elemento vuoto ma contenente attributi,</li>
<li>un elemento con attributi contenente al suo interno solamente un nodo di testo,</li>
<li>un elemento contenente ulteriori elementi-figli con nomi diversi,</li>
<li>un elemento contenente ulteriori elementi-figli con nomi uguali,</li>
<li>un elemento contenente ulteriori elementi-figli e un unico nodo di testo (testo <em>contiguo</em>),</li>
<li>un elemento contenente ulteriori elementi-figli e più nodi di testo (testo <em>non contiguo</em>).</li>
</ol>
<p>The following table shows the corresponding conversion patterns between XML and JSON according to the <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">third algorithm</a>.</p>
<table>
<thead>
<tr>
<th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>Case</strong></th>
<th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>XML</strong></th>
<th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>JSON</strong></th>
<th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>Javascript access</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td style="background: #f6f6f6;">1</td>
<td style="background: #f6f6f6;"><code><animal/></code></td>
<td style="background: #f6f6f6;"><code>"animal": true</code></td>
<td style="background: #f6f6f6;"><code>myObject.animal</code></td>
</tr>
<tr>
<td style="background: #e7e5dc;">2</td>
<td style="background: #e7e5dc;"><code><animal>text</animal></code></td>
<td style="background: #e7e5dc;"><code>"animal": "text"</code></td>
<td style="background: #e7e5dc;"><code>myObject.animal</code></td>
</tr>
<tr>
<td style="background: #f6f6f6;">3</td>
<td style="background: #f6f6f6;"><code><animal name="value" /></code></td>
<td style="background: #f6f6f6;"><code>"animal": {"@name": "value"}</code></td>
<td style="background: #f6f6f6;"><code>myObject.animal["@name"]</code></td>
</tr>
<tr>
<td style="background: #e7e5dc;">4</td>
<td style="background: #e7e5dc;"><code><animal name="value">text</animal></code></td>
<td style="background: #e7e5dc;"><code>"animal": { "@name": "value", "keyValue": "text" }</code></td>
<td style="background: #e7e5dc;"><code>myObject.animal["@name"]</code>, <code>myObject.animal.keyValue</code></td>
</tr>
<tr>
<td style="background: #f6f6f6;">5</td>
<td style="background: #f6f6f6;"><code><animal> <dog>Charlie</dog> <cat>Deka</cat> </animal></code></td>
<td style="background: #f6f6f6;"><code>"animal": { "dog": "Charlie", "cat": "Deka" }</code></td>
<td style="background: #f6f6f6;"><code>myObject.animal.dog</code>, <code>myObject.animal.cat</code></td>
</tr>
<tr>
<td style="background: #e7e5dc;">6</td>
<td style="background: #e7e5dc;"><code><animal> <dog>Charlie</dog> <dog>Mad Max</dog> </animal></code></td>
<td style="background: #e7e5dc;"><code>"animal": { "dog": ["Charlie", "Mad Max"] }</code></td>
<td style="background: #e7e5dc;"><code>myObject.animal.dog[0]</code>, <code>myObject.animal.dog[1]</code></td>
</tr>
<tr>
<td style="background: #f6f6f6;">7</td>
<td style="background: #f6f6f6;"><code><animal> in my house <dog>Charlie</dog> </animal></code></td>
<td style="background: #f6f6f6;"><code>"animal": { "keyValue": "in my house", "dog": "Charlie" }</code></td>
<td style="background: #f6f6f6;"><code>myObject.animal.keyValue</code>, <code>myObject.animal.dog</code></td>
</tr>
<tr>
<td style="background: #e7e5dc;">8</td>
<td style="background: #e7e5dc;"><code><animal> in my ho <dog>Charlie</dog> use </animal></code></td>
<td style="background: #e7e5dc;"><code>"animal": { "keyValue": "in my house", "dog": "Charlie" }</code></td>
<td style="background: #e7e5dc;"><code>myObject.animal.keyValue</code>, <code>myObject.animal.dog</code></td>
</tr>
</tbody>
</table>
<h4 id="Considerazioni_sul_codice">Considerazioni sul codice</h4>
<p>In these examples we chose to use a property named <code>keyValue</code> for the text content. The lack of standars for XML to JSON conversion leads developers to choose several property names for the text content of XML <code>Element</code> nodes which contain also other child nodes. Sometimes it is used a property called <code>$</code>. Other times it is used a property called <code>#text</code>. In the algorithms proposed here you can easily change this name, depending on your needs.</p>
<p>The choice of using a <code>true</code> value instead of a <code>null</code> value to represent empty nodes is due to the fact that when in an XML document there is an empty node the reason is often to express a <code>Boolean</code> content, as in this case:</p>
<pre class="brush: xml"><car>
<type>Ferrari</type>
<bought />
</car>
</pre>
<p>If the value were <code>null</code> it would be more cumbersome to launch a code like this:</p>
<pre class="brush: js">if (myObject.car.bought) {
// do something
}
</pre>
<div class="note">According to our <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">terzo algoritmo</a> and our <a href="#Algoritmo_JXON_4" title="Vai all'algoritmo JXON #4">quarto algoritmo</a>, just <code>Text</code> nodes or <code>CDATASection</code> nodes which contain nothing but white spaces (precisely: <code>/^\s+$/</code>) are parsed as <code>null</code>.</div>
<p>An important consideration is that, using the third or the fourth algorithm, an XML Document can be used to create any type of Javascript object. For example, If you want to create an object like the following:</p>
<pre class="brush: js">{
"bool": true,
"array": ["Cinema", "Hot dogs", false],
"object": {
"nickname": "Jack",
"registration_date": new Date(1995, 11, 25),
"privileged_user": true
},
"num": 99,
"text": "Hello World!"
}
</pre>
<p>you must just create an XML document with the following structure:</p>
<pre class="brush: xml"><bool>true</bool>
<array>Cinema</array>
<array>Hot dogs</array>
<array>false</array>
<object>
<nickname>Jack</nickname>
<registration_date>Dec 25, 1995</registration_date>
<privileged_user />
</object>
<num>99</num>
<text>Hello World!</text>
</pre>
<p>This example also shows how the ideal JXON document is an XML document designed specifically to be converted in JSON format.</p>
<h3 id="Costruire_file_a_partire_da_istanze_di_Document">Costruire file a partire da istanze di <code>Document</code></h3>
<p>First, create a DOM tree as described in the <a href="/it/Come_creare_un_albero_DOM" title="it/Come_creare_un_albero_DOM">Come creare un albero DOM</a> article. If you have already have a DOM tree from using <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a>, skip to the end of this section.</p>
<p>Now, let's serialize <code>doc</code> — the DOM tree — to a file (you can read more <a href="/en/Code_snippets/File_I//O" title="en/Code_snippets/File_I//O">about using files in Mozilla</a>):</p>
<pre class="brush: js">var oFOStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
var oFile = Components.classes["@mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties).get("ProfD", Components.interfaces.nsILocalFile); // get profile folder
oFile.append("extensions"); // extensions sub-directory
oFile.append("{5872365E-67D1-4AFD-9480-FD293BEBD20D}"); // GUID of your extension
oFile.append("myXMLFile.xml"); // filename
oFOStream.init(oFile, 0x02 | 0x08 | 0x20, 0664, 0); // write, create, truncate
(new XMLSerializer()).serializeToStream(doc, oFOStream, ""); // rememeber, doc is the DOM tree
oFOStream.close();
</pre>
<h3 id="Costruire_file_a_partire_da_istanze_di_XMLHttpRequest">Costruire file a partire da istanze di <code>XMLHttpRequest</code></h3>
<p>If you already have a DOM tree from using <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a>, use the same code as above but replace <code>serializer.serializeToStream(doc, oFOStream, "")</code> with <code>serializer.serializeToStream(xmlHttpRequest.responseXML.documentElement, oFOStream, "")</code> where <code>xmlHttpRequest</code> is an instance of <code>XMLHttpRequest</code>.</p>
<p>Note that this first parses the XML retrieved from the server, then re-serializes it into a stream. Depending on your needs, you could just save the <code>xmlHttpRequest.responseText</code> directly.</p>
<h3 id="Resources">Resources</h3>
<ul>
<li><a class="external" href="http://xulplanet.com/tutorials/mozsdk/xmlparse.php">Parsing and Serializing XML su XUL Planet</a></li>
</ul>