n this article, I'll show you how to build an XML-based, client-side JavaScript app that reads data from external XML files, traverses the XML data, and displays that data in a tree format. The sample code uses the XMLDOM ActiveX object built into Microsoft Internet Explorer.

Say you have the following personal data and you want it displayed in a structured manner:

• name: Premshree Pillai
• sex: male
• Websites: Websites
• ws1: http://www.qiksearch.com
• ws2: http://premshree.resource-locator.com

<?xml version="1.0"?>
<personal>Personal Details
        <name>Premshree Pillai</name>
        <sex>male</sex>
        <websites>Websites
                <ws1>http://www.qiksearch.com</ws1>
                <ws2>http://premshree.resource-locator.com</ws2>
        </websites>
</personal>

1. Read the XML file
2. Point a variable, tree to the first node (XML tag) of the XML data.
3. If the node has child nodes:
   • Print "<ul><li>";
   • For each child node, traverse(tree.childNodes(nodeNum))
   • Print "</li></ul>";
4. If the node does not have any child:
   • Print the node's value.

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

function loadXML(xmlFile) {
        xmlDoc.async="false";
        xmlDoc.onreadystatechange=verify;
        xmlDoc.load(xmlFile);
}

function verify() { 
        if(xmlDoc.readyState!=4)
                return false; 
}

• 0 - Object is not initialized
• 1 - Loading object is loading data
• 2 - Loaded object has loaded data
• 3 - Data from object can be worked with
• 4 - Object completely initialized

Traverse() is the function that performs XML data traversal. It is a recursive function that takes a node as it's argument:

 
function traverse(tree) {
        if(tree.hasChildNodes()) {
                document.write('<ul><li>');
                document.write('<b>'+tree.tagName+' : </b>');
                var nodes=tree.childNodes.length;
                for(var i=0; i<tree.childNodes.length; i++)
                        traverse(tree.childNodes(i));
                document.write('</li></ul>');
        }
        else
                document.write(tree.text);
}

If the node argument passed to traverse() is childless, the function prints the value held by that node (tag). In this way, the tree structure for the XML file is generated.

To generate the tree structure of a XML file, use the initTraverse() function. This function takes the XML filename as it's argument. It loads the XML file, then sets the variable doc to the root node of the XML data, and finally traverses the XML data using the traverse() function with an argument as the root node, i.e doc.

 
function initTraverse(file) {
        loadXML(file);
        var doc=xmlDoc.documentElement;
        traverse(doc);
}

Place the following code where the tree form of a XML file has to be generated:

 
initTraverse("anyXMLfile.xml");

Script Listing
The following is the complete listing of the client-side JavaScript app.

<script language="JavaScript">
//////////////////////////////////////////////////
//      XML Data Traversal                      //
//      (c) 2003 Premshree Pillai               //
//      http://www.qiksearch.com                //
//      http://premshree.resource-locator.com   //
//      Email : qiksearch@rediffmail.com        //
//////////////////////////////////////////////////

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
function loadXML(xmlFile) {
        xmlDoc.async="false";
        xmlDoc.onreadystatechange=verify;
        xmlDoc.load(xmlFile);
}

function verify() { 
        if(xmlDoc.readyState!=4)
                return false; 
}

function traverse(tree) {
        if(tree.hasChildNodes()) {
                document.write('<ul><li>');
                document.write('<b>'+tree.tagName+' : </b>');
                var nodes=tree.childNodes.length;
                for(var i=0; i<tree.childNodes.length; i++)
                        traverse(tree.childNodes(i));
                document.write('</li></ul>');
        }
        else
                document.write(tree.text);
}

function initTraverse(file) {
        loadXML(file);
        var doc=xmlDoc.documentElement;
        traverse(doc);
}
</script>