In most scenarios you need to only send JSON (or XML as appropriate, I am using JSON as an example).
- If you are sending data such as stock quotes, use JSON.
- If you want to keep the network layer very lean then send pure JSON data and let the client do the heavy work of adding markup.
- If the client page is persistent then send JSON. The client can then send a greeting to Person.Name. It can refresh Person.Score or show a form to edit Person.Status, all dealing with just one Person object.
- If you are exposing web APIs, obviously use JSON so the client can do whatever they want with it.
Now that said, I really dislike generating HTML from JavaScript. It's a maintenance nightmare and I simply don't like mixing the two. So how do you avoid generating the HTML in JavaScript if all you are sending is JSON? If you are dealing with Person(s) object, when you first the render the page, you would render it as such:
...
...
When you get the person data via AJAX, just populate the above DOM structure.
If you wish to display information for multiple Persons then instead of populating the DOM structure directly, you should make a clone of it and then populate it. This way your template stays intact and you can re-use it.
