Using Ajax, is it better to generate additional markup in the server or the client side?

Question

Which is better in AJAX request, Response with ready HTML or response with just data and write HTML using JavaScript, and this JavaScript will use a predefined HTML template to put the coming data inside and show on the page.

Creating the HTML on the server and send to the page, will decrease the client side JS code, but will increase the response size.

Sending the data to the client side will decrease the response size but will increase the JS code.

Which is better and most used?

Answer 1

I think the right solution is highly context dependent. There may be a right answer for a given situation, but there is no one size fits all answer. Generally, if I'm using a partial view that gets replaced via AJAX, I'll return html. If I'm performing an action on a small part of something, I'll use JSON. I'm probably more likely to use JSON as there are more situations where it fits, but I try to pick the best solution for the problem at hand. I'm using ASP.NET MVC, though. Other frameworks undoubtedly have different characteristic solutions.

Answer 2

I've seen both used. In addition to the tradeoffs listed in the OP, I'd add:

• It is better to send the information as data, not html since you'll then have more options in how you will use it.
• What is your comfort level with JS?
• You can use multiple UI's (on different pages) and can re-use the data on the page. Eg display the data in a short form and in a long form, but use the same data source. -- letting the client switch between the two on a page without requiring a server trip.
• A pure JS implementation of the liquid template system is available for client-side templating: http://www.mattmccray.com/archive/2008/12/11/Liquidjs_A_Non-Evaling_Templat

Larry