Best use of AJAX for my app

[Seattle_SEM]

So I'm using jQuery AJAX to fetch content from my server. Consider each thing I am fetching an item, and there's maybe 100 or so items per page.

Anyway, right now I'm returning fully formed HTML from the server to to the client via AJAX, and then just stuffing that content into a div.

It seems like I could make the client/server communication a lot more efficient if I just returned JSON data, and then built the final HTML from javascript.

My problem with this, is that isn't building HTML from Javascript brittle?

What do you think? Would you accept a little larger page (300kb versus maybe 100kb), but gain flexability? Or optimize to make it smaller? Any tips for doing this?

Thank you!

[Fotiman]

100 AJAX requests is a lot. If it were me, I would try to reduce this to a single request if possible. Each requests requires back and forth HTTP communication, which is slow. I would try to do something more like this:

client side:
1. Prepare the data needed to make the requests for 100 items
2. Perform a single AJAX request, passing the data required to return 100 items

server side:
3. Process the request, and fetch the required results
4. Pass a JSON object back in the results

client side:
5. Parse the JSON data, and populate the page using that data

I'm not sure what you mean regarding "building HTML from JavaScript is brittle". The obvious down side is that anyone with JavaScript disabled won't be able to get at your items unless you provide some sort of fallback functionality. But I don't know what your particular app is or does, or who your client base are (for example, in some cases it may be ok to make JavaScript a requirement).

[Seattle_SEM]

Thanks so much, Fotiman!
I'm sorry I wasn't clear, I am currently doing 1 AJAX request that returns 100 items.

So it sounds like you're a fan of just using JSON and not formatted html via ajax?

What I meant is that, do I really want to build and maintain a good size chunk of html like this, it seems more challenging then just handing that on the server with an ASPX repeater or something:

content +="<tr><td><img src=/images/images.aspx?imageid=" + ImageID;
content +=........

Thanks!

[Fotiman]

Ok, good (that you're not performing 100 requests). :)

I think transmitting back the JSON data would be lighter over the wire than transmitting the fully formed HTML content, and generating the markup client side would still be quick. The bottleneck, IMO, would be that communication over the wire, so I would prefer to keep that as light as possible. It really depends on exactly how much markup you're talking about, and how much heavier it would be with all the HTML content.

[daveVk]

Also consider if server uses gzip/deflate, repeated content compresses well, the compressed JSON and HTML size may be similar.

[Wittner]

I've been through the same thing as you Seattle_SEM and I ended up using JSON. It works much more smoothly and efficiently. Also, in the end I thought it was better coding practice to just let my models on the server do what they're best at - serving up raw data. Also, changing the HTML structures at the logic side seems less natural than changing it in the view files. I have a site which uses AJAX for complicated Google maps merged with data from my DB and JavaScript/JQuery handles the html perfectly. You just need to make sure that description fields for instance in the DB have been cleaned up before you fetch them!

[Wittner]

A sample of JavaScript looping through the JSON file (var names changed). It handles the html and vars very well IMO.

$.getJSON(url,function(json){
$.each(json.blah,function(i,item){
... some other stuff here, then...
info += '<div class="blah">'+tabNav+
'<ul>
<li><a class="blah" href="#header'+blah.code+'">Heading</a></li>
<li><a class="tabheader" href="#info'+item.pcode+'">Information</a></li>
<li><a class="tabheader" href="#more'+item.code+'">Heading</a></li>
<li><a href="gallery.php?code='+blah.code+'" title="Title for'+blah.code+'">Another heading</a></li>
</ul>
etc. etc.
';
});

This code outputs tab divs for JQuery UI which also works perfectly with the JSON/JavaScript mix. The #header and #info also run more Ajax queries populating divs on the page, which is about as complicated as I thought I could get but it works! I admit that for me it was a bit of a mind melt getting around it but was worth the perseverence. Hope that helps with your decision,

cheers,

Wittner

[Seattle_SEM]

Wow, thanks for so many good replies!
daveVk, the GZip performed really well (like 90% savings - wow!).

Wittner, thanks for the advice on the JS...that's a nice little JQUery template.

I guess since I'm using .net, I've already got a pretty nice seperation of code and content (c# does all the data work, then passes a DataTable to a ASPX Repeater, which then does the html).

It seems like in todays development enviornment, the biggest challenge is not figuring out *how* to do something, but *which way* to do something. That's a big change from many years ago.