How ajax works – a simple tutorial


Note: this post isn’t about the cleaning brand.

Whether you’re new to web development or not, no doubt you’ve heard of ajax somewhere on the web.  Often considered tricky or fiddly to implement, libraries like jQuery have made it not only accessible, but straightforward to use.

In this article I want to explain in the simplest terms the general concept of ajax and how it works in order to give you a good overall image of what is happening behind the scenes in pages that use the now seemingly ubiquitous concept.   Whilst a lot more does happen behind the scenes than I discuss here, I think the basics should be enough to begin with.

So, what is ajax exactly?   Ajax stands for Asynchronous Javascript And Xml, which nowadays I suppose is a bit of a misleading term, but the concepts are still sound.  It describes the fact that a request can be made via javascript code to another server asynchronously (ie, without any perceivable hangup in the browser) and the browser can deal with the returned data and even update the page you are looking at in real time without having to refresh.  That’s my simplified take on it, anyway.

AJAX these days is pretty much everywhere, from Google Maps to Twitter, and basically describes any action that does something with data that isn’t on the page you’re currently looking at.  Dynamically and without having to click the refresh button, new content can be added to the page and databases can be updated.  It’s one of the steps towards making web applications behave more like native desktop apps and is one of the technologies that makes applications like (for example) Google Spreadsheets work.

How does it work then?  Let’s start with webpages in general.  When you visit a URL, the following happens (at the simplest level):-

  1. Your browser sends a request to a url and awaits a response.
  2. The receiving server processes the request and sends back some content (likely html).
  3. This data/content is then received, parsed, processed and rendered on screen in the browser.

You don’t really see any of this happening, you just press enter, or click a link, and a few seconds later, you see some content on the page.  Next time you click a link imagine what is happening (at some speed, I must add) behind the scenes.  Fascinating stuff, isn’t it?

So.  On to ajax.  How does that work?

You probably won’t be surprised to hear that more or less the same thing happens, only in the background and without any movement away from the page you’re looking at.  Lets say you’re looking at a page with a button on that, when clicked, pulls the latest weather report from another site (such as  the BBC) and displays it on your page.

Here’s what happens (again, oversimplified):-

  1. You press the button
  2. Some javascript code reacts to the pushed button by sending a request to a url, after which it awaits a response.  You can still continue to use/view the page whilst this happens.
  3. The receiving server processes the request and sends back its response to the function that called it.  Again, this can be html, but could also be text, xml or another data format (such as JSON).
  4. The function that was called by the button press listens out for a successful response in answer to the request it made.  Once it has received this, it receives the data that has been sent back and does something with it.  In our example, it is some weather data.  If the response is an error, it can be programmed to react accordingly.
  5. Another part of the same function, or another one, processes the received data and dynamically displays something on the active webpage.  If an error occurred at some point, the function could display an error message in the same way.

Amazing stuff, isn’t it?  The general technology of ajax is driving much of the web today, from live updates on twitter to google maps.  Getting your head around the concepts of what is happening is the first step in being able to use it yourself.

Now you know the basics, the next thing is to learn how to use it.  As mentioned earlier in the article, there are a lot of pre-built javascript libraries that can abstract and simplify a lot of the complex code and make it easier to use and process the returned data.  jQuery is a great example and provides some extremely straightforward ways of dealing with ajax, especially if you are designing for browsers that might deal with ajax in subtly different ways.

In a future article I’d like to post more about ajax, including a couple of tutorials on how to implement it in your pages.  Until then, why not do a little research yourself on the web?

Comments and questions are, as always, very welcome.

Leave a Reply

Your email address will not be published. Required fields are marked *