We learnt how AJAX works in previous articles; now we want to explore some techniques for using AJAX with Java technologies such as Java Server Pages (JSP), Java Server Faces (JSF) and others.
The most common way of using AJAX with Java technologies is to use JavaScript. You need to have AJAX functions, such as, creating an XMLHttpRequest object for your browser, then using the object requests for a JSP page or Servlet (in general, for an URL), get the response and use it in your JSP web pages. For this, what I usually do is, I create a JavaScript file with all these functions and include this .js file in my web pages using a <script> tag, and use the functions mentioned there. This is a very common technique of using AJAX with JSP, and this is almost the same for PHP. The following example will clear the concept more.
Problem: We need to get the server date time from a JSP page using AJAX.
Solution: First we will create a JSP web page that will output server data time like the one below.
<%=new java.util.Date()%>
Save the above line of code as index.jsp. The output will be as follows.
Now create the necessary JavaScript functions, like the one I typically use.
function createRequestObject(){var req;if(window.XMLHttpRequest){//For Firefox, Safari, Operareq = new XMLHttpRequest();}else if(window.ActiveXObject){//For IE 5+req = new ActiveXObject("Microsoft.XMLHTTP");}else{//Error for an old browseralert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera');}return req;}
//Make the XMLHttpRequest Objectvar http = createRequestObject();
function sendRequest(method, url){if(method == 'get' || method == 'GET'){http.open(method,url);http.onreadystatechange = handleResponse;http.send(null);}}
function handleResponse(){if(http.readyState == 4 && http.status == 200){var response = http.responseText;if(response){document.getElementById("ajax_res").innerHTML = response;}} }
I usually save the above script as ajax.js. Add this JavaScript in your invoker JSP page (the page that will invoke the index.jsp to get the server date time) using AJAX.
The invoker JSP, caller.jsp –
<%@page contentType="text/html"%><%@page pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html><head><script src="ajax.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>JSP Page using AJAX</title></head><body>
<a onclick="sendRequest('GET','index.jsp')" href="#">Server Date Time:</a><div id="ajax_res">Server Date Time will replace this text.</div></body></html>
This caller.jsp has a <div> element with the id=’ajax_res’. When I the user clicked the link ‘Server Date Time:’ as shown below, the JavaScript function sendRequest from ajax.js would be called to get the data from ‘index.jsp’ using HTTP GET method. The output of caller.jsp before clicking the link is
The output of caller.jsp after invoking the index.jsp using AJAX is
This way you can use AJAX with JSP for retrieving information from Database or from any file kept in the server, or can send the user information to server and get the response.