Getting data is already available or data is easily accessible
I usually see that on car sites where there are models and models. Their usual <select> (without JavaScript) includes <optgroup> as such:
<select> <optgroup label="Ford"> <option value="21">Escape</option> <option value="21">F-150</option> </optgroup> <optgroup label="Toyota"> <option value="51">Corolla</option> <option value="52">Yaris</option> </optgroup> </select>
Then usually hide this <select> and create 2 new options, one for make and one for models.
All is well before that. They start to mess up here.
Then they process the server request to get the make list, and then run another request to get the list of models, when they could just parse the source element, try to get their information. Then, every time you change make, another request is executed ...
The above example is a great example of when NOT to use AJAX. Consider this: a query is longer than an analysis of the available data, so it makes the user wait. They probably query their database every time, so it has the advantage of using their central processor. And it requires more bandwidth. A terrible waste of resources.
What they had to do
They should simply parse the DOM try under <select> to get the relevant information. Each <optgroup> is an element in make <select> , and each <option> of <optgroup> is an element in <select> models.
Other examples
- Using AJAX for simple static modifications of the DOM (in most cases, you do not need AJAX to switch from one tab to another, just include the data in the original request).
- Using AJAX to retrieve data at boot (why not include it with the original request?)
- Using AJAX for an image gallery (why not include images and manipulate them after completing a request?)
source share