I am independent from organisations mentioned and am in no way writing for or endorsed by them.
Names / logos can be trademarks of their respective owners. Please review their websites for details.
The information presented in this article is written according to my own understanding, there could be technical inaccuracies, so please do undertake your own research.
All screenshots are from Firefox 95.0.1 on Ubuntu 20.04.
Note: Image of the ducks as shown on the web page is my own image, please don’t use without my permission.
- AJAX – en.wikipedia.org/wiki/Ajax_(programming)
- Asynchronous – en.wikipedia.org/wiki/Asynchronous_I/O
- Bandwidth – en.wikipedia.org/wiki/Bandwidth_(computing)
- Computer network – en.wikipedia.org/wiki/Computer_network
- CSS – en.wikipedia.org/wiki/CSS
- Firefox – www.mozilla.org/en-GB/firefox/new/
- Firefox Developer Tools – developer.mozilla.org/en-US/docs/Tools
- Moodle – moodle.org
- Ubuntu – ubuntu.com
- User experience – en.wikipedia.org/wiki/User_experience
- Web browser – en.wikipedia.org/wiki/Web_browser
- Web server – en.wikipedia.org/wiki/Web_server
- XHR – en.wikipedia.org/wiki/XMLHttpRequest
- XML – en.wikipedia.org/wiki/XML
The problem and why AJAX is a solution
But what happens when you interact with the page and require more information than supplied, because you’ve taken one of the possible paths presented to you that others may not take? That information is not with you, its with the provider of the information via their web server. If what you require is almost completely different and in a different context, then it makes sense to navigate to a new page, but what if the information is relatively small and makes sense to be integrated with what you already see? That’s where AJAX comes in, it enables a part of the existing loaded web page to be updated without the expense of having to reload the entire page.
To demonstrate AJAX being used, take the scenario where an administrator of a Moodle site wants to access all of the actions available to them for a given page. In the course of using the site, this won’t need to be done for every page and therefore the ‘Site administration’ menu entry is a trigger that when clicked, instigates an AJAX request and response to populate the menu:
And once complete we will see ‘Notifications’, ‘Registration’ and so forth depending on the configuration of the site. The whole process took 8.86 seconds on my development system, with only 116KB or so of data transferred, the actual page being 1.36MB, thus a saving, even if you take into account caching on a second page visit bringing the page size down to 180KB. But then on the original page load, you’ve saved an extra 116KB as that’s the additional menu options you may not have required in the first place!
Without going any further into the exact technical operation of AJAX, then I’ll leave things here. However, if you do wish to look, then do use the network component of the ‘browser development tools’ (E.g ‘Firefox Developer Tools’), often accessed by pressing ‘F12’ on your keyboard, to look further into what’s being sent and received by AJAX (Here shown as XHR) on your system. The specific call here is to ‘getsiteadminbranch.php’ on the server that does the work of retrieving the additional menu options.
What do you think? Please let me know in the comments.