This example shows how to use HTML, CSS, Javascript, AJAX, JSP and how to use the MVC pattern.
When user enters zip code we fetch the city, state and update the HTML page without fetching a new page from the server.
AJAX does not require returning XML and we can return text, XML, JSON or Javascript code
We have a UI that looks as below when user enters zipcode in the text box on the key up we make an AJAX request to get the city and state for the zip code
first.jsp is our starting page, we forward to done.jsp if user enters 01801 or 03060
mycontroller URL maps to MyController Servlet
showCity() is the callback for our AJAX request
we update the <p id=”cityState”> to show the city,state
my.css
BODY
{
background-color: White;
color: black;
font-family: Arial, Helvetica, sans-serif;
}
H1
{
color: navy;
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
font-weight: bolder;
text-transform: capitalize;
}
.myclass {
color: red;
}
ajax.js
var http_request = false;
var mycallback;
function makeAjaxRequest(url, callback) {
mycallback =
callback;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
http_request.onreadystatechange = ajaxHandler;
http_request.open('GET', url, true);
http_request.send(null);
}
function ajaxHandler() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
mycallback(http_request.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
first.jsp (Starting page)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=windows-1252"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<title>first</title>
<link href="css/my.css" rel="stylesheet" type="text/css"></link>
<script
language="JavaScript" src="ajax.js"></script>
</head>
<body>
<script language="Javascript1.1" type="text/javascript">
function showCity(responseText) {
cityState = document.getElementById("citystate");
cityState.innerHTML
= responseText;
}
function getCityState() {
zipInput =
document.getElementById("zipcode");
url = "mycontroller?action=getzip&zipcode=" + zipInput.value;
makeAjaxRequest(url, showCity);
}
</script>
<h1>Submit ZipCode (AJAX example) Enter 01801, 12345 and 03060 </h1>
<form action="mycontroller">
<table cellspacing="2" cellpadding="3" >
<tr>
<td><p class="myclass">Zip Code:</p></td>
<td>
<input id="zipcode" name="zipcode" type="text" maxlength="5" size="5" onkeyup="getCityState()"/>
</td>
<td> <p id="citystate" class="myclass"> </p></td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" name="action" value="submit"/>
</td>
</tr>
</table>
</form></body>
</html>
done.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page
contentType="text/html;charset=windows-1252"%>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=windows-1252"/>
<title>done</title>
</head>
<body>
<h2>Accepted
ZipCode </h2>
<!-- take
parameters submitted in first.jsp form and store in Bean
-->
<jsp:useBean
id="user" class="net.thedesai.simpleajax.MyBean"
scope="session"/>
<!-- One way to
take parameters from previous page and store in Bean -->
<!--
<jsp:setProperty name="user" property="*"/> -->
<p> The zip
code: ${user.zipCode} </p>
</body>
</html>
package net.thedesai.simpleajax;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.*;
import javax.servlet.http.*;
public class MyController extends HttpServlet {
private static final String CONTENT_TYPE = "text/html; charset=windows-1252";
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException
{
response.setContentType(CONTENT_TYPE);
PrintWriter out = response.getWriter();
String action = request.getParameter("action");
if (action == null) action = "";
if
(action.equals("submit")) { // form submit request
MyBean m = new MyBean();
String zipcode = request.getParameter("zipcode");
if (!(zipcode.equals("01801") || zipcode.equals("03060")))
response.sendRedirect("first.jsp");
m.setZipCode(zipcode);
request.getSession().setAttribute("user", m);
response.sendRedirect("done.jsp");
}
if
(action.equals("getzip")) { // AJAX Request
String zipcode = request.getParameter("zipcode");
if (zipcode.equals("01801"))
out.println("Woburn, MA");
else if (zipcode.equals("03060"))
out.println("Nashua, NH");
else out.println("Invalid Zip code");
out.close();
}
}
}
package net.thedesai.simpleajax;
public class MyBean {
public void setZipCode(String zipCode) {
this.zipCode = zipCode;
}
public String getZipCode() {
return this.zipCode;
}
private String zipCode;
}
web.xml
<?xml version = '1.0' encoding = 'windows-1252'?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee">
<description>Empty web.xml file for Web Application</description>
<servlet>
<servlet-name>MyController</servlet-name>
<servlet-class>net.thedesai.simpleajax.MyController</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>MyController</servlet-name>
<url-pattern>/mycontroller</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>35</session-timeout>
</session-config>
<mime-mapping>
<extension>html</extension>
<mime-type>text/html</mime-type>
</mime-mapping>
<mime-mapping>
<extension>txt</extension>
<mime-type>text/plain</mime-type>
</mime-mapping>
</web-app>