ajax in each time or load everything at once

Question

you have several links on a page. when clicked, a div gets updated via ajax. the updated div includes data from the database.

according to this scenario, every time a link is clicked, the date is grabbed from the database and injected into the div.

would you now;

1) support this scenario or... 2) would load each link's content in several hidden divs and display relevant div on each link click. this way the ajax call is only called once..

Answer 1

depends... is the content going to change? If so... Ajax every time. If not? Ajax once(or zero times if posible)

Answer 2

If the data you are retrieving is changed regularly and needs to be up to date, I would choose option 1, If not, I would choose option 2 and that way opt to reduce network traffic and increase performance.

You could even make option 3 and render the data (in hidden divs) when the page loads, that way you wouldnt need ajax at all.

Answer 3

If you are considering 2, why not just load the page up with those hidden divs in the first place?

Answer 4

If the data is likely to have changed between the initial page load and the user clicking the link - use ajax.
If you're just presenting a lot of static data in a compact space - load it when the page loads and hide/show as appropriate.

You want to avoid the possibility of someone without javascript missing your content. search engines for example. ajax is still slower than DOM manipulation.

Answer 5

Duplicate of:

http://stackoverflow.com/questions/425744/how-much-content-being-replaced-with-an-ajax-call-is-too-much

Answer 6

Along with depending on how often the content to be loaded in the div changes, one also needs to take into account how much data each div is supposed to contain. Consider, for example, you have 10 divs, each of which is going to contain a pretty substantial chunk of data. Now loading it either during initial page load or loading it all on the first link click would be inefficient if, on an average the user is going to click only a couple of links. Given this pretext, I think there are 2 main points you need to consider in deciding which option to choose for loading the content of the divs :

1. Whether the content of the div will change frequently
2. Whether a lot of data needs to be loaded in the div

If the answer for either 1 or 2 is yes, I would suggest using AJAX to load the content of "only" that div. Otherwise you can load all the divs at initial page load itself