Should I use AJAX or get every data beforehand

Question

I have a web app where I need to change a drop down list dynamically depending on another drop down list.

I have two options: Get all the data beforehand with PHP and "manage" it later with Javascript. Or get the data the user wants through AJAX.

The thing is, that the page loads with all the data by default and the user can later select a sub category to narrow the drop downs.

Which of the two options are better (faster, less resource intensive)?

Answer 1

The less resource intensive option is clearly AJAX since you're only transferring the required information and no more.

However, AJAX can make the page less responsive if the latency is high for the client (having to wait for connections to fetch data between drop-down choices).

So: Load everything up front if latency is a bigger issue, and use AJAX if bandwidth is more of an issue.

Answer 2

It depends of your main goal:

1. with ajax you'll be able to get the data you want without page refresh, and getting it as needed, thus you app will run faster... It will also allow you to have a single block of code on an independent file to be "called by ajax" when needed, thus ussing that code across your app without loading it constantly!

2. With php, you will have to prep the data beforehand thus writing a little more code, thus making your app slower...

Performance is nothing a user will see, unless we are talking about a big amount of data.

Concluding, ajax is the best way when talking about performance and code effectiveness!

Ps: Personal opinion of course!

Answer 3

If there is a considerable number of possible select options, I would use AJAX to get them dynamically. If you only have a very small set of select options, it would be worth considering embedding them in the page. Embedding in the page means no latency, and a snappier interface.

However, as stated previously, dynamic retrievals are very useful if you have a large set of options, or if the options are subject to changing dynamically.

As with any ajax request, remember to display some form of visual feedback while the request is underway.