• Choose a category
• All
• Classic-Fiction

A big advantage of XML is that it lends itself to structuring information. We have taken advantage of this here to provide a number of tags, which we translate into an HTML unordered list in the parseXML() code. We’ve achieved better separation of the server and client tiers by using XML. Provided that both sides understand the document format, client and server code can be changed independently of one another. However, getting the JavaScript interpreter to do all the work for us in the script-centric solutions of the previous section was nice. The following example, using JSON, gives us something of the best of both worlds. Let’s look at it now.

Licensed to jonathan zheng

The details: exchanging data

191

Using JSON data

The XMLHttpRequest object is arguably misnamed, as it can receive any textbased information. A useful format for transmitting data to the Ajax client is the JavaScript Object Notation (JSON), a compact way of representing generic JavaScript object graphs. Listing 5.9 shows how we adapt our planetary info example to use JSON.

Listing 5.9 DataJSONPopup.js

function showInfo(event){

var planet=this.id;

var scriptUrl=planet+".json";

new net.ContentLoader(scriptUrl,parseJSON);

}

function parseJSON(){

var name="";

var descrip="";

var jsonTxt=net.req.responseText;

var jsonObj=eval("("+jsonTxt+")");

name=jsonObj.planet.name

var ptype=jsonObj.planet.type;

if (ptype){

descrip+="

"+ptype+"

}

var infos=jsonObj.planet.info;

descrip+="

";

for(var i in infos){

descrip+="

• "+infos[i]+"
\n";

}

descrip+="

top.showPopup(name,descrip);

}

Once again, we fetch the data using a ContentLoader and assign a callback function, here parseJSON(). The entire response text is a valid JavaScript statement, so we can create an object graph in one line by simply calling eval(): var jsonObj=eval("("+jsonTxt+")");

Note that we need to wrap the entire expression in parentheses before we evaluate it. We can then query the object properties directly by name, leading to somewhat more terse and readable code than the DOM manipulation methods Licensed to jonathan zheng

192

CHAPTER 5

The role of the server

that we used for the XML. The showPopup() method is omitted, as it is identical to that in listing 5.7.

So what does JSON actually look like? Listing 5.10 shows our data for planet Earth as a JSON string.

Listing 5.10 earth.json

{"planet": {

"name": "earth",

"type": "small",

"info": [

"Earth is a small planet, third from the sun",

"Surface coverage of water is roughly two-thirds",

"Exhibits a remarkable diversity of climates and landscapes"

]

}}

Curly braces denote associative arrays, and square braces numerical arrays. Either kind of brace can nest the other. Here, we define an object called planet that contains three properties. The name and type properties are simple strings, and the info property is an array.

JSON is less common than XML, although it can be consumed by any JavaScript engine, including the Java-based Mozilla Rhino and Microsoft’s JScript

.NET. The JSON-RPC libraries contain JSON parsers for a number of programming languages (see the Resources section at the end of this chapter), as well as a JavaScript “Stringifier” for converting JavaScript objects to JSON strings, for twoway communications using JSON as the medium. If a JavaScript interpreter is available at both the server and client end, JSON is definitely a viable option. The JSON-RPC project has also been developing libraries for parsing and generating JSON for a number of common server-side languages.

We can add data-centric to our vocabulary now and note the potential for a wide range of text-based data formats other than the ever-popular XML.

Using XSLT

Another alternative to manually manipulating the DOM tree to create HTML, as we have done in section 5.7.3, is to use XSLT transformations to automatically convert the XML into XHTML. This is a hybrid