My Portal Project

So parts one and two covered the basics of using JSON, but what about this JSON/XML battle? In this post we’ll take a peak at how JSON can be used as a replacement for XML in some cases, and even pit the two side by side in a performance test.

Update to these numbers here

The foundation of comparing JSON to XML is to understand that JSON can return associative arrays to your javascript call. Take a look at this example (reminder: my examples show the syntax used if the JSON object is being returned from an AJAX call. Otherwise we would not have quotes around each string):

{"ajaxReturn":
     {"stuffToUse" : [
           {"name":"first","field1":"firstvalue","fieldn":"firstN"},
           {"name":"second","field1":"secondvalue","fieldn":"secondN"},
           {"name":"third","field1":"thirdvalue","fieldn":"thirdN"},
     ]}
}

The XML comparison for that example would look something like this:

<ajaxReturn>
     <stuffToUse name="first" field1="firstvalue" fieldn="firstN" />
     <stuffToUse name="second" field1="secondvalue" fieldn="secondN" />
     <stuffToUse name="third" field1="thirdvalue" fieldn="thirdN" />
</ajaxReturn>

So, in order to make use of our JSON object, we simply run it through our old friend EVAL, which would return to us an array that we could then use in a loop like this:

for (int x; x < ajaxReturn.stuffToUse.length; x++){
     var foo = ajaxReturn.stuffToUse[x].name;
     var bar = ajaxReturn.stuffToUse[x].field1;
     var argh = ajaxReturn.stuffToUse[x].fieldn;
}

Likewise, to process the comparison XML, we would use some code like this:

var xmlDoc = ajaxRequest.responseXml;
var stuff = xmlDoc.getElementsByTagName("stuffToUse");
for(x=0; x < stuff.length; x++){
     var foo = stuff[x].getAttribute("name");
     var bar = stuff[x].getAttribute("field1");
     var argh = stuff[x].getAttribute("fieldn");
}

Not much difference is there? So why do so many claim JSON better than XML? Maybe its in the performance. So let’s do a side by side comparison where we take an XML string, a JSON string, and compare the time it takes the browser to pull the values and render them. I created a test page that has an embedded JSON string, and an XML data island, both with 100 nodes, each node with two fields. When you click either the “test xml” or “test json” buttons, the javascript will parse out the appropriate string and concatenate all of the values into another DIV. Below each button will be the number of milliseconds that the parse and loop process took.

Anyway, here is the link to the test page, and below is a quick summary of the surprising results.

The performance numbers are the average of 10 tests after discarding those strange negative numbers. So besides the obvious blowout of Internet Explorer over Firefox, is the idea that JSON is only marginally faster, if at all.

So this begs the question: is JSON better than XML?

My 2 cents: I would not switch all of my AJAX pages to JSON just for the heck of it, especially if those pages might be utilized by non-javascript systems (like server side code). But, if you need to return functions/methods to your calling code, JSON certainly makes it easier.

This entry was posted on Monday, June 19th, 2006 at 9:04 am and is filed under Code Bin, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.