Why is it a bad practice to return generated HTML instead of JSON? Or is it?

I mainly agree with the opinions stated here. I just wanted to summarize them as:

• It is bad practice to send HTML if you end up parsing it client-side to do some calculations over it.

• It is bad practice to send JSON if all you'll end up doing is to incorporate it into the page's DOM tree.

I'm a bit on both sides, actually :

• When what I need on the javascript side is data, I use JSON
• When what I need on the javascript side is presentation on which I will not do any calculation, I generally use HTML

The main advantage of using HTML is when you want to replace a full portion of your page with what comes back from the Ajax request :

• Re-building a portion of page in JS is (quite) hard
• You probably already have some templating engine on the server side, that was used to generate the page in the first place... Why not reuse it ?

I generally don't really take into consideration the "performance" side of things, at least on the server :

• On the server, generating a portion of HTML or some JSON won't probably make that much of a difference
• About the size of the stuff that goes through the network : well, you probably don't use hundreds of KB of data/html... Using gzip on whatever you are transferring is what's going to make the biggest difference (not choosing between HTML and JSON)
• One thing that could be taken into consideration, though, is what resources you'll need on the client to recreate the HTML (or the DOM structure) from the JSON data... compare that to pushing a portion of HTML into the page ;-)

Finally, one thing that definitly matters :

• How long will it take you to develop a new system that will send data as JSON + code the JS required to inject it as HTML into the page ?
• How long will it take to just return HTML ? And how long if you can re-use some of your already existing server-side code ?

And to answer another answer : if you need to update more than one portion of the page, there is still the solution/hack of sending all those parts inside one big string that groups several HTML portions, and extract the relevant parts in JS.

For instance, you could return some string that looks like this :

<!-- MARKER_BEGIN_PART1 -->
here goes the html
code for part 1
<!-- MARKER_END_PART1 -->
<!-- MARKER_BEGIN_PART2 -->
here goes the html
code for part 2
<!-- MARKER_END_PART2 -->
<!-- MARKER_BEGIN_PART3 -->
here goes the json data
that will be used to build part 3
from the JS code
<!-- MARKER_END_PART3 -->

That doesn't look really good, but it's definitly useful (I've used it quite a couple of times, mostly when the HTML data were too big to be encapsulated into JSON) : you are sending HTML for the portions of the page that need presentation, and you are sending JSON for the situation you need data...

... And to extract those, the JS substring method will do the trick, I suppose ;-)

Well,

I'm one of those rare persons that likes to separate things this way: - The server is responsible for delivering data (model); - The client is responsible for showing (view) and manipulating data (model);

So, the server should focus on delivering the model (in this case JSON is better). This way, you get a flexible approach. If you want to change the view of your model, you keep the server sending the same data and just change the client, javascript components, that change that data into a view. Imagine, you have a server delivering data to mobile devices as well as desktop apps.

Also, this approach increases productivity, since the server and client code can be built at the same time, never losing the focus which is what happens when you keep switching from js to PHP / JAVA / etc.

Generally, I think most people prefer to do as much as possible on the server side because they don't master js, so they try to avoid it as much as possible.

Basically, I have the same opinion as those guys that are working on Angular. In my opinion that is the future of web apps.