How to Retrieve XML Node Value Using Ajax

Posted by on October 8, 2009 Leave a comment (0) Go to comments

Introduction:
Ajax patters allows easily retrieve xml node value.

Main:
For ex, try this below sample xml,

<?xml version = "1.0" ?>
<Names>
<name>Peter</name>
<name>John</name>
<name>Lucy</name>
</Names>

Ajax code,

<html>
<head>
<title>Using Ajax with XML</title>
<script language = "javascript">
var names;
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
XMLHttpRequestObj ect.overrideMimeType("text/xml") ;
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject ("Microsoft.XMLHTTP");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("GET", dataSource);
var obj = document.getElementById(divID);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
var xmlDocument = XMLHttpRequestObject.responseXML;
names=xmlDocument.getElementsByTagName("color");
obj.innerHTML = "Here are the fetched names:<ul>";
for (loopIndex =0; loopIndex < names.length; loopIndex++)
{
obj.innerHTML += "<li>" +
names[loopIndex].firstChild.data + "</li>" ;
}
obj.innerHTML += "</ul>" ;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<h1>Using Ajax with XML</h1>
<form>
<input type = "button" value = "Fetch the names"
onclick = "getData('names.xml', 'DisplayHere')">
</form>
<div id="DisplayHere" width =100 height=100>
The list of names will appear here.</div>
</body>
</html>