AJAX - Towards a Rich Web Interface

A fundamental determinant of the richness and usability of a website is the ability of the site to respond quickly to a user request. This may appear at first glance to be an easy task however there are a number of subtleties involved. Indeed some of the very strengths of the internet and n-tier architectures can result in a weak user experience. For example, the use of thin clients results in all computation and processing taking place on the server. This implies that any change in the user capabilities requires the client to go to the server to obtain the next page. This results in a large amount of requests being sent to the server and back to the client. To make matters worse the HTTP protocol that the requests use is inherently slow on account of the fact that utilizes TCP/IP. TCP/IP is a protocol that controls the movement of small pieces of data (packets) over the internet. The primary strength of TCP/IP is reliability. However, it achieves this at the expense of speed. These and a few other factors cause the response times of web based applications to be slow. This results in lower user productivity and experience.

AJAX is essentially an optimization to the way web sites are built. By using AJAX a programmer is essentially reducing the amount of traffic that needs to go across the web. This is achieved by transporting only the necessary amount of data between the server and client. For the most part AJAX uses technologies a programmer is already familiar with. These include JavaScript, XML, Webservices and SOAP.

A typical routine that will work within Internet explorer will make use of a DOM object to make a request to a server or webservice. The resulting response to the request is then parsed to extract the information desired. This information is then used to update the page being displayed to the user.

The Request
In the first step a programmer will initialize an ActiveX object as follows:
request = new ActiveXObject("Microsoft.XMLHTTP");

Next the request is initialized to indicate whether it is secure or not. The URL that the request is headed to is also specified here.
request.onreadystatechange = callback;
request.open("POST", URL, true);

Next, the request header is specified to identify the web service (SOAP Action) being used and the content type
request.setRequestHeader("SOAPAction", "http://www.ignyte.com/whatsshowing/GetTheatersAndMovies");
request.setRequestHeader("User-Agent", "Mindreef SOAPscope 4.1.2000 (http://www.mindreef.com")
request.setRequestHeader("Content-Type", "text/xml; charset=UTF-8");

Finally the request is sent to the server or webservice
request.send(xml);

The Response
The response to the request is processed as follows:
The programmer defines the ActiveX object that will store the response.
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

The response text is then loaded from the request to the response
xmlDoc.loadXML(request.responseText);

The values are then extracted from the response and the document is built from the response and request.
extractValues(xmlDoc);
document.getElementById("request").value = request.responseText;
document.getElementById("result").innerHTML = html;

The resulting document is then redisplayed.

Conclusion
The above code shows us that AJAX is not a novel technology. However, it is a novel concept. It ensures a clean separation of user interfaces from the underlying code. This enables website to deliver richer content with faster response times.