:: jnemo ::

Let's see how we can use XML and client side JavaScript [3] to display the contents of a XML file, access child elements, manipulate elements, and more!

Browser Issues

When it comes to client side languages, browser incompatibilities are a major issue. But here, using XML and JavaScript, it's XML that's the issue: not all browsers support the parsing of XML documents.

I'll use IE6 [4] to explain the codes. Browsers that don't support XML can't read these, so when you view an XML file in such a browser, it will simply ignore all the tags.

Sample XML File

Let's consider a sample XML file, which shows employee data and Turnover of a company:

 
Premshree Pillai 
Kumar Singh 
Ranjit Kapoor 
 
100,000 
140,000 
200,000 
 

Manipulating the XML file data using JavaScript

Load The XML File

You can load a XML fie from JavaScript like this:

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

Actually, just the last two lines of the function are enough to load the XML file. The previous two lines ensure that any JavaScript functions that we may use to manipulate the XML file data later, will not perform any function on an uninitialized object. Thus the function verify()is called:

function verify() 
{ 
 // 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 
 if (xmlDoc.readyState != 4) 
 { 
   return false; 
 } 
}

Now the XML file can be loaded:

loadXML('xml_file.xml');

Display The Contents of the XML File

View the entire contents of the XML file using alert(xmlObj.xml); The whole XML file will be displayed in an alert box as it is, with proper indentation.

Children and Nodes

In the above XML file,  is the top level tag under which all other tags fall. These tags are called children. This XML file can be represented graphically like a folder-tree:

In the above XML file, the top level tag  has 4 children.

The numbering of children (as is usual in all languages) starts from 0 (zero). The  tag has 3 children under it.

We can find the number of children a tag has by using the childNodes.length property. Thus the number of children of  tag (here, 4) can be found by using xmlObj.childNodes.length

The number of children of  tag (here, 3) can be found by using xmlObj.childNodes(3).childNodes.length

Here we use childNodes(3) because  is the 3rd child of 

Test for Children

You can test whether a particular node child has any children using childNodes(i).hasChildNodes

Thus, xmlObj.childNodes(3).hasChildNodes() will return true. xmlObj.childNodes(2).hasChildNodes() will return false, as the tag doesn't have any children.

Get Tag Name

You can get the tag name of a child using childNodes(i).tagName. Thus, xmlObj.tagName will return "company".xmlObj.childNodes(0).tagName will return "employee". xmlObj.childNodes(3).childNodes(0).tagName will return "year".

Display the Content of a Tag

In the XML file, the content of the 1st  tag is "Premshree Pillai". You can get this value using xmlObj.childNodes(0).firstChild.text

xmlObj.childNodes(2).firstChild.text will return "Suhasini Pandita". Similarly,xmlObj.childNodes(3).childNodes(1).firstChild.text will return "140,000".

Attributes

In the XML file, the  tag has 3 attributes. An attribute can be accessed using childNodes(i).getAttribute("AttributeName"). Thus,xmlObj.childNodes(0).getAttribute("id") will return "001". xmlObj.childNodes(1).getAttribute("age") will return "24". AndxmlObj.childNodes(2).getAttribute("sex") will return "F".

Project: An XML-based JavaScript Ticker

There are many more properties and methods available, and, using these, you can create many client side applications. The main advantage of using XML with JavaScript is that editing data becomes very easy. As XML is structured, it makes the management of content very easy. One example is a folder-tree menu. Another one is a JavaScript Ticker. You can find the full code an an example of this XML-based JavaScript Ticker at DynamicDrive [5].

We will create a XML based JavaScript Ticker that can display any number of messages. The ticker reads its contents (i.e. the ticker style), the text to be displayed, and the link for that particular message from an XML file. We'll call the XML file ticker_items.xml.

The structure of the XML document is as follows:

 
    pause       = "true" / "false"       "true" for pause onMouseOver 
   timeout     = positive integer       The delay in seconds b/w messages 
   border      = positive integer       The border width of Ticker 
   bordercolor = #HexColor              The border color of Ticker 
   background  = #HexColor              The background color of Ticker 
   width       = positive integer       Ticker width 
   height      = positive integer       Ticker height 
 /> 
  
        font       = "verdana,arial,helvetica..."     Ticker link font  
     color      = #HexColor                        Ticker link color 
     decoration = "none" / "underline" / 
                  "underline + overline"           Ticker link style 
     weight     = "normal" / "bold"                Ticker link weight 
     size       = pt             Ticker link size 
   /> 
        font       = "verdana,arial,hevetica..."      Ticker link font 
     color      = #HexColor                        Ticker link color 
     decoration = "none" / "underline" / 
                  "underline + overline"           Ticker link style 
     weight     = "normal" / "bold"                Ticker link weight 
     size       = pt             Ticker link size 
   /> 
  
    URL       = A valid URL                         Ticker link URL 
   target    = "_blank" / "_top" / "_self" / 
                      Ticker link target 
 > Ticker item 1 text  
  Ticker item 2 text  
 ... 

XML Ticker Script

// XML Ticker JavaScript 
// (c) 2002 Premshree Pillai 
// http://www.qiksearch.com 
// Use freely as long as all messages are as it is 
// Location of script:  
http://www.qiksearch.com/javascripts/xml/ticker.htm 
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
function loadXML(xmlFile) 
{ 
xmlDoc.async="false"; 
xmlDoc.onreadystatechange=verify; 
xmlDoc.load(xmlFile); 
ticker=xmlDoc.documentElement; 
} 
function verify() 
{  
if (xmlDoc.readyState != 4) 
{  
 return false;  
} 
} 
loadXML('ticker_items.xml'); 
document.write('