Home arrow Java arrow Page 2 - J2EE and AJAX: AJAX with Servlets

J2EE and AJAX: AJAX with Servlets

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.

Author Info:
By: A.P.Rajshekhar
Rating: 4 stars4 stars4 stars4 stars4 stars / 165
July 12, 2006
  1. · J2EE and AJAX: AJAX with Servlets
  2. · AJAX and Servlets: the Steps for Implementation
  3. · Steps for Implementation continued
  4. · AJAX and Servlets in the Real World

print this article

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:

  1. XML
  2. XMLHttpRequest (JavaScript)
  3. HTML/XHTML with CSS
  4. Server-side component.

The steps to implementing AJAX cover these entire components. The JavaScript communicates with the server using XMLHttpRequest, receives a response in the form of XML from the server side component, which is used by the JavaScript to manipulate the HTML to present data to the user. That is the complete AJAX request-response cycle in a nutshell. The implementation that gives rise to the aforementioned cycle constitutes the following steps:

  1. Setting up the XMLHttpRequest.
  2. Calling the server-side component.
  3. Registering and implementing call-back handler and at the server side.
  4. Generate the XML response.

How the four components fit with the implementation steps is detailed below.

Setting up the XMLHttpRequest

The very first step of our AJAX set up comes in the form of instantiating an XMLHttpRequest. It exists in two varieties: first as an ActiveX control and second as a JavaScript object. Internet Explorer considers it an ActiveX while Mozilla, Firefox and Opera consider it to be JavaScript. So to set up the XMLHttpRequest, the browser type has to be checked. The best way to check the type is to determine whether the client browser supports ActiveX or not. If ActiveX is supported, then instantiate using the CreateObject() method, otherwise use XMLHttpRequest’s constructor to do the same. In code, it would be:

var xmlHttp;
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

  else if(window.XMLHttpRequest)
    xmlHttp=new 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

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

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

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:

xmlHttp.open("GET",”http://localhost:81/SCM/register?user=”+user, true);

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;

That completes setting up the XMLHttpRequest.

blog comments powered by Disqus

- Java Too Insecure, Says Microsoft Researcher
- Google Beats Oracle in Java Ruling
- Deploying Multiple Java Applets as One
- Deploying Java Applets
- Understanding Deployment Frameworks
- Database Programming in Java Using JDBC
- Extension Interfaces and SAX
- Entities, Handlers and SAX
- Advanced SAX
- Conversions and Java Print Streams
- Formatters and Java Print Streams
- Java Print Streams
- Wildcards, Arrays, and Generics in Java
- Wildcards and Generic Methods in Java
- Finishing the Project: Java Web Development ...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials