Home arrow JavaScript arrow Page 4 - JavaScript and XML

JavaScript and XML

If you want to learn how to use JavaScript to work with XML data, you've come to the right place. This three-part article series starts by showing you how to obtain XML documents. It is excerpted from chapter 21 of JavaScript: The Definitive Guide, Fifth Edition, written by David Flanagan (O'Reilly; ISBN: 0596101996). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 4 stars4 stars4 stars4 stars4 stars / 84
August 08, 2007
  1. · JavaScript and XML
  2. · 21.1.1 Creating a New Document
  3. · 21.1.2 Loading a Document from the Network
  4. · 21.1.4 XML Documents from Data Islands

print this article

JavaScript and XML - 21.1.4 XML Documents from Data Islands
(Page 4 of 4 )


Microsoft has extended HTML with an <xml> tag that creates an XML data island within the surrounding ďseaĒ of HTML markup. When IE encounters this <xml> tag, it treats its contents as a separate XML document, which you can retrieve using document.getElementById() or other HTML DOM methods. If the <xml> tag has a src attribute, the XML document is loaded from the URL specified by that attribute instead of being parsed from the content of the <xml> tag.

If a web application requires XML data, and the data is known when the application is first loaded, there is an advantage to including that data directly within the HTML page: the data is already available, and the web application does not have to estab lish another network connection to download the data. XML data islands can be a useful way to accomplish this. It is possible to approximate IE data islands in other browsers using code like that shown in Example 21-5.

Example 21-5. Getting an XML document from a data island

* Return a Document object that holds the contents of the <xml> tag
* with the specified id. If the <xml> tag has a src attribute, an XML
* document is loaded from that URL and returned instead.
* Since data islands are often looked up more than once, this function caches
* the documents it returns.
XML.getDataIsland = function(id) {
    var doc;

    // Check the cache first
    doc = XML.getDataIsland.cache[id];
    if (doc) return doc;

    // Look up the specified element
    doc = document.getElementById(id);

    // If there is a "src" attribute, fetch the Document from that URL
    var url = doc.getAttribute('src');
    if (url) {
doc = XML.load(url);
    // Otherwise, if there was no src attribute, the content of the <xml>
    // tag is the document we want to return. In Internet Explorer, doc is
    // already the document object we want. In other browsers, doc refers to
    // an HTML element, and we've got to copy the content of that element
    // into a new document object
    else if (!doc.documentElement) {// If this is not already a document...

        // First, find the document element within the <xml> tag. This is
        // the first child of the <xml> tag that is an element, rather
        // than text, comment, or processing instruction
        var docelt = doc.firstChild;
        while(docelt != null) {
            if (docelt.nodeType == 1 /*Node.ELEMENT_NODE*/) break;
            docelt = docelt.nextSibling;

        // Create an empty document
        doc = XML.newDocument();

        // If the <xml> node had some content, import it into the new document
        if (docelt) doc.appendChild(doc.importNode(docelt, true));

    // Now cache and return the document
    XML.getDataIsland.cache[id] = doc;
    return doc;
XML.getDataIsland.cache = {}; // Initialize the cache

This code does not perfectly simulate XML data islands in non-IE browsers. The HTML standard requires browsers to parse (but ignore) tags such as <xml> that they donít know about. This means that browsers donít discard XML data within an <xml> tag. It also means that any text within the data island is displayed by default. An easy way to prevent this is with the following CSS stylesheet:

  <style type="text/css">xml { display: none; }</style>

Another incompatibility is that non-IE browsers treat the content of XML data islands as HTML rather than XML content. If you use the code in Example 21-5 in Firefox, for example, and then serialize the resulting document (youíll see how to do this later in the chapter), youíll find that the tag names are all converted to upper case because Firefox thinks they are HTML tags. In some cases, this may be problematic; in many other cases, it is not. Finally, notice that XML namespaces break if the browser treats the XML tags as HTML tags. This means that inline XML data islands are not suitable for things like XSL stylesheets (XSL is covered in more detail later in this chapter) because those stylesheets always use namespaces.

If you want the network benefits of including XML data directly in an HTML page, but donít want the browser incompatibilities that come with using XML data islands and the <xml> tag, consider encoding your XML document text as a JavaScript string and then parsing the document using code like that shown in Example 21-4.

Please check back tomorrow for the continuation of this article.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials