Custom Search

JavaScript XML Parsing on Microsoft Internet Explorer

Posted by Hitesh Agrawal
May 2, 2008

Today XML has become the backbone of many Web Applications. In JavaScript we can parse xml files at client end. But this parsing is different varies with browsers. In the tutorial we will understand how we can parse an xml file in JavaScript for Internet Explorer. If you are looking for XML parsing in Mozilla Firefox or Opera Browser Check this out JavaScript XML Parsing on Mozilla Firefox Browsers





XML Parsing in Microsoft Browser:
Microsoft’s XML parser is a COM component that comes with Internet Explorer 5 and higher. To load the XML Parser in JavaScript will have to follow series of steps.

1. Create instance of XML Parser:

<script type="text/javascript">  
     var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
</script>

This will load the xml parser in the memory and will wait for the xml document. This component will automatically get erased when you close the browser window or the Browser. Here the xmlDoc holds the XML Object for JavaScript.

2. Synchronous loading the XML Data

<script type="text/javascript">
    xmlDoc.async="false";
</script>

This line turns off asynchronous loading, to make sure that the parser will not continue execution of the script before the document is fully loaded.

3. Callback function

<script type="text/javascript">
    xmlDoc.onreadystatechange = 'function name'
</script>

Calls the callback function on change of every state while loading the xml document.

ReadyStates in Microsoft Browsers

1 Loading Preparing to read the XML file. Did not try yet
2 Loaded Parsing the XML file. Object model still not available
3 Interactive Part of XML file successfully parsed and read in. Object model partially available for read only
4 Completed Loading of the XML file has been completed, successfully or unsuccessfully

4. Loading XML Document

<script type="text/javascript">
    xmlDoc.load("note.xml");
</script>

Tells the parser to load note.xml file.

Parsing XML in Internet Explorer

XML File: Employee.xml

1
2
3
4
5
6
7
8
9

< ?xml version="1.0" encoding="UTF-8" ?> 
	<company>
		<employee id="001" >John</employee>
		<turnover>
			<year id="2000">100,000</year>
			<year id="2001">140,000</year>	
			<year id="2002">200,000</year>
		</turnover>
	</company>

Javascript Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<html>
 <head>
  <title>Read XML in Microsoft Browsers</title>
  <script type="text/javascript">
    var xmlDoc;
    function loadxml()
    {
      xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      xmlDoc.async = false;
      xmlDoc.onreadystatechange = readXML;
      xmlDoc.load("employee.xml");
    }
 
    function readXML()
    {
       if(xmlDoc.readyState == 4)
       {
        //Using documentElement Properties
        //Output company
        alert("XML Root Tag Name: " + xmlDoc.documentElement.tagName);
 
        //Using firstChild Properties
        //Output year
        alert("First Child: " + xmlDoc.documentElement.childNodes[1].firstChild.tagName);
 
		//Using lastChild Properties
		//Output average
		alert("Last Child: " + xmlDoc.documentElement.childNodes[1].lastChild.tagName);
 
		//Using nodeValue and Attributes Properties
		//Here both the statement will return you the same result
		//Output 001
		alert("Node Value: " + xmlDoc.documentElement.childNodes[0].attributes[0].nodeValue);
		alert("Node Value: " + xmlDoc.documentElement.childNodes[0].attributes.getNamedItem("id").nodeValue);
 
		//Using getElementByTagName Properties
		//Here both the statement will return you the same result
		//Output 2000
		alert("getElementsByTagName: " + xmlDoc.getElementsByTagName("year")[0].attributes.getNamedItem("id").nodeValue);
 
		//Using text Properties
		//Output John
		alert("Text Content for Employee Tag: " + xmlDoc.documentElement.childNodes[0].text);
 
		//Using hasChildNodes Properties
		//Output True
		alert("Checking Child Nodes: " + xmlDoc.documentElement.childNodes[0].hasChildNodes);
      }
    }	
  </script>
 </head>
 
 <body onload="loadxml();">
 
 </body>
</html>

Explanation

Related Post

Javascript

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.

Comments

No comments yet.

Leave a comment

(required)

(required)