Javascript and web application data

It is not cut and dry but it should be a simple rule of thumb. If the page "needs" the data then embed it in the page. Needs would mean that no matter what action the user does the data is needed to perform that action.

For example the page is a grid that has a list of orders, the order data is needed to populate the grid which is the only item on the screen. It would make sense to embed the data. Now if the user clicks a row and a popup appears with more data that should probably be done with an ajax request cause the user may or may not see the popup.

The only situation where I wouldn't embed the page when it is need would be if the data takes a very long time to generate. No user would tolerate a url request that takes 5+ seconds to come back. A quick response and a loading mask would be more acceptable.

Going out to separate pages for simple small pieces data is much MUCH slower than referencing it locally. On the other hand, storing too much locally can start causing major issues as well.

If all you want to do is store a few user specific variables, then do it locally. If you want to access and parse entire data dumps with hundreds of rows with tens of columns, do that server-side with AJAX.

It's all about balance. Think of it this way:

I store all my pens at my desk in a cup. I just use them to write and take notes, I have black, blue, red, and a pencil. This works well anything more would just be a hassle.

But say I was a professional artist who needed hundreds or thousands of different pens and pencils of different types, storing all of this on my desk in cups would be a mess and inefficient. I would need to store them in boxes something where I could easily move around and find what I needed, even if I used them constantly this method would still be much more efficient than if I was to just put them all in cups on my desk.

Hope that makes sense. Sorry, I needed an analogy and just happened to look over at my pens. :)

The correct answer is: "It depends".

See it all depends on your need what actually you want. If the requirement of data is huge then it is better to make just one ajax call and store the data in client side and can do further processing. This will slow cut down the extra time which will may be required in huge ajax requests. But in case you require small chunks of data, then making separate ajax requests for each data has no harm.

It's enough to make it feel like that the data is always present, you just have to figure out how to show or process so it will feasible with user point of view.