If the term Ajax is relatively new, the technologies used are quite old now. And you do not need anything new to be able to leverage this approach in your current development, and since it is mainly a client (browser) based technology this can be used whether you develop your application in Java, PHP, or or even PL/SQL for the Web. In the same time, you do not want to have to develop too much of the client side to handle user interaction, this is where new frameworks that provide support of this technologies, let’s say AJAX based, are very interesting. It is now possible to create very interactive Web application without passing 80% of your time in the client side development - that could be generated from your server obviously.
In the same time, before adopting such framework, it is important to understand what is happening. This is why I am creating this quick introduction based on 2 simple use cases:
- loading message: you often want to provide some feedback to your user when your browser is processing some data
- dependent lists: how you can easily create dependent lists, in lot of application you want to drive a selection list from another
Update May 30:
If you have tested my sample on Safari, you can see that the first request works, but following subsequent requests do not, on work around is to modify the HTTP header adding the following value, has to be done before the send, just send a old date…
What do you need to know?
Creating XMLHttpRequest Object
1 2 3 4 5 6 7 8 9 10
Also I would add that it is probably good to provide a degraded version of your application if you can not control which browser will be used by your client, or if you want to provide that to mobile people. This is for example what Google Mail is doing with its Basic HTML view.
Retrieving the data
One of the most interesting features of the XMLHttpRequestObject is the fact that you get data from a URL in the background of the user activity. This is how you can give lot of interactivity to your applications.
1 2 3
The open method sets the different values that will be used by your request, such as the type of request, the URL, if it is synchronous or not.
The “magic” comes from the onreadystatechange property. This propery set an handler that will be called when the property readyState changes, when the request is sent, loading, or completed… Meaning, this is in this event handler, the processRequest method in the sample, that you test if the response has been completed correctly, and process the data.
Note: even if it is possible, I do not think that you should use the XMLHttpRequest in a synchronous mode since it will freeze the browser of the user, for the duration of the request.
Processing the response
As I said above the magic happens in the event handler associated with the state of the request. Let’s see how you manipulate the request and response:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
The readyState propery is used to know if all the data of the response have been received or not, the different value for the state are:
- 0 : uninitialized
- 1 : loading
- 2 :loaded
- 3 : interactive
- 4 : completed Most of the time, you will just test the status 4. In my example I wait for status==4 and then I check the status of the response. The status is the status returned by the server, for example 200 for OK, 404 for not found.
Then you can treat the response as XML using the responseXML, in this case you can manipulate the XML using the client DOM API. But you can also directly take the content as a string using the responseText property.
Manipulating the Data
- Simple XMLHttpRequest sample What is happening?
Since I have explained the call above, here is the simple code that is used to copy the content from the XMLHttpRequest object to the page:
1 2 3 4 5 6 7
Most of the time, if you do not use XML you just have to copy the content of the result into a section of your page, so to do it you use:
- create a DIV tag in yourpage with a specific id. (or other…)
- get the object you want to copy into using the
document.getElementById()method, that is the most simple way…
- then from the object just use the
innerHTMLproperty that represent the content of this DIV object. (You can also use the DOM API, to do the same thing, I am sure puris will say that this is the only way to do it correctly… ) In most of the frameworks the data are exchanged in XML and some generic methods are calls on the client side to propulate data in the different components of the page.
Usecase 1: Loading Message
One common use case is to be able to have some feedback during processing of a request. Using the same approach you can print a message until the response is completely done.
- Online Demonstration What is happening?
The tip here is just to take a zone where you want to print the status (“Loading…” for example). When the XMLHttpRequest status is different than 4 (completed) just print the status in this section using for example the innerHTML property. When the request is completed, just move the content of this zone to blank, or in our case the result of the request is printed into it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
Usecase 2: Dependent Lists
In lot of applications, you have submission form when one drop down list is controlled by another one. You have several way to support that depending of the size of your data set. For example you can download all the records (master and detail) and use some client side programming to refresh the content of the detail list depending of the value selected in the master one; or another solution is to just reload the page.
Using XMLHttpRequest, you can now just call the server to populate the values of the detail list when the user select another value in the master list. (and you can implement a client side cache if you want to avoid a second call with the same parameters, but this is another story…)
- Online Demonstration What is happening?
Nothing more complex than in the previous examples, on the
that create the XMLHttRequest, with the correct parameter.
Then in the event handler of this request, you populate the data as XML and add them to the detail list (emp in the example).
In this specific example I used XML, but if you want for simpler code you can write all in HTML and use the innerHTML property, but this is just a choice of implementation isn’t?
First of all, you have seen that what we have behind AJAX is not just new technologies. The technologies exists now for a while, they have been exposed to the masse by Google, MSN, and other Web sites. The term itself is definitevely a recent one…
Also, I have showed you simple examples that can help you for your current developments, but you need to write some code on the client. The real future of AJAX, is when this is bundle into a framework, into the Faces components your are using. So before starting to implement such code in your application you should take a look around to see if any solution exists that can answer your need…
You can download the source of the demonstrations here. I tried to keep the code as simple as possible by providing all the source in each single html file.