Home arrow XML arrow Page 3 - XML Responses and AJAX
XML

XML Responses and AJAX


In a previous tutorial we looked at the responseText property of the XMLHTTP Request. This tutorial will focus on the responseXML accessor.

Author Info:
By: Jayaram Krishnaswamy
Rating: 4 stars4 stars4 stars4 stars4 stars / 40
February 27, 2006
TABLE OF CONTENTS:
  1. · XML Responses and AJAX
  2. · A brief explanation of innerHTML
  3. · AJAX returning an XML document
  4. · A Quick look at XMLDOM
  5. · Student Nodes Collection

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
XML ARTICLES

- Open XML Finally Supported by MS Office
- XML Features Added to Two Systems
- Using Regions with XSL Formatting Objects
- Using XSL Formatting Objects
- More Schematron Features
- Schematron Patterns and Validation
- Using Schematron
- Datatypes and More in RELAX NG
- Providing Options in RELAX NG
- An Introduction to RELAX NG
- Path, Predicates, and XQuery
- Using Predicates with XQuery
- Navigating Input Documents Using Paths
- XML Basics
- Introduction to XPath

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials