XML Responses and AJAX - AJAX returning an XML document
(Page 3 of 5 )
The XML Document
The XML document shown below, which has a couple of elements, will be retrieved. The properties of the document will be retrieved and written to a number of <div/> elements. Following this, the XMLDOM parsing will be shown in detail, both showing the relevant parts in the XMLDocument as well as the part returned by the code. The following is the XML document WebClass.xml, used in this tutorial.
<wclass>
<!--My students who took web programming class with me-->
<student id="1">
<name>Linda Jones</name>
<legacySkill>Access, VB5.0</legacySkill>
</student>
<student id="2">
<name>Adam Davidson</name>
<legacySkill>Cobol, MainFrame</legacySkill>
</student>
<student id="3">
<name>Charles Boyer</name>
<legacySkill>HTML, Photoshop</legacySkill>
</student>
<student id="4">
<name>Charles Mann</name>
<legacySkill>Cobol, MainFrame</legacySkill>
</student>
</wclass>
Retrieving the document with AJAX
The following code shows the source code used in retrieving the XML document. Although it is coded using VisualInterDev6.0, it could have been coded on NotePad. The syntax closely follows the earlier tutorial except for the XML parsing. The getPage() function takes the URL from where you will retrieve the XML document. The function does so by setting up a reference to the XMLHTTP Request object, which does the task of retrieving and parsing the XML document as described in the XMLDOM. This is done after checking the status and availability of the document on the server.
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var xhr = false;
function getPage (url) {
xhr = false;
//this is the Microsoft browser compatible instantiation
//of XmlHttpRequest
xhr = new ActiveXObject("Msxml2.XMLHTTP");
if (!xhr) {
alert ('XMLHttp failed to instantiate');
return false;
}
xhr.onreadystatechange = statusCheck;
xhr.open ('GET', url, true);
xhr.send (null);
}
function statusCheck() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
//alert(xhr.responseText);
// document.getElementById("x1").innerHTML=xhr.responseText;
document.getElementById("x1").innerHTML= xhr.responseXML.
getElementsByTagName('student')[0].firstChild.xml
//responseXML document's firstChild and lastChild
document.getElementById("x2").innerHTML= xhr.responseXML.
documentElement.firstChild.nodeName
document.getElementById("x3").innerHTML= xhr.responseXML.
documentElement.lastChild.nodeName
//responseXML's firstChild and lastChild
document.getElementById("x4").innerHTML= xhr.responseXML.
firstChild.nodeName
document.getElementById("x5").innerHTML=xhr.responseXML.
lastChild.nodeName
//documentElement's Children property, second child
document.getElementById("x6").innerHTML= xhr.responseXML.
documentElement.childNodes.item(3).text
document.getElementById("x7").innerHTML= xhr.responseXML.
documentElement.childNodes.item(3).attributes[0].name
document.getElementById("x8").innerHTML= xhr.responseXML.
documentElement.childNodes.item(3).attributes[0].value
//accessing student nodes as a collection
var nodes=xhr.responseXML.getElementsByTagName
("student");
document.getElementById(9).innerHTML=nodes.length;
for (i=0; i<nodes.length; i++)
{
document.getElementById(10+i).innerHTML=
nodes.item(i).text;
}
alert (xhr.responseXML.xml)
} else {
alert ('The request could not be fulfilled.');
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P><INPUT id=text1 name=text1></P>
<INPUT id=button2 onclick=
"getPage ('http://xphtek/TestXMLHttp/WebClass.xml')" type=button
value="Get the XML Document" name=button2>
<P> </P>
<div id=x1></div><div id=x2></div>
<div id=x3></div><div id=x4></div>
<div id=x5></div><div id=x6></div>
<div id=x7></div><div id=x8></div>
<div id=9></div><div id=10></div>
<div id=11></div><div id=12></div>
<div id=13></div>
</BODY>
</HTML>
Display after running the code
Linda Jones
#comment
student
xml
wclass
Charles Boyer HTML, Photoshop
id
3
4
Linda Jones Access, VB5.0
Adam Davidson Cobol, MainFrame
Charles Boyer HTML, Photoshop
Charles Mann Cobol, MainFrame
In addition to the above, the alert(xhr.responseXML.xml) returns the whole XML document as shown in the next picture.
Next: A Quick look at XMLDOM >>
More XML Articles
More By Jayaram Krishnaswamy
/ 25 
