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:
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