AJAX Example
Below is a customer search example which uses the XMLHttpRequest object. Notice how after you type the customer ID and then change the caret‘s focus to the next form field, a name and lastname are filled in for you. This tutorial will lead you through steps you can use to add this AJAX functionality to your site. Download
Ajax.war and deploy it in your Tomcat to see the following in action.
Step #1 - Creating the Form
We first create a simple webpage that has the HTML for our Web form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Customer ID to First and Last Name using XmlHttpRequest</title>
</head>
<body>
<form action="post">
<p>
Customer ID:
<input type="text" size="5" name="customer ID" id="customerID" />
</p>
First Name:
<input type="text" name="First Name" id="firstname" />
Last Name:
<input type="text" size="2" name="Last Name" id="lastname" />
</form>
</body>
</html>
Step #2 - Adding the Event Handler
We then add an onblur event handler function named updateFirstLastName(). This event handler is called whenever the customerID field loses focus.
onblur="updateFirstLastName();"
The updateFirstLastName() function will be in charge of asking the server what the first and last name iis for a given customer ID. For now, this function does nothing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Customer ID to First and Last Name using XmlHttpRequest</title>
<script language="javascript" type="text/javascript">
function updateFirstLastName() {
}
</script>
</head>
<body>
<form action="post">
<p>
Customer ID:
<input type="text" size="5" name="customer ID" id="customerID" onblur="updateFirstLastName();" />
</p>
First Name:
<input type="text" name="First Name" id="firstname" />
Last Name:
<input type="text" size="2" name="Last Name" id="lastname" />
</form>
</body>
</html>
Step #3 - Creating the XMLHttpRequest Object
We need to create an XMLHttpRequest object. Because of variations among the Web browsers, creating this object is more complicated than it need be. The best way to create the XMLHttpRequest object is to use our function named getHTTPObject().
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Customer ID to First and Last Name using XmlHttpRequest</title>
<script language="javascript" type="text/javascript">
var http = getHTTPObject(); // We create the XMLHTTPRequest Object
function updateFirstLastName() {
}
function getHTTPObject() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
</script>
</head>
<body>
<form action="post">
<p>
Customer ID:
<input type="text" size="5" name="customer ID" id="customerID" onblur="updateFirstLastName();"/>
</p>
First Name:
<input type="text" name="First Name" id="firstname" />
Last Name:
<input type="text" size="2" name="Last Name" id="lastname" />
</form>
</body>
</html>
Step #4 - Updating the First and Last name Values
Now lets add the code that makes the round trip to the server. We first specify the URL for the server-side script to be getCustomerInfo.jsp?customerID= . This URL will then have the Customer ID Code appended to it so that the Customer ID is passed as an
HTTP GET parameter named param. This means that if a user types in the Customer ID 17534, the resulting URL would be getCustomerInfo.jsp?customerID=17534.
Before we send the HTTP request, we specify the onreadystatechange property to be the name of our new function handleHttpResponse(). This means that every time the HTTP ready state has changed, our function handleHttpResponse() is called.
Our new function handleHttpResponse() sits there waiting to be called and when it does get called, it checks to see if the readState is equal to 4. If it is equal to 4 and the status is 200, the request is complete. Since the request is complete, we obtain the response text (responseText), unpack it, and set the first and last name form fields to the returned values. (More readyState info found
here.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Customer ID to First and Last Name using XmlHttpRequest</title>
<script language="javascript" type="text/javascript">
var url = "getCustomerInfo.jsp?customerID="; // The server-side script
var http = getHTTPObject(); // We create the XMLHTTPRequest Object
function handleHttpResponse() {
if (http.readyState == 4) {
if (http.status == 200) {
//alert("handleHTTPResponse");
// Split the comma delimited response into an array.
//For plain text response (not XML formatted),
//results = http.responseText.split(",");
// Or for XML formatted response text:
var message = http.responseXML.getElementsByTagName("message")[0];
results = message.childNodes[0].nodeValue.split(",");
document.getElementById(‘firstname‘).value = results[0];
document.getElementById(‘lastname‘).value = results[1];
} else {
alert ( "Not able to retrieve name" );
}
}
}
function updateFirstLastName() {
//alert("updateFirstNameLastName");
var customerIDValue = document.getElementById("customerID").value;
http.open("GET", url + escape(customerIDValue), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function getHTTPObject() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
</script>
</head>
<body>
<form action="post">
<p>
Customer ID:
<input type="text" size="10" name="customer ID" id="customerID" onblur="updateFirstLastName();" />
</p>
First Name:
<input type="text" size="10" name="First Name" id="firstname" />
Last Name:
<input type="text" size="10" name="Last Name" id="lastname" />
</form>
</body>
</html>
Step #5 - Program the Server Side
Lets now create a JSP file named getCustomerInfo.jsp. All this file does is return "John, Doe" as the first name last name. This means that anytime the focus leaves the Customer ID field, the first and last name will be automatically set to John, Doe. In fact, this script sends the following XML document to the browser:
<message>John,Doe</message>
More complex usages may require DOM, JAXP, SAX or other XML APIs to generate the response.
<%
String customerID = request.getParameter("customerID");
if(customerID != null) {
//System.out.println("before sending response");
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
// for plain text response:
//response.getWriter().write("John,Doe");
// Or for XML formatted response:
response.getWriter().write("<message>John,Doe</message>");
//System.out.println("after sending response");
} else {
//nothing to show
response.setStatus(HttpServletResponse.SC_NO_CONTENT);
}
%>
You know by now how to augment the fuctionality of the JSP so that it queries the database for the given Customer ID and returns the corresponding values.
Download
Ajax.war and deploy it in your Tomcat to see the above in action. Just enter: localhost:8080/Ajax/index.html
AJAX JSP Tags
You may use AJAX JSP tags, which abstract the interaction between JSP and AJAX scripts. Below are links to the AJAX tag library, installation instructions and examples:
http://ajaxtags.sourceforge.net/,
http://ajaxtags.no-ip.info/.
Download the following Ajax jsp tag examples
ajaxtags-1.1.5.war and deploy the war file. Check their directory structure. In particular check where the JSP, the servlet source, the servlet class files and the javascript files are. Pick one example (in particular, make sure you checkout CalloutServlet, AutocompleteServlet and HTMLContentServlet), observe how the tags are used in the JSP and how XML responses are formed in the servlets. For example, enter localhost:8080/ajaxtags-1.1.5/callout.jsp .
Although all example classes are already compiled, you may need to compile your own classes for your own functionalities. For example to compile ajaxtags-1.1.5\src\org\ajaxtags\demo\servlet\CalloutServlet.java you will need to do as follows from the directory ajaxtags-1.1.5:
javac -classpath "WEB-INF\lib\ajaxtags-1.1.5.jar;..\..\common\lib\servlet-api.jar" src\org\ajaxtags\demo\servlet\CalloutServlet.java
The class file will be created in the same directory as the .java file and you will need to place it in WEB-INF\classes\org\ajaxtags\demo\servlet.
Other AJAX and JSP Sources (Make sure you check them out!)
The example code and documentation was taken and modified from
http://www.webpasties.com/xmlHttpRequest/xmlHttpRequest_tutorial_1.html.Official Sun AJAX/JSP guide:
http://java.sun.com/developer/technicalArticles/J2EE/AJAX/#serverside_processingGuess on which technologies these sites are based on:
www.gmail.com,
www.google.com/ig,
http://www.google.com/webhp?complete=1&hl=en,
www.live.com (MS)
