Convert XML to JSON through XSLT for efficient AJAX calls

A couple of nights ago I was thinking about optimizing my AJAX-enabled utilities. One of the major sources of latency (not catastrophic, but still a concern) is extraneous bytes being passed across a network or the Internet due to verbose XML. Too often the payload I need to work with, even when filtering a view of a subset of a larger data structure, contains stuff I don't need and can thus avoid. Enter JSON.

JavaScript Object Notation is a perfect solution for getting performance increases for asynchronous remote scripting, being a lightweight alternative to XML, the same way XML continues to be a lightweight alternative to managing database communications. But with so many systems already storing their data in XML, either in memory or on disk (and possibly for use in other implementations), we don't need to re-architect entire apps to use JSON. Enter XSLT.

You can easily use XSLT logic to reformat XML data as valid JSON strings, thereby reducing the payload passed down to a web client in an AJAX call. I worked up a quick demo of an existing app I'm running on my company's site, displaying grouped contact lists. This is an example of how to leverage JSON without breaking in-place systems.

• View the demo contact list
• Download the files in this tutorial

The demo uses 6 files:

• client.html - main interface through which users will interact with the system
• employeelisting.css - basic styling rules
• employeelisting.xml - data store for the app
• employeelisting.xsl - transformation templates that take a parameter specifying the group to display
• ajaxGetEmployeeListing.js - JavaScript library of functions required for asynchronous call and DOM scripting
• convertXMLToJSON.aspx - the server-side remote script to be called that stiches it all together - a .NET program that loads the XML data and passes the required parameter to the XSLT process, caching the data on the server and sending the output to the browser

Since the data is fairly static, the ASP.NET page caches the data on the server to further reduce the latency that may arise due to data transmission, making the load a bit smaller. An additional efficiency is gained by the remote script programmatically clearing all HTTP headers before adding and setting the "Content-Cache" header to a value of "no-cache". This ensures the client doesn't inadvertantly cache the data in the event it changes.

Weird things I learned after this project:

• I already knew XSLT's generate-id() function guarantees a unique ID on that instance of a page, but not across page refreshes, typically naming nodes something like "ID{some_arbitrary_string}". But when run through the ASP.NET process, the IDs "XSLT{node_name}{arbitrary_numerical_string}".
• Despite the JSON string needing to be only text returned to the client (and set as such in XSLT), the "ContentType" HTTP header still needs to be "text/html" in the ASP.NET page. Initially I set the header to "plain/text", which forced the browser to prompt to user to download or save the served file through the Windows "File Download" dialog.
• In ajaxGetEmployeeListing.js the "url" variable pointing to the remote script is globally scoped, and reflects a root-relative path on the server. I ran into JavaScript errors when initially using an absolute path, and people would try to navigate to the page without typing in the "www." in the URL. (Thanks Jonah)

Realistically, converting XML to JSON in this particular implementation, given the small set of data not changing with great frequency likely won't return significant performance gains. This would be a heckuva undertaking just to squeeze out a few hundred milliseconds. I ran some tests and the AJAX app calling JSON data ran about 1/8 of a second faster than its XML equivalent. However, in applications where the XML is filled with unnecessary downstream clutter (case in point: about 95% of the metadata in most SOAP calls), this would be an effective solution.

Hopefully, I've inspired you to use JSON creatively and how to really get the most speed out of your AJAX apps. Plan your code, code your plan!