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.