Web Development

Process XML with the XMLHttpRequest object

The XMLHttpRequest object offers more than just background data processing—it offers full support for working with XML via the XML DOM. Dig deeper into the specifics about working with XML via the XMLHttpRequest object.

Last week we reviewed one of the cornerstone elements of AJAX with the XMLHttpRequest object. A simple example demonstrated how you may utilize it to provide a dynamic user interface via a simple lookup utility. I extend these concepts by processing XML data via HTTP in real time.

Processing XML

While last week's example displayed the results from a plain text file via the responseText method, the XMLHttpRequest can easily process XML documents as well. The object's responseXML property provides an easy way to access XML. It returns the body of the HTTP response, as well as an XML Document Object Model (DOM) object.

A simple example illustrates its usage, but let's review some sample XML first. The following XML is used in the examples. It includes company contact information using the root response node with two children nodes (telephone and companyname) containing data.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<response>
<telephone>502-000-0000</telephone>
<companyname>TechRepublic.com</companyname>
</response>

This XML document exists on a test server and the HTML page in Listing A loads it via an XMLHttpRequest object.

Weekly development tips in your inbox
Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.
Automatically sign up today!

A few notes on the HTML page:

  • The XML document is loaded via its URL.
  • The XMLHttpRequest object's onreadystatechange event is tied to the xmlReady JavaScript method. It is called when the requested content becomes available.
  • The xmlReady function verifies that the data is truly ready (request is complete) before trying to process the data. The readyState property returns 4 when the request is complete. Also, the status property is used to verify the request is valid (an HTTP status code of 200 signals there were no errors).
  • The code first retrieves the root node (response). Using the root node, it retrieves the two data nodes (telephone and companyname) using the getElementsByTagName method. The item property allows us to access the node. An index value of zero is used to access the first.
  • The firstChild property of a node returns the first element contained by it. The data property of a node returns the data stored in it. The data property is used to populate two text fields on the form and display the values.
  • The process is triggered by the HTML button's onclick event, but it can easily be tied to other events that don't require user actions.

Let's take a closer look at working with XML in JavaScript.

XML DOM


The W3C has defined a standard document object model for XML (XML DOM). The DOM is a programming interface for HTML and XML documents. It defines the way developers can access and manipulate a document. A developer can use the DOM to create and navigate documents, as well as manipulate its elements. We use the getElementsByTagName and firstChild methods in the previous example, but there are many more properties and methods available for working with the XML DOM. The following list provides a sampling:

  • basename: Returns the name of a node (without namespaces).
  • childNodes: Returns a list containing all child nodes of a selected node.
  • lastChild: Returns the last child node of the current node.
  • nextSibling: Returns the next node immediately following the current node. Two nodes are siblings if they have the same parent.
  • parentNode: Returns the parent node of a node. Null is returned for the root node since it is at the top of the DOM.
  • text: Returns the text content of a node and all of its children.
  • xml: Returns the XML content of a node and all of its children.
  • hasChildNodes: Returns true or false signaling whether a node has child nodes or not.
  • nextNode: Returns the next node in a collection. This method can be combined with others to walk the DOM.
  • previousNode: Returns the previous node in a collection.
  • selectNodes: Returns a NodeList object containing all nodes matching a specified pattern.
  • selectSingleNode: Returns a Node object for the first descendant node to match the specified pattern.

For example, we could have used the selectSingleNode method along with an XPath expression to retrieve the data used in the first example. The Web page in Listing B uses this approach.

The XML DOM makes it easy to work with XML data. You can easily use a for loop and the XML DOM methods and properties to quickly traverse an XML document's elements:

for each x in xmlDocument.documentElement.childNodes
document.write("<b>" & x.nodename & ":</b> ");
document.write(x.text);
document.write("<br />");
next

There are plenty of data sources available around the Web to provide XML-formatted data. This is true for freely available Web services from companies like Amazon and Google. You can utilize the XMLHttpRequest object to integrate these services into a Web page or application.

XML in the browser

While the XMLHttpRequest object is the crux of the AJAX development paradigm, it also brings XML to the browser. By using its various methods and properties, it's easy to manipulate data contained in XML documents. You could also go a step further by applying an XSL stylesheet to the data for presentation.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

Miss a column?

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton's column.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

0 comments

Editor's Picks