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.
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):-
- Your browser sends a request to a url and awaits a response.
- The receiving server processes the request and sends back some content (likely html).
- 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):-
- You press the button
- 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).
- 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.
- 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.
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.