|Best use of AJAX for my app|
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.
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?
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:
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
3. Process the request, and fetch the required results
4. Pass a JSON object back in the results
5. Parse the JSON data, and populate the page using that data
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;
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.
Also consider if server uses gzip/deflate, repeated content compresses well, the compressed JSON and HTML size may be similar.
... some other stuff here, then...
info += '<div class="blah">'+tabNav+
<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>
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.