Advantage(s) of JSON over HTML for AJAX response?

Question

I was reading the code and JS used in Google websites via firebug.

In the Google Music website when we click on left navigation links then Google loads the songs in right body via ajax.

Now When i want to load the content via Ajax then i normally get the HTML from get method and replace the HTML of body with new HTML received

But in Google music i see that when i click on nav links then Google gets the JSON data of 1000s of songs with all title , album and then build the html on fly. if i had to do that same thing i would have called the page get the full page HTML and then replace the body

So i want to know what is the advantage of using JSON the way Google did it

Answer 1

JSON will likely be a significantly smaller data response than HTML and so will download to the client faster. However, the browser you are using will strongly affect how quickly the HTML is constructed on the client and loaded into the DOM (with older versions of IE being the slowest). It would be interesting to see if the page behaved differently for browsers with slower javascript engines.

In my own testing I have seen IE 6 take 60x longer than Chrome for building an HTML table from JSON with 150 rows and 5 columns.