Introduction
If the response is XML, the responseXML represents the value derived via DOM object parsing. The reader should review the properties and methods discussed in my previous tutorials on AJAX and XMLDOM, so that reading this one will be easier. JavaScript works easily with the XMLDOM object. In this tutorial we will be accessing an XML document via AJAX.
The two tasks of the XMLHttp are handling the HTTP request, and then processing the XML response. The first one is easily done by writing the appropriate syntax for creating this object. The second is achieved via reference to XMLDOM.
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
is the correct syntax for the Internet Explorer and
var xhr=new XMLHttpRequest();
for the Mozilla Browser.
A brief explanation of innerHTML
We will be coming across the innerHTML property of a DOM object often. To understand this property, consider the following script. The document's p tag is grabbed by referencing its Id property using the getElementById() method. Make sure the syntax is correct; it is case sensitive and unforgiving. The next statement writes the innerHTML property of the referenced element as well as the InnerText property. The innerHTML property represents everything referenced by the Id reference including the mark up, that is in this case, The is a: monkey, whereas the InnerText property gets all the text after removing other tags, in this case, This is a: monkey as shown in the next picture.
<SCRIPT LANGUAGE="JavaScript">
function explain(){
var inT = document.getElementById("two");
document.write(
"inner HTML: " + inT.innerHTML+
"<hr width='40%' align='left'>innerText: "
+ inT.innerText);
}
</SCRIPT>
<BODY>
<p id="two">This is a:
<b>monkey</b></p>
<input type="button" value="test" onClick="explain()">
AJAX returning an XML document
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.
A Quick look at XMLDOM
In this section we look at the parsing of the XML document in some detail. The responseXML is an XML document, and its properties can also be accessed.
responseXML's basic properties
document.getElementById("x4").innerHTML=xhr.responseXML.
firstChild.nodeName
document.getElementById("x5").innerHTML=xhr.responseXML.
lastChild.nodeName
Displayed result for the above snippet
xml
wclass
Relevant portion of the XML Document
responseXML.documentElement's basic properties
document.getElementById("x2").innerHTML= xhr.responseXML.documentElement.firstChild.nodeName
document.getElementById("x3").innerHTML= xhr.responseXML.documentElement.lastChild.nodeName
Displayed result for the above snippet
The responseXML is considered as a document with root wclass. The boundary is the document. The first child is comment and the lastChild is student.
#comment
student
Relevant portion of the XML Document
documentElement's children
In this case, it is the responseXML document's children. Let's take the example of item 3. The following snippet captures this child's properties.
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=
attributes[0].value
Displayed result for the above snippet
Charles Boyer HTML, Photoshop
id
3
Relevant portion of the XML Document
Student Nodes Collection
We can get a reference to the student nodes using the getElementsByTagName method. From this we can find the number of such student nodes. Once we know how many there are (nodes.length), we can iterate through the collection and find the individuals as shown in the following code snippet.
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;" }=""></nodes.length>
Displayed result for the above snippet
4 Linda Jones Access, VB5.0
Adam Davidson Cobol, MainFrame
Charles Boyer HTML, Photoshop
Charles Mann Cobol, MainFrame
Relevant portion of the XML Document
Trapping error in XML document
Using the XMLDOM's parseError property the errant line in the XML document can be found and corrected. The code needed for this will be:
err = xhr.responseXML.parseError;
if (err.errorCode != 0)
alert("Error on line " + err.line + "\n" + err.srcText);
You may test it by making a malformed XML document by replacing the following line in the XML file WebClass.xml
<legacySkill>Cobol, MainFrame</legacySkill>
with
<legacySkill>Cobol, MainFrame</legacySkiLl>
and the above code if placed in the source code will produce this prompt,
error information.
Summary
This tutorial looks at responseXML's parsing via XMLDOM properties and methods. The XML document must be well formed. Malformed XML documents retrieved using the above code will produce an error. However, if you are returning the responseText, the code still works. It is during XMLDOM parsing that the error is detected. You can verity this by trying to return responseText for a malformed XML Document. Again, JavaScript must be enabled and the script is case sensitive. This tutorial has only implemented the code for IE.
By Jayaram Krishnaswamy
Source: devarticles.com
