Speeding Up AJAX with JSON

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.

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

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.

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.