How to Develop Web Applications with Ajax: Pt. 2

Events
- JupiterEvents
- internet.com/webcasts
Jobs
Partners
Solutions
- eBooks
- Video
Shop

In part one of this series, we discussed how to retrieve remote data from an XML file via JavaScript. In this article, we'll learn how to process that data in a more complex manner. As an example, we'll take groups of XML data, separate individual segments of that data and display those segments in different ways, depending on how they're identified.

This article builds on the example code used in the previous article, so if you don't understand the code we start with here, you may want to go back and read it.

Let's Begin

Let's begin with our first step: forming the XML. We want to write an XML document that groups sets of data to be processed by JavaScript, so we'll group some nodes and sub-nodes (or, elements and sub-elements) together. In the example, we'll use the names of some household pets:

We’re going to build upon the HTML document I built in the last lesson and expand it to make it more flexible with the new XML file here:

You’ll notice we’re calling the function in the same way as last time, via a link, and we’re putting data into a DIV (this time named “dataArea”). The ajaxRead() function is similar, except for one difference: the onreadystatechange function. Let’s have a look at that first:

We no longer have the updateObj function. Instead, we invoke a new function called processXML(). This function will take the XML document itself (which the ajaxRead function retrieved) and process it. (The “XML document itself” to which I refer is the parameter “xmlObj.responseXML.”)

First, a few variables are defined. “dataArray” becomes an array of all the <pet> nodes (not the node data, just the nodes). “dataArrayLen” is just the length of that array, used for our for loop. “insertData” is the beginning HTML for a table.

Our next step is to loop through all of the <pet> elements (by using the “dataArray” variable) and add that data to the insertData variable. Here we create a table row, insert a table data node inside it, insert the text each <pet> element contains into the table data node, and append all that into the “insertData” variable. Thus, each time the loop continues, the insertData variable has a new row of data containing the name of one of the three pets.

Following the appendage of new data rows, we insert a closing “</table>” tag into the “insertData” variable. This completes the table, and we’ve got one task left before closing this operation: we need to put this table on the page. Fortunately, thanks to the innerHTML property, this is easy. We fetch the ‘dataArea’ DIV via document.getElementById() and insert the “insertData” variable’s HTML into it. This makes the table appear!