» next  » last 

Jump to:

Cleaning up the internet with AJAX and SOAP

AJAX, as well as being a popular brand of household cleaner, is a web development term which stands for Asynchronous JavaScript and XML. It's a relatively simple technique for making data driven web pages more user friendly while dramatically lowering bandwidth usage. It's worth noting at an early stage that AJAX is a technique, not a product. Various AJAX components exist, but you can implement an AJAX system from scratch without paying anyone any money!

The basic principle of AJAX is as follows: Using JavaScript, a static web page requests data via HTTP and displays that data within the original page without refreshing it. This lowers the number of postbacks required to update the data presented to the user, so the entire page does not need to be refreshed when the user alters a search term or changes page in a multi-page dataset.

Imagine a web page which presents a simple data table to the user based on a set of simple filtering options. Twenty records are displayed at a time, and links are provided to page through the results (next 20, previous 20 etc). In a traditional web based system, we end up with a situation like that shown in figure 1...
  • User navigates to page
  • Entire page is fetched from server, including the first 20 records
  • User clicks the next page button
  • Again, the entire page is refreshed, this time with the second set of 20 records

Navigating to the first and second pages of a record set in a traditional web application
Figure 1: Navigating to the first and second pages of a record set in a traditional web application

This is fine for a simple application, where the overhead of refreshing a page is relatively small. However, even simple websites (like this one for example) tend to be decorated with quite a bit of "furniture": sidebars, news headlines, logos, banners and who knows what else. This can add up to a couple of megabytes per page, so the overhead associated with a full postback can be quite large. Navigate the forums on this site at a busy time of day or on a slow connection and you'll note that it takes a while to refresh the entire page as you select different topics and posts.

Using the AJAX technique overcomes this problem; fetching the data in roughly the time it takes to fetch the data, not the time it takes to fetch the data and several megabytes of unrelated bobbins.
  • User navigates to page
  • Page outline and "furniture" loaded, request sent for first page of data
  • First page of data fetched and displayed
  • User clicks the next page button
  • Second page of data fetched and displayed

Navigating to the first and second pages of a record set in an AJAX based web application
Figure 2: Navigating to the first and second pages of a record set in an AJAX based web application

Google are huge users of AJAX techniques. Those who have played with Google Maps or have a Google Mail account will have noticed that when browsing email or scrolling around a map the page is never (or at least very rarely) refreshed in its entirity.

This article presents two simple AJAX applications, both developed in C# using Visual Studio 2005, which should nicely demonstrate the princliple. The first uses a custom web server to show exactly what is happening at both the client and server side. The second application gives an idea of how AJAX techniques can be used in the real world, using a JavaScript SOAP client.

» next  » last 

Jump to: