Using AJAX with servlets is an excellent option for a J2EE developer. By using AJAX at client-side and a servlet at server-side, you can provide your users with a highly responsive and interactive web experience. This tutorial explains how.
J2EE and AJAX: AJAX with Servlets - AJAX and Servlets: the Steps for Implementation (Page 2 of 4 )
AJAX or Ajax is really not a technology in itself. It is a combination of existing technologies. These form the basis of the asynchronous communication, XML and HTML manipulation. So let's look at these components:
HTML/XHTML with CSS
Setting up the XMLHttpRequest.
Calling the server-side component.
Registering and implementing call-back handler and at the server side.
Generate the XML response.
How the four components fit with the implementation steps is detailed below.
Setting up the XMLHttpRequest
Instead of directly using the else part, the check can be done on the browser supporting XMLHttpRequest as an object or not. To instantiate the XMLHttpRequest object as an ActiveX, the object name, which in this case is Microsoft.XMLHTTP, has to be passed to the CreateObject method. To instantiate it using the constructor, new XMLHttpRequest() has to be used. That completes the setting up step.
Calling the Server-Side Component
To make a call to the server-side component (in this case servlets), the methods of the XMLHttpRequest instance have to be used. Which method will be used depends on the type of method to be used. The following are the methods:
i. setRequestHeader ii. open iii.send
The first method comes into the picture when the method of HTTP request has to be POST. The parameters taken by the second and third methods change according to the method used.
The setRequestHeader sets the value of the header given as parameter. This method takes two parameters: the name of the request header and the value of the header. This method comes into the picture when the POST method is used. For example, if POST has to be used, the statement would be
The first parameter sets the name of the header as Content-Type and its value as application/x-www-form-urlencoded. It also sets the character set of the content as UTF-8. But it is important to call open before setting the header.
The open method actually sets up the communication with the server. The URL corresponding to the servlet is given as the second of the parameters. The first parameter is the type of the method to communicate with the server. It can be either GET or POST or PUT. If GET is used, the data is sent as a query string by appending it to the URL, i.e. the first parameter.
The third parameter, which takes a Boolean value, decides whether the communication will be synchronous or asynchronous. A true value makes the communication asynchronous, whereas a false value makes the communication synchronous. The last two optional parameters are required only when the server requires authentication. For example, to call a servlet having a URL http://localhost:81/SCM/register having asynchronous communication, the statement would be:
Here the value to be sent to the server is passed as a query string appended to the URL.
Send sends the data to the server when the method is POST. If it is GET, then null is sent to the server. In the case of POST, a string of name-value pair is set as its parameter. For example, to send user name and password to the server if the method is POST, the statements would be:
var params=”user=”+user+”&pass=”+pass; xmlHttp.send(params)