When Microsoft added the ActiveX XMLHTTP object to Internet Explorer’s implementation of JavaScript, the company planted the seed for the revolution in Web applications known as Asynchronous JavaScript and XML, or AJAX. Today, Firefox, Safari, Opera, and other browsers all support what is now known as XMLHttpRequest, making possible sites such as colr.org, backpackit.com, and maps.google.com. These and other sites feature applications that act and feel like other desktop applications—even though they’re running in a browser.

In AJAX, the JavaScript on the page sends requests to a Web server for data while the user’s viewing and interacting with the page (hence the “asynchronous” part of AJAX). Those requests are HTTP requests just like the one the browser used to retrieve the page in the first place, as well as any images, stylesheets, and so forth. As such, the XMLHttpRequest object can be used to retrieve any kind of data, not just XML. For example, JavaScript can use XMLHttpRequest to retrieve a plain text file from a Web server and display its contents within a form.

The XMLHttpRequest object analyzes the MIME type of the data coming back from the Web server by looking at the Content-type header that precedes the data. If it’s text/plain for example, you can access the text by examining the XMLHttpRequest object’s responseText property. But, if it’s text/xml, the XMLHttpRequest object takes an extra step: It runs an XML parser on the returned document and builds a Document Object Model (DOM) tree in memory representing the document, and makes that available in the responseXML property. You then can use JavaScript’s standard DOM methods to navigate the tree and retrieve elements, attributes, and other text occurring in the tree.

XML is the standard way to interchange data, but it’s often not the best way. Although XML can add structure and metadata to data, it does so in an overly verbose way. XML also has a fairly complex syntax, requiring a non-trivial parser to attack it. In JavaScript, XML must be parsed into a DOM tree to be used. And, once you’ve constructed the DOM tree, you still have to pilot through it to create corresponding JavaScript objects or otherwise use the XML data in your client-side Web application.

Fortunately, there’s a better way.

Welcome to JSON

The JavaScript Object Notation, or JSON, is a lightweight syntax for representing data. JSON’s elegance comes from the fact that it’s a subset of the JavaScript language itself. You’ll see why that’s important later. First, compare the raw syntax of JSON against XML.

Both XML and JSON use structured approaches to mark up data. For example, an address book application might provide a Web service that yields address cards in this XML format:

<?xml version='1.0' encoding='UTF-8'?>
<card>
   <fullname>Sean Kelly</fullname>
   <org>SK Consulting</org>
   <emailaddrs>
      <address type='work'>kelly@seankelly.biz</address>
      <address type='home' pref='1'>kelly@seankelly.tv</address>
   </emailaddrs>
   <telephones>
      <tel type='work' pref='1'>+1 214 555 1212</tel>
      <tel type='fax'>+1 214 555 1213</tel>
      <tel type='mobile'>+1 214 555 1214</tel>
   </telephones>
   <addresses>
      <address type='work' format='us'>1234 Main St
         Springfield, TX 78080-1216</address>
      <address type='home' format='us'>5678 Main St
         Springfield, TX 78080-1316</address>
   </addresses>
   <urls>
      <address type='work'>http://seankelly.biz/</address>
      <address type='home'>http://seankelly.tv/</address>
   </urls>
</card>

With JSON, it looks like this:

{
   "fullname": "Sean Kelly",
   "org": "SK Consulting",
   "emailaddrs": [
      {"type": "work", "value": "kelly@seankelly.biz"},
      {"type": "home", "pref": 1, "value": "kelly@seankelly.tv"}
   ],
    "telephones": [
      {"type": "work", "pref": 1, "value": "+1 214 555 1212"},
      {"type": "fax", "value": "+1 214 555 1213"},
      {"type": "mobile", "value": "+1 214 555 1214"}
   ],
   "addresses": [
      {"type": "work", "format": "us",
       "value": "1234 Main StnSpringfield, TX 78080-1216"},
      {"type": "home", "format": "us",
       "value": "5678 Main StnSpringfield, TX 78080-1316"}
   ],
    "urls": [
      {"type": "work", "value": "http://seankelly.biz/"},
      {"type": "home", "value": "http://seankelly.tv/"}
   ]
}

As you can see, JSON has structure with nesting of data elements, just as XML does. JSON too is text-based, as XML is. Both use Unicode. JSON is just as readable by humans as XML is. Subjectively, JSON is clearer and has less redundancy. The JSON Web site describes the syntax of JSON rigorously, and yet does so briefly. It really is a simple little language! XML is certainly appropriate for marking up documents, but JSON is ideal for data interchange. Each instance of a JSON document describes one object with nested objects, arrays, strings, numbers, boolean values, or null values.

In these address card examples, the JSON version is lighter weight, taking 682 bytes of space, whereas the XML version requires 744. That’s not a spectacular savings, of course. The real benefits come in the parsing.

XML Versus JSON: the Smackdown!

By using the XMLHttpRequest object, you can retrieve both XML and JSON files from within your AJAX-based application. Typically, your interaction will go something like this:

var req = new XMLHttpRequest();
req.open("GET", "http://localhost/addr?cardID=32", /*async*/true);
req.onreadystatechange = myHandler;
req.send(/*no params*/null);

As the Web server replies, the handler function you passed in (myHandler in this example) is called repeatedly, affording you an opportunity to abort the transaction early, update a progress bar, and so forth. Frequently, you only take action when the Web request is complete; at that time, you use the returned data.

To handle the XML version of your address card, the code for myHandler might look something like this:

function myHandler() {
   if (req.readyState == 4 /*complete*/) {
       // Update address field in a form with first street address
       var addrField   = document.getElementById('addr');
       var root        = req.responseXML;
       var addrsElem   = root.getElementsByTagName('addresses')[0];
       var firstAddr   = addrsElem.getElementsByTagName('address')[0];
       var addrText    = fistAddr.firstChild;
       var addrValue   = addrText.nodeValue;
       addrField.value = addrValue;
   }
}

Notice that you didn’t have to parse the XML document; the XMLHttpRequest object did that automatically and made the parsed DOM tree available in the responseXML property. By using that property, you call the getElementsByTagName method to find the addresses part of the document, and you use the first one (of only one) found. Then, you call getElementsByTagName again this time on that addresses element to find the first address element, and again use the first one found. Then, you get the first DOM child of that element, which is a text node, and get the node’s value, which is the street address you want. Finally, you can display it in the form field.

That’s a lot of work! Now, let’s try it with JSON:

function myHandler() {
   if (req.readyState == 4 /*complete*/) {
       var addrField = document.getElementById('addr');
       var card = eval('(' + req.responseText + ')');
       addrField.value = card.addresses[0].value;
   }
}

The first thing you need to do is manually parse the JSON response. However, because JSON is a subset of JavaScript, you can use JavaScript’s own compiler to do just that by calling eval. Parsing JSON is a one-liner! Moreover, navigating an object synthesized from JSON is identical to navigating any JavaScript object. It’s far easier than navigating through the DOM tree. For example:

• card.addresses[0].value is the first street address, “1234 Main Stb &”
• card.addresses[0].type is the type of the address, “work”
• card.addresses[1] is an object which is the home address
• card.fullname is the name on the card, “Sean Kelly”

If you’re watching closely, you might’ve noticed that the XML version at least states up front what object is contained in the document with the root document element, card. This is absent in the JSON version. Why? Presumably, if you’re developing JavaScript that accesses a Web service, you already know what you’re going to get back. However, you can include such a nicety in JSON:

{"card": {"fullname": ...}}

By using this technique, your JSON files always start with an object with a single named property that identifies the “kind” of the object

Is JSON Fast and Reliable?

JSON produces slightly smaller documents, and JSON is certainly easier to use in JavaScript. XMLHttpRequest parses XML documents for you whereas you have to manually parse JSON, but is parsing JSON slower than parsing XML? I tested the XML parser built into XMLHttpRequest against JSON on these address cards and put them through thousands of iterations. Parsing JSON was 10 times faster than parsing XML! When it comes to making AJAX behave like a desktop application, speed is everything, and clearly, JSON is a winner.

Of course, you might not always have control of the server-side that’s producing data for your AJAX application. You might be using a third-party server for your data and it’s possible that server provides only XML output. And, if it happens to provide JSON, are you sure you really want to use it?

Notice in your example that you passed the response text directly into a call to eval. If you trust and control the server, that’s probably okay. If not, a malicious server could have your browsers executing dangerous actions. In that case, you’re better off using a JSON parser written in JavaScript. Luckily, one already exists.

Speaking of parsers, Python fans might’ve noticed that not only is JSON a subset of JavaScript, it’s also a subset of Python. You can evaluate JSON directly in Python, or take advantage of a safe JSON parser instead. Parsers for JSON exist in dozens of other languages as well; the JSON.org Web site lists them.

JSON on the Server Side

So far, you’ve been focusing on using JSON in AJAX-based Web applications running in the client browser. Naturally, there has to be something in the Web server to produce that JSON in the first place. Luckily, creating JSON or “stringifying” it from existing data structures is fairly straightforward. Certain Web application frameworks, such as TurboGears, automatically include support for JSON output. JSON stringifiers exist for several languages as well.

In addition, commercial Web services providers are taking note of JSON. Yahoo recently made many of their Web services JSON-enabled. Yahoo’s various search services, travel planners, del.icio.us, and highway traffic services all support JSON output. Doubtless, other major Web services providers will jump on the JSON bandwagon.

Conclusion

JSON’s clever idea of being a subset of JavaScript (and Python) makes it an instantly useable, lightweight, and highly nimble way to handle data interchange for AJAX. It’s faster to parse and vastly easier to use than XML. It’s bound to become the buzzword of the day for “Web 2.0.” Any developer, whether of the standard desktop application variety or of Web applications, is bound to appreciate its simplicity and adroitness. I hope you enjoy using JSON in your own buzzword-compliant, Web-2.0-based, AJAX-enabled, agile, rapid application development, on-or-off-rails applications.

Top 10 Search Engines & Directories

To make sure we don’t get too stuck in a rut with our tutorial posts I decided to branch out a little bit and talk about Adobe Flex 2.0. I recently spent a lot of time figuring out how to do this. Basically what I am going to go over here is how to use php and json to send data to your flex application, and then how to use that data in Flex. 

Below is the final product of what we are going to create today - to view the Flex source right click the flash movie and select ‘View Source’. Pressing each of the buttons sends a request to our php code for data. If you click the “Get Employee” button we just get a single person back, and if you click “Get Manager” we get a manager back and his employees (which is an array of people). This is a very simple little app, and not particularly useful, but it does have everything needed to show how to communicate between php and flex using json.

The first thing we are going to go over is the php code. The php code creates a few classes for the objects that we will pass to our flex application. We also have code to check if a GET variable has been set, we use this to tell the php code what we are requesting. If the variable “getPerson” is set we create a person and echo it (after we encode it into json) to send it to the Flex app. Ideally your data would be stored in a database, but for simplicity, we’re just creating Person objects directly in the php code.

The next thing to do is setup the basic application for flex. The following code is the simplest flex application. This sets up an application with specified height and width and also adds the view source option to the movie, with the source file specified by “viewSourceURL”.

The next thing to do is setup the user interface. This is pretty standard flex mxml, nothing should look out of place. The user interface has a couple of text fields for the data we get back from the php code, a datagrid, and two buttons. This is all setup on a panel. The one important thing to observe is that the dataField properties on the DataGridColumns, these names correspond to the variables from the objects in the php code.This code goes inside the Application block.

Now that our user interface is setup and ready to go we can add our http services to go ask for the data from our php code. Now in flex you can setup all kinds of different services. We are just going to setup a simple http request service that sets a GET variable and tells the service that we want to run a function once we get the results. As you can see in the code below we send both services out to the same php page, which is the one we made earlier. Also each one sets one GET variable, which is done inside the mx:request block. Lastly, the result is an event which we hook to, to process the results of the request (our JSON data). This code goes at the very beginning of the file right after the Application opening element.

Ok, now let’s get into the actual JSON decoding, which is really simple. So at this point if your using flex builder you will be getting a error message about an undefined method for personJSON(event) and managerJSON(event). We are going to solve that right now. First things first - lets just put in the method signatures so the application can build and run. The way this is done is by inputting a script tag and adding our actionscript functions inside there. You’ll notice we added two import statements to import our JSON serialization functions and use the result event. This code will go right above the http services we just setup and below the Application opening element.

Now down to the actual work of our application, the first thing we need to do in both of the functions is get the result back and we store it in a string. The next thing we do is call the function JSON.decode on the string, this function will return us an object with all the same properties of the one sent by php - we set this equal to a variable. We can now use this object and reference the properties using the . (dot) notation. So to get the first name of the person we simply use variable.first_name and so on for the rest of the variables. So that takes care of getting a person. And the above code is changed like so.

This takes care of all the text boxes we created and puts the correct values in them. Now we have to worry about that datagrid we created, and you might have noticed we haven’t dealt with the employees of the manager yet. Well this is handled pretty nicely in the manager function. We are going add a new var called employees and this will be an Array. Because of the JSON.decode function we can simply cast the employees as an Array and all will be fine. The next thing we do is actually create an ArrayCollection to use for the data provider for the datagrid. This is a best practice when using array data for the provider because the ArrayCollection allows for some extra functionality. The final setup is to set the dataGrid.dataProvider equal to the ArrayCollection. Also we set the dataProvider equal to null in the person function to clear our the data in the data grid. To make all this work we also need to add another import for ArrayCollection. This leaves us with the following code.

Now you might have tried it at this point and said “Hey, this isn’t working!”, well that is true. This is because we never hooked our buttons up to send the requests. This is really simple, we just add click events for both buttons and the corresponding service.send() commands to the click events. The code below is our new button code.

So this leaves us with the final flex code. This along with the php code at the beginning of the tutorial allows for JSON data to be sent to your flex applications.