Home / Programming / javascript / xml

In this article we'll take a closer look at 3 different approaches that you can incorporate to import/embed XML in your HTML pages. This article is divided into 3 sections:

• IE Specific Approach
• Direct Approach - open XML document in browser.
• Cross Browser Approach - works for both IE5.0+ and NS6+(mozilla based).

  As a Web developer you've probably thought of incorporating XML into your web documents. And you've probably realized that there weren't many options for using XML directly in a web page.

  The first choice for developers came with the release of IE5.0, where a new tag (<xml>) was introduced. With this element, developers were able to import/embed XML, as well as apply XSL/XSLT to any XML document being imported.
  
  Until recently, this was felt as a handicap for Netscape browser users, but it became possible to directly open an XML document in Mozilla based NS browsers and apply the appropriate XSL/XSLT to it.
  
  IE Specific Approach [Go]
  This approach will show you the details of how to use <xml> tag in your html document. It also offers working code examples.
  
  Direct Approach - Open XML Document in Browser. [Go]
  In this section we will see how an XML document is directly opened in IE5.0+ or NS6+ browsers. Next, we'll apply some XSL/XSLT to it, and see how the presentation part of XML can be put to work in your web pages.
  
  Cross Browser Approach - Works With Both IE5.0+ and NS6+(Mozilla Based). [Go]
  This approach is the heart of today's article. It allows you to seamlessly embed (inline) XML in your document and to use DOM methods in JavaScript to manipulate this XML document.
  

About XML and Its Role

In essence the XML acronym says it all: eXtensible Markup Language. The heart of XML is its ability to help separate content from presentation for the web. It's called extensible because unlike HTML (where a developer has a limited number of tags whose behavior is predefined), XML can create new elements with new behaviors. XML is written in SGML which is the international standard metalanguage for text markup systems (ISO 8879).

IE XML Data Island Functionality in NS6+ browsers.

What is the <xml> Element?
<xml> is an html tag that defines an XML data island on an HTML page, and was introduced by Microsoft with the release of the IE5.0 browser. An XML data island allows you to embed/import an XML document straight to your HTML page, where XML data can be manipulated by using DOM methods with JavaScript.

To use this element in your HTML pages, there are multiple options available:

• Import an XML file using the src attribute of the XML tag.
• XML data can be embedded inside the HTML page and enclosed within XML tags.

Below are some attributes that are used in this tag:

ID	Its used to get a reference to this object (XML Data Island)
SRC	Only used when an XML file is imported

Microsoft has a detailed API listed here [(MSDN Library)] for this tag. Let's see how the SRC attribute works when we import an XML document. The first thing to do is to import an XML file (below is a sample XML file):

  <xml version="1.0" encoding="UTF-8"?>
    <employees>
     <employee>
    		<name>Name</name>
    		<job>Job</job>
    		<department>Department</department>
    		<cubicle>Cubicle</cubicle>
    	</employee>
    
    	<employee>
    		<name>Joe</name>
    		<job>Programmer</job>
    		<department>Engineering</department>
    		<cubicle>5E</cubicle>
    	</employee>
      
        <employee>
    		<name>Jane</name>
    		<job>Desigmer</job>
    		<department>Architecture</department>
    		<cubicle>12A</cubicle>
    	</employee>
    </employees>
    

The file structure itself is self-explanatory. We have the root element <employees>, then we have the <employee> block with information about each employee. To begin the first part of import process, we need to define an XML data island element:

      <xml id="xmlIsland" src="resources/employee_db.xml"&gt></xml>
    

Where ID ="xmlIsland" will be the Data Island reference for further use. Now we need to create an XMLDocument object.

      var xmlDoc = document. all("testXML").XMLDocument;
    

At this point xmlDoc contains the entire XML document tree structure, where we can access any node/value using JavaScript by utilizing standard DOM methods. DOM is a powerful tool to manipulate XML document. Below is the logical flow to parse this XML document for the purpose of this example:

1. Get the root element (in this case, <employees>).
2. Loop through all of the child nodes for this element.
3. Retrieve the node name and node value, if present, and then display.

The W3C DOM is a handy and powerful tool to perform such tasks. Now, we have another variable declared xmlStr="", which will hold the results of each element (node name and it's value) for this XML document. The next step in this logical flow is a call to a function that will initiate the entire walking through the DOM tree process.

      parseXML(parentNode);
    

Note: If you're planning to work with XML, remember recursion, recursion, recursion.... Make sure that you're comfortable using recursive logic, because that's how you write efficient code to parse XML data. See the code below:

      function parseXML(node){
      	if(node.nodeName=="employee"){xmlStr+="<br/><br/>";}
        if(node.hasChildNodes && node.childNodes[0].nodeType!=3){
          for(var n=0;n&let;node.childNodes.length;n++){
            parseXML(node.childNodes[n]);
          }
        }else{
          xmlStr+="name = "+node.nodeName+", value = "+node.childNodes[0].nodeValue+"<br/>";
        }
      }
    

In the first line of the function, you add a couple of break tags for the formatting purposes, nothing more. The actual processing begins in the second line.

      if(node.hasChildNodes && node.childNodes[0].nodeType!=3){
    

This line ensures that we recursively call this function only if the current node has child nodes attached to it and that the first child is not that of nodeType text. If this condition isn't met, we append the node name and the node value to the xmlStr which is printed to display the node name and node value. View the Complete Working Example.

In the following pages, you'll that there is not much difference in parsing XML in all three approaches. The only difference is the way we import or embed the XML in the document. Once that's been taken care of, rest is using the DOM methods with JavaScript to walk through the XML document tree.