• Choose a category
• All
• Classic-Fiction

function printPetName(){

//isolate the name text of the current node

thePet = $(this).find(“name”).text();

//add list item elements around it

thePet = “

//add item to the list

$(“#output”).append(thePet);

} // end printPetName

1. Retrieve the pet’s name.

Use the find() method to find the name element of the current pet node.

2. Pull the text from the node.

The name is still a jQuery object. To find the actual text, use the text() method.

3. Turn the text into a list item.

I just used string concatenation to convert the plain text of the pet name into a list item.

4. Append the pet name list item to the list.

The append() method is perfect for this task.

Of course, you can do more complex things with the data, but it’s just a matter of using jQuery to extract the data you want and then turning it into HTML output.

Working with JSON Data

XML has been considered the standard way of working with data in AJAX (in fact, the X in AJAX stands for XML). The truth is, another format is actually becoming more popular. While XML is easy for humans (and computer programs) to read, it’s a little bit verbose. All those ending tags can get a bit tedious and can add unnecessarily to the file size of the data block. While XML is not difficult to work with on the client, it does take some getting used to. AJAX programmers are beginning to turn to JSON as a data transfer mechanism. JSON is nothing more than the JavaScript object notation described in Book IV, Chapter 4 and used throughout this minibook.

Knowing JSON’s pros

JSON has a number of very interesting advantages:

♦ Data is sent in plain text. Like XML, JSON data can be sent in a plain-text format that’s easy to transmit, read, and interpret.

♦ The data is already usable. Client programs are usually written in JavaScript. Because the data is already in a JavaScript format, it is ready to use immediately, without the manipulation required by XML.

♦ The data is a bit more compact than XML. JavaScript notation doesn’t have ending tags, so it’s a bit smaller. It can also be written to save even more space (at the cost of some readability) if needed.

♦ Lots of languages can use it. Any language can send JSON data as a long string of text. You can then apply the JavaScript eval() function on the JSON data to turn it into a variable.

♦ PHP now has native support for JSON. PHP version 5.2 and later supports the json_encode() and json_decode() functions, which convert PHP arrays (even very complex ones) into JSON objects and back.

♦ jQuery has a getJSON() method. This method works like the get() or post() methods, but it’s optimized to receive a JSON value.

If a program uses the eval() function to turn a result string into a JSON object, there’s a potential security hazard: Any code in the string is treated as JavaScript code, so bad guys could sneak some ugly code in there. Be sure that you trust whoever you’re getting JSON data from.

The pet data described in pets.xml looks like this when it’s organized as a JSON variable:

{

“Lucy”: { “animal”: “Cat”,

“breed”: “American Shorthair”,

“note”: “She raised me”},

“Homer”: { “animal”: “Cat”,

“breed”: “unknown”,

“note”: “Named after a world-famous bassoonist”},

“Muchacha”: { “animal”: “Dog”,

“breed”: “mutt”,

“note”: “One of the ugliest dogs I’ve ever met”}

}

Note a couple of things:

♦ The data is a bit more compact in JSON format than it is in XML.

♦ You don’t need an overarching variable type (like pets in the XML data) because the entire entity is one variable (most likely called pets).

JSON takes advantages of JavaScript’s flexibility when it comes to objects:

♦ An object is encased in braces: { }. The main object is denoted by a pair of braces.

♦ The object consists of key/value pairs. In my data, I used the animal name as the node key. Note that the key is a string value.

♦ The contents of a node can be another node. Each animal contains another JSON object, holding the