Code:
<html>
<head>
<title>Ajax at work</title>
<script language = "javascript">
var XMLHttpRequestObject = false;
var txt,x,xx,i;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
txt="<table border='1'><tr><th>Score</th><th>Origin</th><th>Target</th><th>Target Location</th><th>Purpose</th></tr>";
//document.write("XML document loaded into an XML DOM Object.");
x=xmlhttp.responseXML.documentElement.getElementsByTagName("<TD>");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("<TD>");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("<td>");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('targetDiv').innerHTML=txt;
}
}
}
XMLHttpRequestObject.send(null);
}
}
}
</script>
</head>
<body>
<H1>Fetching data...</H1>
<form>
<input type = "button" value = "Display Message"
onclick = "getData('http://localhost/IIQ/out_RSS_example2.xml', 'targetDiv')">
</form>
<div id="targetDiv">
<p>The fetched data will go here.</p>
</div>
</body>
</html>