How to develop your first Ajax Application : step-by-step in JSP and Servlets ?.

A simple Web Application which demonstrate how to develop your first Ajax Application : step-by-step in JSP and Servlets.

1. Create a Simple GetTime.java Servlet -

package com.hubberspot.ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/GetTime")
public class GetTime extends HttpServlet {
 protected void doGet(
   HttpServletRequest request, 
   HttpServletResponse response) 
     throws ServletException, IOException {
  // A Simple GetTime Servlet which computes 
  // Todays date and send it as response to
  // getTime.jsp
  PrintWriter out = response.getWriter();
  Date date = new Date();
  out.println(date);
 }
}

2. Create a simple getTime.jsp

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Today's Date !!!</title>
<script type="text/javascript">
 // A Simple JavaScript code

 // 1. Create a variable as xmlHttpRequest
 var xmlHttpRequest;

 // 2. Check whether the page is loaded from 
 // which browser. Here Mozilla Firefox and 
 // Internet Explorer has a different way of
 // initializing Asynchronous Xml Objects
 // Mozilla Firefox uses : new XMLHTTPRequest()
 // Internet Explorer uses : new ActiveXObject("MICROSOFT:XMLHTTP")
 if (window.XMLHttpRequest) {
  xmlHttpRequest = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  xmlHttpRequest = new ActiveXObject("MICROSOFT.XMLHTTP");
 }

 // 3. A simple JavaScript method which gets fired when user 
 // clicks GetTime button in the form
 function timeClick() {
  if (xmlHttpRequest == null) {
   alert("Initialization failure");
   return;
  }
  // 4. As soon as state is changed of page when user clicks
  // GetTime button, a method called as handleresponse is fired
  xmlHttpRequest.onreadystatechange = handleresponse;
  // 5. The open method fires Get method of GetTime Servlet which computes 
  // Current date and time and return it back in the form of xml data
  xmlHttpRequest.open("Get", "GetTime", true);
  // 6. We are passing is as null because we are not performing any 
  // operation for the request sent
  xmlHttpRequest.send(null);
 }

 function handleresponse() {
  // xmlHttpRequest.readyState == 4 signifies that data transfer is 
  // completed and XMLHttpRequest or ActiveXObject has loaded
  // xmlHttpRequest.status == 200 signifies status as OK and informs 
  // that request has been processed
  if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
   // final response from XMLHttpReqest is placed on the textArea
   document.frmTime.txtTime.value = xmlHttpRequest.responseText;
  }
 }
</script>
</head>
<body>
 <!-- In the html form timeClick() JavaScript method is called as soon as user 
clicks on the GetTime button and without page refresh the data is 
loaded from the server. -->
 <form name="frmTime">
  Time : <input type="text" size="45" name="txtTime" /> <input
   type="button" value="GetTime" onclick="timeClick()" />
 </form>
</body>
</html>