Ajax with Servlet

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.

Non-obtrusiveness, responsiveness and high interactivity are the areas where desktop applications still have an edge over web applications. The intelligent use of JavaScript can create highly interactive web sites. However, responsiveness and non-obtrusiveness would still be a distant dream.

The responsiveness can be achieved by careful implementation at server-side by using technology such as J2EE that uses threading mechanism to service requests. But, to achieve non-obtrusiveness, a component is required that can provide asynchronous means of communication so that complete re-rendering of a page during the response phase can be bypassed.

That is where AJAX comes into picture. AJAX provides asynchronous communication service through JavaScript and XML. Thus a good combination can be formed by using AJAX at client-side and a servlet at server-side, providing a non-obtrusive, responsive and highly interactive web experience.

J2EE and AJAX: AJAX with Servlets - AJAX and Servlets: the Steps for Implementation

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.

Basic Ajax program (Html with Servlet)

ajax.html(Just -- remove, before run the program)

< --html>
<--head>
<--meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<--/head>
<--body>
<--form action="" name="form1">
<--input type="button" value="click" onclick="send()">
<--br>
<--div id="result"><--/div>
<--/form>
<--/body>
<--script type="text/javascript">
var xmlhttp;

function send()
{

try
{
// Firefox, Opera 8.0+, Safari
xmlhttp=new XMLHttpRequest();
}catch (e)
{
// Internet Explorer
try
{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
//xmltttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.onreadystatechange = processStateChange;
//xmlhttp.open("GET","http://localhost:81/SCM/register?user="+user, true);//If u send parameter
xmlhttp.open("GET","Ajax", true);
//var params="user="+user+"&pass="+pass;//if method ,POST means
//xmlhttp.send(params)
xmlhttp.send(null);
}

function processStateChange()
{


if(xmlhttp.readyState == 4)
{
if(xmlhttp.status == 200)
{
//alert(xmlHttp.responseText);
document.getElementById("result").innerHTML = xmlhttp.responseText;
}else
{
alert("Error loading page"+ xmlhttp.status +":"+ xmlhttp.statusText);
}
}
}

<--/script>
<--/html-->


Servlet File ( Ajax.java)



import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* Servlet implementation class for Servlet: Ajax
*
*/
public class Ajax extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
static final long serialVersionUID = 1L;

/* (non-Java-doc)
* @see javax.servlet.http.HttpServlet#HttpServlet()
*/
public Ajax() {
super();
}

/* (non-Java-doc)
* @see javax.servlet.http.HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String name="sundarrajan";
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write(name);

}

/* (non-Java-doc)
* @see javax.servlet.http.HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
}


If any doubt about the basic ajax program , please mail me (click here)