DataJSONPopup.js in Java

Creator QR Code JIS X 0510 in Java 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+="<h2>"+ptype+"</h2>"; } var infos=jsonObj.planet.info; descrip+="<ul>"; for(var i in infos){ descrip+="<li>"+infos[i]+"</li>\n"; } descrip+="</ul>"; 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

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.

{"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 between the data-centric and content-centric approaches. From the server s perspective, it is data-centric, whereas from the client s, it looks more content-centric. This is quicker and easier but suffers the same limits as a content-centric approach, namely, the

response is interpreted purely as visual markup typically affecting a single rectangular region of the visible UI. XSLT is discussed in more detail in chapter 11. Problems and limitations The main limitation of a data-centric approach is that it places the burden of parsing the data squarely on the client. Hence the client-tier code will tend to be more complicated, but, where this approach is adopted wholesale in a larger application, the costs can be offset by reusing parser code or abstracting some of the functionality into a library. The three approaches that we have presented here arguably form a spectrum between the traditional web-app model and the desktop-style thick client. Fortunately, the three patterns are not mutually exclusive and may all be used in the same application. Client/server communications run both ways, of course. We ll wrap up this chapter with a look at how the client can send data to the server.

So far, we ve concentrated on one side of the conversation, namely, the server telling the client what is going on. In most applications, the user will want to manipulate the domain model as well as look at it. In a multiuser environment, we also want to receive updates on changes that other users have made. Let s consider the case of updating changes that we have made first. Technically, there are two main mechanisms for submitting data: HTML forms and the XMLHttpRequest object. Let s run through each briefly in turn.