Introduction to Ajax
Last time we looked at Web 2.0 and what differentiates it from older paradigms for Internet products. One of the differentiators is the use of Rich Client Interfaces. Ajax is possibly the most popular Rich Client technology and used in such applications as Google Maps and Google Mail.
Ajax is an acronym for “Asynchronous JavaScript And XML.” Web pages are endowed with snippets of code that can access remote services (like web services) and not refresh the page. This prevents “round tripping” which is the cause for display flicker and slow response times.
The techniques used in Ajax applications are not new. For the most part Ajax is similar to Dynamic HTML (DHTML). One major feature that Ajax applications use is the XMLHttpRequest object. This allows access to remote services either synchronously or asynchronously.
The following code sample is an HTML page with JavaScript to call out to a PHP page which returns a random number:
Functions used :
function makeCall() { request = new ActiveXObject("Microsoft.XMLHTTP"); if (request) { var now = new Date(); request.onreadystatechange = updateMe; request.open("GET", "ajax1b.php?nocache="+now.getTime(), true); request.send(null); } } function updateMe() { if (request.readyState != 4) return; if (request.status != 200) return; document.getElementById("result").value = request.responseText; request.abort(); request = null; }
The salient feature of this code sample is the creation of the XMLHttpRequest object:
request = new ActiveXObject("Microsoft.XMLHTTP");
This is the Internet Explorer version. In a future article we’ll explore how to make the JavaScript more browser agnostic. Once created, the request can open a connection. The “open” command indicates that we’re doing a “GET” operation and specifies the URL of the resource we want to get (our short PHP program to generate a random number). Finally, the last parameter indicates whether this is an asynchronous call.
There is a known problem with the Microsoft version of the XMLHttpRequest object: it caches the resource. This is “fixed” by appending a parameter to the request that is the current time in milliseconds. This is fairly certain to create a unique request. This is clearly a hack and I am still researching a better fix for it.
The next salient feature is:
request.onreadystatechange = updateMe
which indicates which method to call when the resource returns its value. In this case we are calling the “updateMe()” method.
Finally, the request is sent and control is returned to the caller. When the request is satisfied, “updatMe()” is called and the TextArea is updated with the returned random number.
Notice that at no time did we redisplay the ajax1a.html page. Everything was handled in JavaScript.
This method of operating is very valuable. It means that one can put all the business logic of the application in “back end” code and all the display logic in the web page. One can even do validation on the back end and return status to the front end. This solves a significant problem in the design of n-tiered systems. “Separation of Concerns” dictates that we keep our display logic in the web pages and our business logic in the back end. However, validation is actually a function of business logic. Using a web service for validation, it can be kept in the back end where it properly belongs.
Ajax code can be very complicated to write. There is a lot of code that has to be created to make the application browser agnostic. To truly take advantage of the promise of Rich Clients in general and Ajax in particular, you need a library of widgets and support functions.
Next time, we’ll look at a more complete example using XML and true web services. Later articles will look at some of the libraries that are emerging in support of Ajax programming.
Author : Greg Smith
