So what is AJAX?

So what is AJAX?

You may have heard in tech conversations phrase such as “it will use lot’s of AJAX” or “will it be using AJAX for a single page application?”. AJAX has revolutionised the use of web applications and interfaces, moving from a sequential process, where the web page has to be reloaded for each action, to one where it is possible to experience a full website without ever leaving the initial page.

To see AJAX in all its glory go to the Google home page in the Chrome browser press F12 to display the Developer Tools section. Click on the Network tab. Start typing and watch the asynchronous requests to Google’s servers checking for every single search ever made and what you are likely to type next based on user’s previous searches. You can then open out the Preview sub tab as show below and see the suggestions that popup into the search tab. Are you amazed that Google can process this amount of data and without any disruption to the typing process? If not you most likely didn’t use the web when you had to type the entire phrase, wait for the egg timer, the white screen and the page of useless results! Ever used a mapping tool and scrolled the map to display a different part of your area? Did the map reflow immediately? Is that just magic or did the developer programme the interface to load the adjoining map squares in anticipation of the scroll? That would be AJAX again.

AJAX is short for Asynchronous JavaScript And XML or unfortunately in the UK a well known cleaning product! Ajax is also a mythological Greek god. The Asynchronous part refers to the fact that different parts of the web page can load at the same time without reloading the entire page. Hence the code within the page is able to rewrite smaller components of the page without disrupting the overall layout. The XML part refers to Extensible Markup Language, which is a tag-based markup language much like HTML and is often used to exchange information, although JSON (JavaScript Object Notation) is more commonly used nowadays.

Asynchronous loading actually predated AJAX usually using a hidden iframe (inline frame) tag. JavaScript on the main page was used to load more JavaScript code into the iframe, which then in turn modified components of the main page. In 2002 I was given the brief “can it work like My AOL” for a portal page. This involved dragging and dropping containers around the page and loading content into them without disturbing the page. You probably take this kind of behaviour for granted now but back then it was a back breaking programming exercise and brought the computers of the time to a standstill due to all the processing that the user’s computer had to carry out.

Then in 2005 Jesse James Garrett wrote an article and coined the acronym AJAX. The tools were quickly standardised whereby a developer could simply specify that they wanted the page to carry out an asynchronous request and then receive and process the data. Nowadays many systems rely entirely on AJAX to reload and reflow the web page. This is of course commonplace in Desktop software where the programme has immediate access to data and operations such as saving and formatting are carried out in-place. However this ignores the fact that originally the web page in your browser on your PC was merely a piece of rendering software. Whenever any intelligence was required a request had to be sent off to the server anywhere in cyberspace for it to do the intelligent stuff and send back a fully formatted web page with new information rendered.

Nowadays it is common for an asynchronous request to be made to the web server, which sends back rows of information. The client (your web browser) then decides what to do with the information, how many rows to write, whether to highlight invalid text or load new images. You may have used a flight booking website where you are typing many combinations of departure and arrival destinations, flight times and dates. The page magically reflows the possible destinations and prices based on these criteria so that you can see the possibilities in real time. Without AJAX this would be impossible.

I hope that this brief article has helped to demystify this 4 letter acronym.