Cross Browser Read XML in Javascript

Well Javascript apart from being a client side programming tools gives a good feature of reading XML Files located at the server provided the Programming page and the Javascript file responsible for calling the XML Files resides in the same domain.

On similar lines of implementing the AJAX in Javascript, XML can also be read in the same way.

details.xml

<employee>
<name>abcd</name>
<age>24</age>
<desc>Software Engineer</desc>
</employee>

Suppose i want to read details.xml file in my Javascript, so i will write the following code:

var documentXML;
if (window.ActiveXObject)
{
documentXML=new ActiveXObject("Microsoft.XMLDOM");
documentXML.async="false";
documentXML.onreadystatechange = readXMLIE;
documentXML.load("details.xml");
}
else if (document.implementation && document.implementation.createDocument)
{
documentXML=document.implementation.createDocument("","",null);
documentXML.load("details.xml");
doc.onload=readXMLNOTIE;
}

function readXMLIE()
{
if (documentXML.readyState == 4)
{
read_data();
}
}

function readXMLNOTIE()
{
read_data();
}

function read_data()
{
employeelist = documentXML.getElementsByTagName("employee");
for(i=0;i<=employeelist.length-1;i++)
{
if(navigator.userAgent.indexOf("Firefox")!=-1)
{
employeename = employeelist[i].childNodes[0].textContent;
employeeage = employeelist[i].childNodes[1].textContent;
employeedesc = employeelist[i].childNodes[2].textContent;
}
else
{
employeename = employeelist[i].childNodes[0].text;
employeeage = employeelist[i].childNodes[1].text;
employeedesc = employeelist[i].childNodes[2].text;
}
document.write("Node: " + parseInt(i+1) + "\n");
document.write("Employee Name: " + employeename);
document.write("\nEmployee Age: " + employeeage);
document.write("\nEmployee Desc: " + employeedesc);
document.write("\n");
}
}

Understanding the above code:
The XML Object are different for cross browser implementation.
If you are using IE then you have to use ActiveXObject("Microsoft.XMLDOM").
If you are using Mozilla/Opera then you have to use document.implementation.

Now seeing the above code, if you are using IE then there are 3 methods that you have to specify,
.onreadystatechange --> Defines the callback function which gets called on change in state.
.load --> Specify the xml file name to be loading in the javascript.
.async --> Denotes that javascript can perform other task while loading the xml file.

Similarly for Opera/Mozilla we are calling 2 methods,
.onload --> Defines the callback function which gets called on change in state.
.load --> Specify the xml file name to be loading in the javascript.

Now i am calling 2 different callback function because if you are using IE the xmlobject has a property called readystate which gives you the current state of the xml loading.
4 --> XML has been loaded correctly in the xml object.
NOTE:
If you are reading xml data and the readystate have not reached 4; it will generate a javascript error.

Whereas for Mozilla/Opera you don't require any readystate property
Once the xml data is loaded call the function (here read_xml()) which will be called for all the browsers.

To select list of node by tag name we use getElementByTagName(" .. Name of the Tag .. ")
Here the employeelist will contains all the occurance of the employee tag in the xml file.

Now according to the current xml it has 3 chilNodes namely name, age and desc.

Here we are reading the childNodes text content; now the methods to read the text content varies from browsers,

If you are using Mozilla/Firefox browsers then you will have to use textContent.
If you are using IE browsers then you will have to use text.

Finally after reading the individually node content i am displaying it using document.write.

I have not covered the whole concept of reading the xml file in javascript but atleast giving a small glimpse of how to read and fetch data from xml in javascript.

Have any query on reading XML post your comments will answer it right away