Logo

Navigation
 

Ajax, Web Services & XML Part II

By | on July 16, 2006 |
Ajax Tutorial

Ajax, Web Services & XML Part II

Last time we created an Ajax application that wrapped an XML request in a SOAP envelope and called a web service. The web service returned another SOAP stream with a listing of theaters, movies and show times. We settled for showing the data in a textarea. In this installment we’ll go the final yard and parse the XML into tabular data to be displayed in the browser.

If you look at file ajax2b.html you’ll see that the “updateMe()” method has been updated to call the ActiveXObject “Microsoft.XMLDOM”. Obviously, this method works only for Internet Explorer. There are other methods that work in Netscape and other browsers.

XMLDOM is a Document Object Model. It will parse the XML into Nodes that can be traversed and converted into other forms. There are other tools available to us for this type of work. These include XSLT and XPATH. Today, we’ll use the DOM and write a “recursive descent parser”.

The XML is converted into a DOM Node tree by calling the xmlDoc.loadXML() method. We pass in the request.responseText which is the complete text of the XML returned by the web service. (There is also a request.responseXML property, but does not work consistently between browsers.) Now that we have a valid DOM tree, we can traverse the nodes and create our HTML.

The workhorse of the parser is the “depth first search” method or “dfs”. This is a recursive method that descends into the XML tree looking for the “Theater” node. Once it finds one, it calls the “theater” method to further parse the tree and append to an HTML string.

“Theater()” iterates across its children looking for the “Name” (the name of the theater”, “Address” (theater address), and “Movies” nodes. The Name and Address nodes become headers (<h1> & <h2>). The Movies node is passed to the “movies” method which iterates across its children looking for “Movie” nodes. Every “Movie” node is passed to the “movie” method.

The “movie” method creates a <table> of movie entries. The “Rating”, “Name”, “RunningTime”, and “ShowTimes” comprise the row of a table showing what is playing at the current theater.

Once the entire tree is converted to HTML, we need to display it. This is accomplished by creating a

in the original HTML and giving it an ‘id’ of ‘result’. Finally, the new HTML is inserted directly into the document by using the ‘innerHTML’ property of the document’s div:

Document.getElementById(“result”).innerHTML = html.

This replaces the

with our movie listings.

This technique has one minor drawback. It makes debugging the page difficult. When you pull down the “View Source” menu item, you get the original source code. Updating the document using “innerHTML” changes the internal representation without changing the HTML that creates the page.

In this article we’ve seen how to receive an XML/SOAP package and parse it into a Document Object Model tree. We traversed the tree and converted it into HTML, and finally updated the document with HTML using the innerHTML property. These methods give Ajax the power to dynamically update a page without receiving a new response from the web server and elevate the Javascript/browser into the realm of Rich Client.

Functions Used: 

  1. function makeCall(url, callback, xml) {
  2.   request = new ActiveXObject("Microsoft.XMLHTTP");
  3.   if (request) {
  4.     var now = new Date();
  5.     request.onreadystatechange = callback;
  6.     request.open("POST", url, true);
  7.     request.setRequestHeader("SOAPAction", "<a href="http://www.ignyte.com/whatsshowing/GetTheatersAndMovies">http://www.ignyte.com/whatsshowing/GetTheatersAndMovies</a>");
  8.     request.setRequestHeader("User-Agent", "Mindreef SOAPscope 4.1.2000 (<a href="http://www.mindreef.com/">http://www.mindreef.com</a>")
  9.     request.setRequestHeader("Content-Type", "text/xml; charset=UTF-8");
  10.     request.send(xml);
  11.   }
  12. }
  13.  
  14. function theaters() {
  15.   var zip = document.getElementById("zip").value;
  16.   var radius = document.getElementById("radius").value;
  17.   xml = '<?xml version="1.0" encoding="UTF-8"?>';
  18.   xml += '<soap:Envelope ';
  19.   xml += 'xmlns:soap="<a href="http://schemas.xmlsoap.org/soap/envelope/">http://schemas.xmlsoap.org/soap/envelope/</a>" ';
  20.   xml += 'xmlns:tns="<a href="http://www.ignyte.com/whatsshowing">http://www.ignyte.com/whatsshowing</a>" ';
  21.   xml += 'xmlns:xs="<a href="http://www.w3.org/2001/XMLSchema">'">http://www.w3.org/2001/XMLSchema">'</a>;
  22.   xml += '   <soap:Body>';
  23.   xml += '      <tns:GetTheatersAndMovies>';
  24.   xml += '         <tns:zipCode>'+zip+'</tns:zipCode>';
  25.   xml += '         <tns:radius>'+radius+'</tns:radius>';
  26.   xml += '      </tns:GetTheatersAndMovies>';
  27.   xml += '   </soap:Body>';
  28.   xml += '</soap:Envelope>';
  29.   document.getElementById("request").value = xml;
  30.   makeCall('http://www.ignyte.com/webservices/ignyte.whatsshowing.webservice/moviefunctions.asmx', updateMe, xml);
  31. }
  32.  
  33. function updateMe() {
  34.   if (request.readyState != 4) return;
  35.   if (request.status != 200) return;
  36.   html = "";
  37.   var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  38.   xmlDoc.loadXML(request.responseText);
  39.   dfs(xmlDoc);
  40.   document.getElementById("request").value = request.responseText;
  41.   document.getElementById("result").innerHTML = html;
  42.   request.abort();
  43.   request = null;
  44. }
  45.  
  46. function dfs(node) {
  47.   var stuff = "";
  48.   for(var i=0; i<node.childNodes.length; i++) {
  49.     var thisNode = node.childNodes(i);
  50.     if (thisNode.nodeName == "Theater") {
  51.       html += theater(thisNode) + "n";
  52.     } else {
  53.       dfs(thisNode);
  54.     }
  55.   }
  56.   return stuff;
  57. }
  58.  
  59. function theater(node) {
  60.   var stuff = "";
  61.   for(var i=0; i<node.childNodes.length; i++) {
  62.     var thisNode = node.childNodes(i);
  63.     if (thisNode.nodeName == "Name") {
  64.       stuff += "<h1>"+thisNode.childNodes(0).nodeValue+"</h1>n";
  65.     } else if (thisNode.nodeName == "Address") {
  66.       stuff += "<h2>"+thisNode.childNodes(0).nodeValue+"</h2>n";
  67.     } else if (thisNode.nodeName == "Movies") {
  68.       stuff += movies(thisNode);
  69.     }
  70.   }
  71.   return stuff;
  72. }
  73.  
  74. function movies(node) {
  75.   var stuff = "<table border=1>";
  76.   for(var i=0; i<node.childNodes.length; i++) {
  77.     var thisNode = node.childNodes(i);
  78.     if (thisNode.nodeName == "Movie") {
  79.       stuff += "<tr>"+movie(thisNode)+"</tr>";
  80.     }
  81.   }
  82.   return stuff+"</table>";
  83. }
  84.  
  85. function movie(node) {
  86.   var stuff = "";
  87.   for(var i=0; i<node.childNodes.length; i++) {
  88.     var thisNode = node.childNodes(i);
  89.     if (thisNode.nodeName == "Rating") {
  90.       stuff += "<td>"+thisNode.childNodes(0).nodeValue+"</td>";
  91.     } else if (thisNode.nodeName == "Name") {
  92.       stuff += "<td>"+thisNode.childNodes(0).nodeValue+"</td>";
  93.     } else if (thisNode.nodeName == "RunningTime") {
  94.       stuff += "<td>"+thisNode.childNodes(0).nodeValue+"</td>";
  95.     } else if (thisNode.nodeName == "ShowTimes") {
  96.       stuff += "<td>"+thisNode.childNodes(0).nodeValue+"</td>";
  97.     }
  98.   }
  99.   return stuff;
  100. }

Download Sample Code

Author: Greg Smith

« « Ajax, Web Services & XML Part I
How To Write A Killer Resume » »

Author Description

Avatar

Editorial Team at Exforsys is a team of IT Consulting and Training team led by Chandra Vennapoosa.

Exforsys e-Newsletter

ebook
 
© 2024. All Rights Reserved.IT Training and Consulting