Introduction:
[FONT=arial, helvetica]XML is a very important base on which Web Services work. XML can be used in conjunction with a lot of client side and server side languages to put it to good effect. Let us see how we can use XML and client side JavaScript to work. We will see how we can display the contents of a XML file using JavaScript, accessing child elements, manipulating elements etc. [/FONT]
[FONT=arial, helvetica]Browser Issues:[/FONT]
When it comes client side languages browser incompatibilities is a major issue. But here where we want to use XML and JavaScript, XML is the issue. Not all browsers have support for parsing XML documents. I will use IE6 to explain the codes. Browsers that do not support XML, cannot read them. When you view an XML file in such a browser it will just ignore all the tags.
[FONT=arial, helvetica]Sample XML file:[/FONT]
[FONT=arial, helvetica] <company>
<employee id="001" sex="M" age="19">Premshree Pillai</employee>
<employee id="002" sex="M" age="24">Kumar Singh</employee>
<employee id="003" sex="M" age="21">Ranjit Kapoor</employee>
<turnover>
<year id="2000">100,000</year>
<year id="2001">140,000</year>
<year id="2002">200,000</year>
</turnover>
</company>
[/FONT]
The above XML file shows employee data and Turnover of the company (just an e.g). [FONT=arial, helvetica]Manipulating XML file data using javascript:[/FONT]
Loading XML file data using Javascript [FONT=arial, helvetica] var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
function loadXML(xmlFile)
{
xmlDoc.async="false";
xmlDoc.onreadystatechange=verify;
xmlDoc.load(xmlFile);
xmlObj=xmlDoc.documentElement;
}
[/FONT]
[FONT=arial, helvetica] Actually, just the last two lines of the function are enough to load the XML file. The previous two lines are written to ensure that the JavaScript functions that we may use later to manipulate the XML file data, does not perform any function on an uninitialized object. Thus the function verify()is called.[/FONT]
[FONT=arial, helvetica] 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;
}
}
[/FONT]
Now the XML file can be loaded
[FONT=arial, helvetica] loadXML('xml_file.xml'); [/FONT]
Displaying contents of XML file: View the entire contents of the XML file using [FONT=arial, helvetica] alert(xmlObj.xml);[/FONT] The entire XML file will be displayed in an alert box as it is with proper indentation.
Children and nodes: In the above XML file [FONT=arial, hlvetica]<company>[/FONT] is the top level tag under which all other tags come. These tags are called children. The above XML file can be represented graphically like a folder-tree. A folder-tree is shown below.
Testing for children: You can test whether a particular node child has any children using childNodes(i).hasChildNodes. Thus mlObj.childNodes(3).hasChildNodes() will return true.
Getting 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".
Displaying content of a tag: In the XML file the content of the 1st <employee> 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".
[FONT=arial, helvetica] Attributes : In the XML file, the <employee> 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".
xmlObj.childNodes(2).getAttribute("sex") will return "F".
[/FONT]
XML - JavaScript Example: There are many more properties and methods available. Using these properties you can create lots of client side applications. The main advantage of using XML along with JavaScript is that editing of data becomes very easy. XML being structured, it becomes very easy to manage content. One example is a folder-tree menu. Another one is a JavaScript Ticker. You can find a XML based JavaScript Ticker at
[FONT=arial, helvetica] http://www.dynamicdrive.com/dynamicindex2/xmlticker.htm[/FONT]
XML based JavaScript Ticker :
We will create a XML based JavaScript Ticker that can tick any number of messages. The ticker reads it's contents, i.e the ticker style, text to be displayed, the link for that particular message from a XML file. Let the XML file be ticker_items.xml
[FONT=arial, helvetica]The structure of the XML document is as follows >>[/FONT]
[FONT=arial, helvetica]XML is a very important base on which Web Services work. XML can be used in conjunction with a lot of client side and server side languages to put it to good effect. Let us see how we can use XML and client side JavaScript to work. We will see how we can display the contents of a XML file using JavaScript, accessing child elements, manipulating elements etc. [/FONT]
[FONT=arial, helvetica]Browser Issues:[/FONT]
When it comes client side languages browser incompatibilities is a major issue. But here where we want to use XML and JavaScript, XML is the issue. Not all browsers have support for parsing XML documents. I will use IE6 to explain the codes. Browsers that do not support XML, cannot read them. When you view an XML file in such a browser it will just ignore all the tags.
[FONT=arial, helvetica]Sample XML file:[/FONT]
[FONT=arial, helvetica] <company>
<employee id="001" sex="M" age="19">Premshree Pillai</employee>
<employee id="002" sex="M" age="24">Kumar Singh</employee>
<employee id="003" sex="M" age="21">Ranjit Kapoor</employee>
<turnover>
<year id="2000">100,000</year>
<year id="2001">140,000</year>
<year id="2002">200,000</year>
</turnover>
</company>
[/FONT]
The above XML file shows employee data and Turnover of the company (just an e.g). [FONT=arial, helvetica]Manipulating XML file data using javascript:[/FONT]
Loading XML file data using Javascript [FONT=arial, helvetica] var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
function loadXML(xmlFile)
{
xmlDoc.async="false";
xmlDoc.onreadystatechange=verify;
xmlDoc.load(xmlFile);
xmlObj=xmlDoc.documentElement;
}
[/FONT]
[FONT=arial, helvetica] Actually, just the last two lines of the function are enough to load the XML file. The previous two lines are written to ensure that the JavaScript functions that we may use later to manipulate the XML file data, does not perform any function on an uninitialized object. Thus the function verify()is called.[/FONT]
[FONT=arial, helvetica] 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;
}
}
[/FONT]
Now the XML file can be loaded
[FONT=arial, helvetica] loadXML('xml_file.xml'); [/FONT]
Displaying contents of XML file: View the entire contents of the XML file using [FONT=arial, helvetica] alert(xmlObj.xml);[/FONT] The entire XML file will be displayed in an alert box as it is with proper indentation.
Children and nodes: In the above XML file [FONT=arial, hlvetica]<company>[/FONT] is the top level tag under which all other tags come. These tags are called children. The above XML file can be represented graphically like a folder-tree. A folder-tree is shown below.
Testing for children: You can test whether a particular node child has any children using childNodes(i).hasChildNodes. Thus mlObj.childNodes(3).hasChildNodes() will return true.
Getting 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".
Displaying content of a tag: In the XML file the content of the 1st <employee> 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".
[FONT=arial, helvetica] Attributes : In the XML file, the <employee> 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".
xmlObj.childNodes(2).getAttribute("sex") will return "F".
[/FONT]
XML - JavaScript Example: There are many more properties and methods available. Using these properties you can create lots of client side applications. The main advantage of using XML along with JavaScript is that editing of data becomes very easy. XML being structured, it becomes very easy to manage content. One example is a folder-tree menu. Another one is a JavaScript Ticker. You can find a XML based JavaScript Ticker at
[FONT=arial, helvetica] http://www.dynamicdrive.com/dynamicindex2/xmlticker.htm[/FONT]
XML based JavaScript Ticker :
We will create a XML based JavaScript Ticker that can tick any number of messages. The ticker reads it's contents, i.e the ticker style, text to be displayed, the link for that particular message from a XML file. Let the XML file be ticker_items.xml
[FONT=arial, helvetica]The structure of the XML document is as follows >>[/FONT]