ElearningWorld.org

For the online learning world

Elearning WorldMoodleTechnical

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

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:

AJAX request on Moodle

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.

Gareth Barnard
Latest posts by Gareth Barnard (see all)
blank

Gareth Barnard

Gareth is a developer of numerous Moodle Themes including Essential (the most popular Moodle Theme ever), Foundation, and other plugins such as course formats, including Collapsed Topics.

One thought on “AJAX – Small little updates

  • 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.

    Reply

Add a reply or comment...