5th October 2005
There has been a lot of hype about this thing called AJAX over the last few months, and you are going to be hearing a lot more in the near future. I don’t believe that the hype is unjustified. We firmly believe that this is how the next generation of web applications are going to work, and we’ve been spending a lot of time experimenting and developing code to make it easier to build large scale AJAX applications.
AJAX is an acronym for “Asynchronous JavaScript and XML”. You can read a definition on Wikipedia at http://en.wikipedia.org/wiki/AJAX. But what can you do with it? Let’s start by looking at Google Suggest, one of the first mainstream AJAX applications.
http://www.google.co.uk/webhp?complete=1&hl=en
Start typing in the search box and see what happens. The web page is sending a message back to the web server to ask for a list of previous searches. The server returns these, and they are displayed as you type.
In traditional web-based applications, you need to submit a form and wait for the page to refresh before the data changes. Even a small page over a fast connection can be quite slow as the browser needs to completely re-render the page. With AJAX, it just needs to change it a bit.
The Google Suggest example above is extremely simple. But the power of the AJAX approach becomes more and more obvious when the page gets more complicated. If you’re familiar with one of our admin areas you’ll know that it essentially comprises two types of control. One control lists the things you are looking for and a second allows you to edit them. While you are editing something, there may be related items that are listed on the same page. For instance, while editing a user’s information, the page may also list all of their orders, job applications or uploaded files. Sometimes there can be quite a few of these lists. When it gets too long it starts to slow down. To go to the next page on a list of items, you will need to reload all of the other lists on the page, and the form that edits the item itself. With the AJAX approach, you only need to refresh the data in the table you are paging.
You can see a good example of paged data refreshing on one of Google’s other much-hyped sites, Google Maps.
http://maps.google.co.uk/
Type the phrase “Hotels in London” into the search box and click “Search”. You will notice that the page does not refresh - just the information does.
The ‘A’ in AJAX stands for “asynchronous”. This basically means that you can start doing one job, and then start another before the last one is complete. So going back to the example of refreshing tables of information above, if you were to enter a particularly complex search query for one table and click search it may take some time for the table to refresh. But with the asynchronous approach, you could run another function while you are waiting, for instance navigating to the next page on a different list or updating some data. You can set as many functions as you like going at the same time. Once the server has done its different bits of work, the page will refresh the relevant bits individually in their own time and they won’t interfere with each other.
We are currently implementing this technology within our administration systems, and we can build it into the front end of any project where it is requested.