AJAX – Small little updates
Introduction
Ever wondered what happens when you interact with a web page and it updates a certain part? Well, in this post I’ll briefly describe AJAX, “Asynchronous JavaScript and XML” and what it does for us.
Disclaimers
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.
References
- 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
- JavaScript – en.wikipedia.org/wiki/JavaScript
- 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
When you open a web page, you get the information that you initially require, along with any CSS and JavaScript to enhance user experience of the information. All of this takes up space and therefore ‘bandwidth’, the more that has to be transmitted from the ‘web server’ to your ‘web browser’ over the ‘network’ (Computer network), the longer this can take. Therefore it is advantageous to keep this to the minimum required to improve the ‘user experience’.
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.
An example
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.
Conclusion
What do you think? Please let me know in the comments.
- Moodle 4 Security – A Review – 16th April 2024
- A little bit #fab – 16th March 2024
- Static framework – 16th February 2024
Nice post Gareth.
I think many new Moodle administrators will see AJAX settings her and there, so it helps to have a basic understanding of what these are, and the advantages AJAX can provide, in speeding up pages displayed within Moodle.