Fun with Javascript and JSON

I haven’t broken radio silence in a while so I thought I would have a general discussion of some of the fun code I’ve been exploring. OPAC development has been interesting as of late in part because of its evolution into an almost fully dynamic client side application. Our extensive use of JSON and XMLHTTPRequest gives us this ability to make the site more dynamic and is also a reason in itself why the OPAC has been a joy to code.

Traditional web pages typically use forms for submitting data to a server. Javascript often plays the role of form validator. JS is also good at making a page appear more interesting and dynamic (e.g. DHTML – moving/populating HTML elements dynamically). With the emergence of XMLHTTPRequest (or AJAX), it is no longer necessary to submit a form and download another web page to see the results of the submission. The form data can be analyzed by the javascript and submitted to the server for processing. The server can then respond with some data at which point the javascript can dynamically add the received data to the page (e.g. shove data into a table, etc.). With this simple addition, Javascript has evolved from “helper” code to full blown application code, so much so that you could write a fully functional web site that only has a single web page accompanied by a collection of javascript files that perform all of the work.

We’ve taken XMLHTTPRequest one step further and added JSON to the mix. JSON (mentioned in this blog previously) is a “lightweight data-interchange format” (see json.org). It gives us a way to turn program objects into strings, or serialize them. JSON is great for us because it’s a lot lighter than XML. It allows us to encode our data with practically no extraneous data clogging the lines. As a quick example, an array converted to JSON would look something like this: [ 1, 2, 3]. Whereas in XML it might appear like so: <array><item>1</item><item>2</item><item>3</item><array>. Even with a small dataset you see an immediate difference in the number of characters required to encode the object.

JSON parsers exist in many languages, and we’ve developed our own parsers in C, Perl, and Javascript. Why did we write our own, you ask? You guessed it… we took JSON one step further as well. We added what we call class hints to the JSON format. This allows us to parse a JSON string and determine what type of object we’re looking at based on a hint encoded as a comment within the object. So, for example, the Javascript JSON parser might receive a JSON string from the server that is encoded with a class hint of “user”. The JSON parser will then be able to turn the JSON string into a full blown Javascript “user” object that knows how to access and update the data it contains.

Wrapping it all up with some code

Consider a situation where you have a user object and wish to update that user’s email address. A form has been drawn on the screen and the user is entering the new information…

The onclick for the submit button might look something like the following:

button.onclick = function() {
 
  var new_email = /* retrieve the data from the form and validate */
  userObject.email(new_email);

  /* this is our XMLHTTPRequest wrapper class which turns any objects into JSON
    strings and turns a request into an XMLHTTPRequest with a URL that 
    our Apache knows how to process */
  var request = new RemoteRequest( serviceName, methodName, userObject );
 
  /* requests can be asynchronous, in which case it's necessary 
    to provide a callback for the request */
  request.setCompleteCallback( 
    function(req) {
      var updatedUser = req.getResultObject();
      alert("Email updated: " + updatedUser.email()); /* or what have you... */
    }
  );
 request.send();
}

… And that’s pretty much it. Using this same basic layout, we can retrieve and update any objects that the server allows and we don’t have to concern ourselves with how the objects are constructed. Having such a simple, uniform data interchange framework allows us to spend more time adding content to the web site and less time crafting URLS and reloading entire pages to update a single field like an email address.

For more on XMLHTTPRequest, there’s a good intro here.