Combine Ajax and JSON to Transmit Complex Presentation Data

One of the potential uses of Ajax is to load locale-dependent presentation text on demand. In my article, Using Servlets and JSP to Give Users Control Over Their Presentation Locale, I explained how an Ajax sink could be linked to a browser event such as the window.onload() to override the default locale.

In this article, I add JSON support for more complex retrievals, such as the contents of a listbox. If you haven't yet read the previous article, you probably should do that before proceeding with this one, as this tutorial contains some references the previous one.

Here is the complete code for this tutorial:

Toggling Between Languages

In providing the ability to override the presentation locale in real time, Ajax can provide the user with a means of choosing his or her preferred language from an HTML control. For instance, in the following example, the mechanism to toggle between the English and French languages is built into a button:

In the i18n_support.js script, a global variable keeps track of the current locale and provides a handy way to initialize it too. In the button's onclick() event, we can set the currentLocale using a ternary operator. The code to set the welcome message and button caption has been moved to the setLabels() function, as the exact same code gets called for the initializing and updating:

The key for the button caption lookup is toggle_language. Don't forget to add it to the labels resource bundles!

Here is the labels_en_CA.properties file:

Here is the labels_fr_CA.properties file:

Here are the results in the browser:

Figure 1

Handling Complex Data Types

While single string values are easy to send across the network using GET requests and the Ajax responseText property, complex data types can be problematic. Consider a SELECT control. It is made up of multiple Option objects, which themselves contain both a value and text property. This inevitably brings up the idea of using string delimiters and tokens. Not a bad idea, but for transmitting data across a network, it's hard to beat JSON.

Short for JavaScript Object Notation, JSON is a lightweight data-interchange format that is easy for both humans and machines to work with. Both these points are important because they give JSON a slight edge over XML in certain applications, since the latter is not nearly as lightweight or as easy to parse and generate by machines. Another benefit to using JSON is that, being based on JavaScript Object Notation, it can be converted into true JS objects with ease.

What You'll Need

On the JSON.org site, they have JSON parsers for most popular languages, including JavaScript. This might seem superfluous since you can easily convert a JSON text into an object using the eval() function:

Notice that the text must be wrapped in parentheses to avoid tripping on an ambiguity in JavaScript's syntax.

Although the eval function is very fast and simple to use, it poses a security threat as it will execute any code stored in the myJSONtext variable. Thus, it can unwittingly unleash a malicious script. To defend against this, a JSON parser should be used. A JSON parser will recognize only JSON text, rejecting all scripts. In browsers that provide native JSON support, JSON parsers are also much faster than eval().

There are several JavaScript parsers at the bottom of the home page, but I am using json_parse.js. Download it and place it in your scripts folder, where the i18n_support.js and protoype.js scripts reside.

On the Java side, you'll also need to include the seven files in the top part of the table on the JSON.org Java page. They are:

• JSONObject.java
• JSONArray.java
• JSONStringer.java
• JSONWriter.java
• JSONTokener.java
• JSONException.java
• JSONString.java

These should be placed in a package called org.json, under your project's source folder.

Find a programming school near you