ajax html vs xml/json responses - performance or other reasons

I've got a fairly ajax heavy site and some 3k html formatted pages are inserted into the DOM from ajax requests.

What I have been doing is taking the html responses and just inserting the whole thing using jQuery.

My other option is to output in xml (or possibly json) and then parse the document and insert it into the page.

I've noticed it seems that most larger site do things the json/xml way. Google Mail returns xml rather than formatted html.

Is this due to performance? or is there another reason to use xml/json vs just retrieving html?

From a javascript standpoint, it would seem injecting direct html is simplest. In jQuery I just do this

jQuery.ajax({
    type: "POST",
    url: "getpage.php",
    data: requestData,
    success: function(response) {
        jQuery('div#putItHear').html(response);
    }

with an xml/json response I would have to do

jQuery.ajax({
    type: "POST",
    url: "getpage.php",
    data: requestData,
    success: function(xml) {
        $("message",xml).each(function(id) { 
            message = $("message",xml).get(id); 
            $("#messagewindow").prepend("<b>" + $("author",message).text() + 
            "</b>: " + $("text",message).text() + 
            "<br />"); 
        });
    }
});

clearly not as efficient from a code standpoint, and I can't expect that it is better browser performance, so why do things the second way?

Solution 1:

Returning JSON/XML gives the application more freedom compared to returning HTML, and requires less specific knowledge in different fields (data vs markup).

Since the data is still just data, you leave the choice of how to display it to the client side of things. This allows a lot of the code to be executed on the client side instead of on the server - the server side needs to know only about data structures and nothing about markup. All the programmer needs to know is how to deliver data structures.

The client implementation only needs to know about how to display the data structures returned by the server, and doesn't need to worry about how these structures actually get build. All the programmer needs to know is how to display data structures.

If another client is to be build (that doesn't use HTML as a markup language), all the server components can be reused. The same goes for building another server implementation.

Solution 2:

It will normally reduce the amount of data transferred and therefore improve transfer speed. As anything over-the-wire is normally the bottleneck in a process reducing the transfer time will reduce the total time taken to perform the process, improving user experience.

Solution 3:

Here are a few pros for sending JSON/XML instead of HTML:

1. If the data is going to ever be used outside of your application HTML might be harder to parse and fit into other structure
2. JSON can be directly embedded in script tags which allows cross domain AJAX scenarios
3. JSON/XML preserves the separation of concerns between the server side scripts and views
4. Reduces bandwidth

Solution 4:

You should check out Pure, a templating tool to generate HTML from JSON data.