Ajax and XML
HTML Page

<html>
<head>
<script language=\"javascript\" type=\'text/javascript\' src=\'ajax.js\'></script>
</head>
<body>
<div id=\"txt\">
<button onClick=\"show_student();\">Student List</button>
</div>
</body>
</html>

Javascript page save as (ajax.js)

function show_student()
{
var XMLHttpRequestObject;
var txt;
var students;
var x;
var i;


if(window.XMLHttpRequest)
{
XMLHttpRequestObject=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObject=new ActiveXObject(\"Microsoft.XMLHTTP\");
}


XMLHttpRequestObject.onreadystatechange=function()
  {
  if (XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
    {
    txt=\"<table border=\'1\'><tr><td><b>Name</b></td><td><b>City</b></td></tr>\";
    students=XMLHttpRequestObject.responseXML.documentElement.getElementsByTagName(\"record\");
    for (i=0;i<students.length;i++)
      {
      txt=txt + \"<tr>\";
      x=students[i].getElementsByTagName(\"name\");
        {
        txt=txt + \"<td>\" + x[0].firstChild.nodeValue + \"</td>\";
        }
      x=students[i].getElementsByTagName(\"city\");
        {
        txt=txt + \"<td>\" + x[0].firstChild.nodeValue + \"</td>\";
        }
      txt=txt + \"</tr>\";
      }
    txt=txt + \"</table>\";
    document.getElementById(\'txt\').innerHTML=txt;
    }
  }
XMLHttpRequestObject.open(\"GET\",\"students.xml\",true);
XMLHttpRequestObject.send();
}

XML file save as(students.xml)

<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>
<records>
<record>
<name>Shishir sharma</name>
<city>Bareilly</city>
</record>
<record>
<name>Rishabha kumar</name>
<city>Lucknow</city>
</record>
<record>
<name>Mukesh Sharma</name>
<city>Delhi</city>
</record>
</records>


Previous