JSON – perfect data exchange format for AJAX

Posted March 7th, 2009 by Juozas

If you are using library such as jQuery, it supports AJAX responses in very different formats. For example, jQuery.get supports “xml”, “html”, “script”, “json”, “jsonp” and “text”. Which to choose?

Let’s say we have these variables, which we want to pass to JavaScript:

$array = array(
	'status' => 'OK',
	'message' => 'My status message',
	'additional' => array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
);

From all available formats XML and JSON can be chosen as two absolutely different formats, since HTML is related to XML, JSONP to JSON. Let XML be our first choice. First, you need to encode this data in XML format, here ArrayToXML class can be used. Using given class, output can be generated by:

echo ArrayToXML::toXml($array);

Quite straightforward, but if you know how XML structured, you can image that output is “huge”:

<?xml version="1.0" encoding="utf-8"?>
<data><status>OK</status><message>My status message</message>
<additional>
<unknownNode>1</unknownNode><unknownNode>2</unknownNode>
<unknownNode>3</unknownNode><unknownNode>4</unknownNode>
<unknownNode>5</unknownNode><unknownNode>6</unknownNode>
<unknownNode>7</unknownNode><unknownNode>8</unknownNode>
<unknownNode>9</unknownNode><unknownNode>10</unknownNode>
</additional></data>

XML result’s mark-up is probably bigger than data itself – not very good when response should arrive as soon as possible. Now let’s compare it to JSON. PHP has native JSON support, so everything can be done with one function: json_encode. It is used like this:

echo json_encode($array);

Neither harder, nor easier to use than ArrayToXML. Main strength of JSON is output size:

{"status":"OK",
"message":"My status message",
"additional":[1,2,3,4,5,6,7,8,9,10]}

Thats it. For this example, size of outputs is different, but still so small, that speed increase would be unnoticeable. However, with bigger data sizes output size will start to matter. XML format, in my belief, is simply not the best in storing data efficiently, but still I use it for XML-RPC or SOAP.

jQuery (probably other libraries also) transforms returned string into object in background (it also does it safe, don’t evals() blindfolded) – response data can be used immediately. I haven’t checked, but transforming XML into object should be remarkably slower. You just need to make sure to specify correct response format and jQuery will do all the work for you:

$(document).ready(function() {
	$.get(
		'server.php',
		{param : "value"},
		function (data)
		{
			// data is now object
			// data.status, data.message,
			// data.additional.0-10 is available
		},
		"json" //!!!
	);
});

I used to use XML or even HTML for AJAX communications, but as soon as I discovered JSON, I absolutely forgot about all previous methods. In my opinion, JSON should be used as a default choice. Not only future browsers will have native JSON support, but it’s very easy to use even now. Both server-side app’s and jQuery support for JSON is very good (and fast).

Comments (1)

  1. fosron

    JSON is ‘da bomb’ :) I’m doing an e-shop right now and i can’t imagine it without jQuery and JSON. Ajax just can’t live without them :)

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">