Analýza a serializace XML

  • Revision slug: Parsing_and_serializing_XML
  • Revision title: Analýza a serializace XML
  • Revision id: 327457
  • Created:
  • Creator: makovickym
  • Is current revision? Ano
  • Comment

Revision Content

Webová platforma nabízí pro analýzu a serializaci (zřetězení) XML tyto objekty:

  • XMLSerializer pro zřetězení stromů DOM do podoby řetězce
  • XPath pro adresaci (ukazování) jednotlivých částí dokumentu XML (prostřednictvím vlastní syntaxe)
  • DOMParser pro analýzu a převod řetězce XML na strom DOM
  • XMLHttpRequest pro analýzu zdrojů s URL do stromu DOM

Krok 1: jak vytvořit XML dokument

V této části si vyzkoušíme vytvoření XML dokumentu (coby instanci objektu Document) v různých fázích.

Analýza a převod řetězce na strom DOM

var sRetezec = "<a id=\"a\"><b id=\"b\">Ahoj!<\/b><\/a>";
var oParser = new DOMParser();
var oDOM = oParser.parseFromString(sRetezec, "text/xml");
// zobrazí název kořenového elementu nebo chybovou zprávu
dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);

Sestavení XML dokumentu začínaje z javascriptového objektového stromu (JXON)

Viz JXON reverse algorithms.

Analýza a převod URL zdrojů do stromu DOM

XMLHttpRequest

Zde je ukázkový kód, který načte a převede XML soubor určený URL do stromu DOM:

var xhr = new XMLHttpRequest();
xhr.onload = function() {
  dump(xhr.responseXML.documentElement.nodeName);
}
xhr.onerror = function() {
  dump("Chyba při načítání XML.");
}
xhr.open("GET", "priklad.xml");
xhr.responseType = "document";
xhr.send();

xhr.responseXML je instance objektu Document.

io.js

Pokud dáváte přednost knihovně io.js, následující kód provede totéž, co předchozí příklad – převede XML dokument na strom DOM. Narozdíl od XMLHttpRequest však nepracuje se vzdálenými soubory:

var oFile = DirIO.get("ProfD"); // %Profile% dir
oFile.append("extensions");
oFile.append("{5872365E-67D1-4AFD-9480-FD293BEBD20D}");
oFile.append("people.xml");
oDOM = (new DOMParser()).parseFromString(FileIO.read(oFile), "text/xml");

// zobrazí název kořenového elementu nebo chybovou zprávu
dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);

Part 2: how to serialize the content of a given XML document

In this section we already have a parsed XML document (that is, an instance of {{ domxref("Document") }}) and want to use its content.

Serializing DOM trees to strings

First, create a DOM tree as described in How to Create a DOM tree. Alternatively, use a DOM tree obtained from {{ domxref("XMLHttpRequest") }}.

Now, let's serialize doc — the DOM tree — to a string:

var oSerializer = new XMLSerializer();
var sXML = oSerializer.serializeToString(doc);

From within a JS XPCOM component (or a JS module), new XMLSerializer() is not available. Instead, write:

var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"]
                            .createInstance(Components.interfaces.nsIDOMSerializer);
var sXML = oSerializer.serializeToString(doc);

"Pretty" serialization of DOM trees to strings

You can pretty print a DOM tree using XMLSerializer and E4X. First, create a DOM tree as described in the How to Create a DOM tree article. Alternatively, use a DOM tree obtained from {{ domxref("XMLHttpRequest") }}. We assume it's in the doc variable.

var oSerializer = new XMLSerializer();
var sPrettyXML = XML(oSerializer.serializeToString(doc)).toXMLString();

Indents are provided with two spaces. You can, of course, use {{ domxref("treeWalker") }} to write your own, more performant version which also has the advantage that you can customize the indent string to be whatever you like.

Note: When using the E4X toXMLString method your CDATA elements will be lost and only the containing text remains. So using the above method might not be useful if you have CDATA elements in your XML.
<content><![CDATA[This is the content]]></content>

Will become

<content>This is the content</content>

Serializing DOM trees to Javascript Object trees (JXON)

JXON (lossless JavaScript XML Object Notation) is a generic name by which is defined the representation of JavaScript Objects using XML. If you are interested to address only some parts of an XML document, use XPath instead of converting the whole document into JSON! Otherwise, read the article about JXON.

Serializing DOM trees to files

First, create a DOM tree as described in the How to Create a DOM tree article. If you have already have a DOM tree from using {{ domxref("XMLHttpRequest") }}, skip to the end of this section.

Now, let's serialize doc — the DOM tree — to a file (you can read more about using files in Mozilla):

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();

Serializing XMLHttpRequest objects to files

If you already have a DOM tree from using {{ domxref("XMLHttpRequest") }}, use the same code as above but replace serializer.serializeToStream(doc, oFOStream, "") with serializer.serializeToStream(xmlHttpRequest.responseXML.documentElement, oFOStream, "") where xmlHttpRequest is an instance of XMLHttpRequest.

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 xmlHttpRequest.responseText directly.

See also

See also

{{ languages( {"ja": "ja/Parsing_and_serializing_XML","zh-cn": "zh-cn/Parsing_and_serializing_XML", "it": "it/Costruire_e_decostruire_un_documento_XML" } ) }}

Revision Source

<p>Webová platforma nabízí pro analýzu a serializaci (zřetězení) XML tyto objekty:</p>
<ul>
  <li><a href="/XMLSerializer" title="en/XMLSerializer">XMLSerializer</a> pro zřetězení <strong>stromů DOM do podoby řetězce</strong></li>
  <li><a class="internal" href="/XPath" title="en/XPath">XPath</a> pro adresaci (ukazování) <strong>jednotlivých částí dokumentu <a href="/XML" rel="internal" title="en/XML">XML</a> (prostřednictvím vlastní syntaxe)</strong></li>
  <li><a href="/DOM/DOMParser" title="en/DOMParser">DOMParser</a> pro analýzu a převod <strong>řetězce XML na strom DOM</strong></li>
  <li><a href="/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a> pro analýzu <span style="font-weight: bold;">zdrojů s URL<strong> do stromu</strong></span><strong> DOM</strong></li>
</ul>
<h2 id="Part_1.3A_how_to_create_an_XML_document">Krok 1: jak vytvořit XML dokument</h2>
<p>V této části si vyzkoušíme vytvoření XML dokumentu (coby instanci objektu<code> Document</code>) v různých fázích.</p>
<h3 id="Parsing_strings_into_DOM_trees">Analýza a převod řetězce na strom DOM</h3>
<div style="overflow:hidden">
  <pre class="brush: js">
var sRetezec = "&lt;a id=\"a\"&gt;&lt;b id=\"b\"&gt;Ahoj!&lt;\/b&gt;&lt;\/a&gt;";
var oParser = new DOMParser();
var oDOM = oParser.parseFromString(sRetezec, "text/xml");
// zobrazí název kořenového elementu nebo chybovou zprávu
dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);
</pre>
</div>
<h3 id="Building_an_XML_document_starting_from_a_JavaScript_Object_tree_(JXON)">Sestavení XML dokumentu začínaje z javascriptového objektového stromu (JXON)</h3>
<p>Viz <a class="internal" href="/JXON#Reverse_Algorithms" title="en/JXON – Reverse Algorithms">JXON reverse algorithms</a>.</p>
<h3 id="Parsing_URL-addressable_resources_into_DOM_trees">Analýza a převod URL zdrojů do stromu DOM</h3>
<h4 id="Using_XMLHttpRequest">XMLHttpRequest</h4>
<p>Zde je ukázkový kód, který načte a převede XML soubor určený URL do stromu DOM:</p>
<pre class="brush: js">
var xhr = new XMLHttpRequest();
xhr.onload = function() {
  dump(xhr.responseXML.documentElement.nodeName);
}
xhr.onerror = function() {
  dump("Chyba při načítání XML.");
}
xhr.open("GET", "priklad.xml");
xhr.responseType = "document";
xhr.send();
</pre>
<p><code>xhr.responseXML</code> je instance objektu <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code>.</p>
<h4 id="io.js">io.js</h4>
<p>Pokud dáváte přednost knihovně <a href="/io.js" title="en/io.js">io.js</a>, následující kód provede totéž, co předchozí příklad – převede XML dokument na strom DOM. Narozdíl od <code>XMLHttpRequest</code> však nepracuje se vzdálenými soubory:</p>
<pre class="brush: js">
var oFile = DirIO.get("ProfD"); // %Profile% dir
oFile.append("extensions");
oFile.append("{5872365E-67D1-4AFD-9480-FD293BEBD20D}");
oFile.append("people.xml");
oDOM = (new DOMParser()).parseFromString(FileIO.read(oFile), "text/xml");

// zobrazí název kořenového elementu nebo chybovou zprávu
dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);
</pre>
<h2 id="Part_2.3A_how_to_serialize_the_content_of_a_given_XML_document">Part 2: how to serialize the content of a given XML document</h2>
<p>In this section we already have a parsed XML document (that is, an instance of {{ domxref("Document") }}) and want to use its content.</p>
<h3 id="Serializing_DOM_trees_to_strings">Serializing DOM trees to strings</h3>
<p>First, create a DOM tree as described in <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">How to Create a DOM tree</a>. Alternatively, use a DOM tree obtained from {{ domxref("XMLHttpRequest") }}.</p>
<p>Now, let's serialize <code>doc</code> — the DOM tree — to a string:</p>
<pre class="brush: js">
var oSerializer = new XMLSerializer();
var sXML = oSerializer.serializeToString(doc);</pre>
<p>From within a JS XPCOM component (or a <a class="internal" href="/en/JavaScript_code_modules" title="En/JavaScript modules">JS module</a>), <code>new XMLSerializer()</code> is not available. Instead, write:</p>
<pre class="brush: js">
var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.createInstance(Components.interfaces.nsIDOMSerializer);
var sXML = oSerializer.serializeToString(doc);
</pre>
<h4 id=".22Pretty.22_serialization_of_DOM_trees_to_strings">"Pretty" serialization of DOM trees to strings</h4>
<p>You can <a class="external" href="http://en.wikipedia.org/wiki/Pretty-print">pretty print</a> a DOM tree using <a href="/en/XMLSerializer" title="XMLSerializer"><code>XMLSerializer</code></a> and <a href="/en/E4X" title="en/E4X">E4X</a>. First, create a DOM tree as described in the <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">How to Create a DOM tree</a> article. Alternatively, use a DOM tree obtained from {{ domxref("XMLHttpRequest") }}. 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 {{ domxref("treeWalker") }} 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>
<div class="note">
  <strong>Note:</strong>&nbsp;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&nbsp;elements in your XML.</div>
<pre class="brush: xml">
&lt;content&gt;&lt;![CDATA[This is the content]]&gt;&lt;/content&gt;
</pre>
<p>Will become</p>
<pre class="brush: xml">
&lt;content&gt;This is the content&lt;/content&gt;</pre>
<h3 id="Serializing_DOM_trees_to_Javascript_Object_trees_(JXON)">Serializing DOM trees to Javascript Object trees (JXON)</h3>
<p><a href="/en/JXON" title="en/JXON">JXON</a> (lossless <strong>J</strong>avaScript <strong>X</strong>ML <strong>O</strong>bject <strong>N</strong>otation) is a generic name by which is defined the representation of JavaScript Objects using XML. If you are interested to address only some parts of an XML document, use <a class="internal" href="/en/XPath" title="en/XPath">XPath</a> instead of converting the whole document into JSON! Otherwise, read the <a class="internal" href="/en/JXON" title="en/JXON">article about JXON</a>.</p>
<h3 id="Serializing_DOM_trees_to_files">Serializing DOM trees to files</h3>
<p>First, create a DOM tree as described in the <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">How to Create a DOM tree</a> article. If you have already have a DOM tree from using {{ domxref("XMLHttpRequest") }}, 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="Serializing_XMLHttpRequest_objects_to_files">Serializing XMLHttpRequest objects to files</h3>
<p>If you already have a DOM tree from using {{ domxref("XMLHttpRequest") }}, 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="See_also">See also</h3>
<ul>
  <li><a class="external" href="http://xulplanet.com/tutorials/mozsdk/xmlparse.php">Parsing and Serializing XML at XUL Planet</a></li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
  <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li>
  <li><a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li>
  <li><a href="/en/JXON" title="en/JXON">JXON</a></li>
</ul>
<p>{{ languages( {"ja": "ja/Parsing_and_serializing_XML","zh-cn": "zh-cn/Parsing_and_serializing_XML", "it": "it/Costruire_e_decostruire_un_documento_XML" } ) }}</p>
Revert to this revision