I find a very good blog by Steve Born about parsing XML in Javascript. There are all together 3 different ways to parse XML but not all of them are mutually compatible with all browsers.
- ActiveX
- createDocument
- xmlHttpRequest
For more details please refer to Steve’s post. Since ActiveX is a Microsoft product, i didn’t want to talk about it as it only works in Internet Explorer.
This post would only show the xmlHttpRequest approach because it probably works among all normal browsers including FireFox, Chrome, Safari and Opera. Here comes the code.
In the webroot, i have created a folder called parse-xml with the following index.html
<html>
<head>
<title>Parsing XML in Javascript</title>
<script type="text/javascript">
var xmlpath = "http://localhost/parse-xml/data.xml"
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", xmlpath, false);
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send("");
xmlDoc = xmlhttp.responseXML;
readXML();
function readXML() {
//The XML root node name
alert(xmlDoc.documentElement.tagName);
//The 1st attribute of the 1st child in the company node
alert(xmlDoc.documentElement.childNodes[0].attributes[0].nodeValue);
//The id attribute of the 2nd child in the company node
alert(xmlDoc.documentElement.childNodes[1].attributes.getNamedItem("id").nodeValue);
//The 1st year node id
alert(xmlDoc.getElementsByTagName("year")[1].attributes.getNamedItem("id").nodeValue);
//The text content of the 2nd child in company node
alert(xmlDoc.documentElement.childNodes[1].textContent);
}
</script>
</head>
<body onload="javascript:loadxml();">
</body>
</html>
Prepare the following data.xml
<?xml version="1.0" encoding="UTF-8"?>
<company>
<turnover id="turnover01">
<year id="2000">100,000</year>
<year id="2001">140,000</year>
<year id="2002">200,000</year>
</turnover>
<employee id="employee01">John</employee>
</company>
Since different browsers treat the newline differently, it is better to remove all the newline characters.
<?xml version="1.0" encoding="UTF-8"?><company><turnover id="turnover01"><year id="2000">100,000</year><year id="2001">140,000</year><year id="2002">200,000</year></turnover><employee id="employee01">John</employee></company>
Open the http://localhost/parse-xml/index.html. there would be alert boxes showing the XML content.
Thanks again Steve.
Done =)
Reference:
- Steve Born’s Blog – Loading XML with Javascript
- JavaScript XML Parsing on Mozilla Firefox / Opera Browsers
- XML DOM childNodes Property
thanks. very good..
LikeLike
You are welcome. =)
LikeLike
What about parsing xml from string?
LikeLike
You can refer to this article from W3Schools.
W3Schools – XML Parser
LikeLike
how do i parse
LikeLike
What problem did u have?
LikeLike