Ajax Response: JSON or XML?

Posted on Saturday August 11, 2012 / by Eric Potvin

Who does not work with Ajax these days? This techniques, yeah kinda cool, but very useful makes our life easier and improve the user experience. The three popular callback results are HTML, jSon and XML. In this debate, I will not talk about the HTML because in some occasions it is the only good option.

So which one should you (we) choose for your websites or online applications?

To help you choose, I separate in 4 points my point of vue about and explain each one and why one is better than the other one.

SIMPLICITY

The first point is about simplicity. Simple code is better (well at least for me) to understand, develop and maintain. The jSon structure provides an easier way to understand how the data is build and thrown back to the browser. A single data structure/model is faster to read than two and also does not break if you make a mistake. For example:

{
  'key' : 'value'
}
<root>
  <key>value</key>
</root>

Not a big difference here. What makes the difference between these two are the code. The jSon is easier and simple to read or parse.

$json = json_encode($array);

One line of code in PHP, versus few (for simple XML structure) for XML.

$xmlObj = new SimpleXMLElement('<root/>');
foreach($data as $key => $value) {
	$xmlObj->addChild($key, $value);
}
$xml = $xmlObj->asXML();

In this case, jSon is the winner.

PERFORMANCE

Performance relates to the front end and the back end. If your PHP (or any other coding language) code takes time to generate the jSon or XML code the front end will get the hit. Once the server returns the answer, the front end has to parse it. So performance is not only about how fast the browser has to parse the data but also how the system generates it.

Server Side:

To test both, I used an array with random data. In this test I used 1000 iterations.

As you can see, it nearly 8 times faster to generate the jSon string. If you have high traffic website, this can have a major impact on your response time.

Front end:

Once the request is completed, the JavaScript has to parse the data. The time that takes JavaScript to parse jSon and XML (simple) is very close. The only difference is the time that takes jQuery to load it.

ajax response time json vs xml

In this case, jSon is the winner.

COMPLEXITY

jSon seem to be here an easy option if you write JavaScript since it is JavaScript. On the other hand, XML is not a natural JavaScript structure. To test here's the two structures we will use.

jSon
{
  "first_name" : "Jane",
  "last_name" : "Smith",
  "address" : "1 Jane Lane",
  "city" : "Los Angeles",
  "state" : "CA",
  "zip" : 90017,
  "phone" : "310-555-1111",
  "site" : "www.bookofzeus.com",
  "birthday" : "04\/21\/1975",
  "job" : "Public works inspector",
  "company" : "XYZ inc.",
  "weight" : 115.8,
  "height" : 173
}
XML
<?xml version="1.0"?>
<someone>
  <first_name>Jane</first_name>
  <last_name>Smith</last_name>
  <address>1 Jane Lane</address>
  <city>Los Angeles</city>
  <state>CA</state>
  <zip>90017</zip>
  <phone>310-555-1111</phone>
  <site>www.bookofzeus.com</site>
  <birthday>04/21/1975</birthday>
  <job>Public works inspector</job>
  <company>XYZ inc.</company>
  <weight>115.8</weight>
  <height>173</height>
</someone>

Both use a structure that is easy to read and understand. The only negative point for XML is the duplicate tag name, for example < zip></zip> . So try to read the data inside might be tricky, specially if you don't have a syntax highlighter.

One point I like about jSon is the data type. In this example, the zip, height and weight are consider numbers whereas in the XML they are strings. We read them as a number but the parser will not.

The real complexity here is when you need to read the data or manipulate them, specially if you are in loops. jSon has a very way to read the data.

If we need to access the zip using jSon we can simply use:

success: function(data) {
  alert(data.zip);
});

It is Simple and efficient. On the other than, the XML is a little more complicated. The XML has a huge structure (yes more precise but yet more complex) than jSon. Therefore, accessing the right data is more complex. Let's try to access the zip again:

success: function(data) {
  alert($(data).find('someone').find('zip').text());
});

It seem at first to be easy to write but honestly, this is ridiculous and also it increase the chances of writing errors. Also, I didn't benchmark it but I am sure the find will slow the parser on huge data structures.

In this case, jSon is the winner.

CACHING

A good way to improve performance of course it's caching. If you need to cache your output, one thing you need to think about is how big is what content you have to cache. When you cache, the size of the data matters.

The jSon data structure requires less than the XML data structure since it does not close the elements.

{
  'key' : 'value'
}
<root>
  <key>value</key>
</root>

This way, caching jSon data will take less space on the hard drive or memory than the XML data structure. If your system has lots of data, this can have a huge impact on your hard disk space.

In this case, jSon is the winner.

Conclusion

jSon is the winner overall.

When I first started with Ajax I used XML data structure. When I heard about jSon, I immediately loved it. So obviously, I prefer to use jSon in my scripts and Ajax calls. I am sure XML can offers some benefits, if you know some please let me know.