The AJAX response: Data (JSON, XML) or HTML snippet?

Question

I'm just wondering what is an "ideal" output format for the AJAX response? Pure data (JSON, XML) rendered into the page using some client-side JavaScript template engine? Or an HTML snippet rendered into the page "as-is"?

What is your preference and why?

Answer 1

I prefer send data as json, and creating the html using some framework like jquery.

Answer 2

If you are returning a lot of HTML it is best to put it together server-side and simply load it into the page.

If you are returning something like a bunch of key-value pairs to update a <select> with or something similar, it is best to return it as JSON and build the HTML on the client side.

Answer 3

There is not an "ideal" way for me. Working with pure JSON and jTemplates for client side rendering with jQuery when i need pagination and I've already the template client-side.

Using JSON too when I've to implement a simple call to the server: autocomplete, in-place edit, saving drafts, etc..

When I need a branch new page fragment i use HTML rendering: loading templates, adding panes to the page, rendering custom controls.

btw when I can I prefer json because we can switch to client side object manipulation instead of just having an "update panel".

Answer 4

It depends on the situation, I prefer to send data to the client, and update the page using the client-side framework, because I have one available. If I were writing my own, and the snippets were small enough, id probably do it server side, keep the js as slim as possible.

Answer 5

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:

...
<div class="person display">
    <div class="name"></div>
    <div class="status"></div>
    <div class="score"></div>
</div>
...

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.

Answer 6

It depends very much on what is going to use the data :

For mashup and web services

For data that will be used in your app and from outside, never use HTML : hard to parse, hard to make it fit in another structure.

If it's about few data, like some updated for a widget, use JSON because it's quick and easy to use.

If it can be a lot a data, like the result of a search query, use XML because it's more flexible for huge data analysis.

For internal use only

Don't bother using pure XML. Batch analysis will be always done before output anyway.

Most of the time, you will want to use JSON, since it's more flexible that HTML, yet fairly fast to put in place.

Use HTML if you know the data won't need to be processed afterwards and if the layout is complex. Writting complex HTML on the server side is much easier than using the DOM.