• Choose a category
• All
• Classic-Fiction

Figure 6-4: The pet names came from the XML file.

In this case, it extracts all the pet names and puts them in an unordered list. Here’s the code:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Reading XML

• This is the default output

Creating the HTML

Like most jQuery programs, this page begins with a basic HTML framework. This one is especially simple: a heading and a list. The list has an ID (so that it can be recognized through jQuery easily) and a single element (that will be replaced by data from the XML file).

Retrieving the data

The init() function sets up an AJAX request:

$(init);

function init(){

$.get(“pets.xml”, processResult);

} // end init

This function uses the get() function to request data:

1. Use the jQuery get() mechanism to set up the request.

Because I’m just requesting a static file (as opposed to a PHP program), the get() function is the best AJAX tool to use for setting up the request.

2. Specify the file or program.

Normally you call a PHP program to retrieve data, but for this example, I pull data straight from the pets.xml file because it’s simpler and it doesn’t really matter how the XML was generated. The get() mechanism can be used to retrieve plain text, HTML, or XML data. My program will be expecting XML data, so I should be calling an XML file or a program that produces XML output.

3. Set up a callback function.

When the AJAX is complete, specify a function to call. My example calls the processResult function after the AJAX transmission is complete.

Processing the results

The processResult() function accepts two parameters: data and textStatus:

function processResult(data, textStatus){

//clear the output

$(“#output”).html(“”);

//find the pet nodes...

$(data).find(“pet”).each(printPetName);

} // end processResult

The processResult() function does a few simple tasks:

1. Clear the output ul.

The output element is an unordered list. Use its html() method to clear the default list item.

2. Make a jQuery node from the data.

The data (passed as a parameter) can be turned into a jQuery node. Use $(data) for this process.

3. Find each pet node.

Use the find() method to identify the pet nodes within the data.

4. Specify a command to operate on each element.

Use the each() method to specify that you want to apply a function separately to each of the pet elements. Essentially, this creates a loop that calls the function once per element.

The each mechanism is an example of a concept called an iterator, which is a fundamental component of functional programming. (Drop those little gems to sound like a hero at your next computer science function. You’re welcome.)

5. Run the printPetName function once for each element.

The printPetName is a callback function.

Printing the pet name

The printPetName function is called once for each pet element in the XML data. Within the function, the $(this) element refers to the current element