JSP File Code:
<html> <head> <title>JSP and Servlet using AJAX</title> <script type="text/javascript"> function getXMLObject() //XML OBJECT { var xmlHttp = false; try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") // For Old Microsoft Browsers } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") // For Microsoft IE 6.0+ } catch (e2) { xmlHttp = false // No Browser accepts the XMLHTTP Object then false } } if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); //For Mozilla, Opera Browsers } return xmlHttp; // Mandatory Statement returning the ajax object created } var xmlhttp = new getXMLObject(); //xmlhttp holds the ajax object
function ajaxFunction() { var getdate = new Date(); //Used to prevent caching during ajax call if(xmlhttp) { xmlhttp.open("GET","gettime?" + getdate.getTime(),true); //gettime will be the servlet name xmlhttp.onreadystatechange = handleServerResponse; xmlhttp.setRequestHeader('Content-Type', 'application/x-www-formurlencoded'); xmlhttp.send(null); } } function handleServerResponse() { if (xmlhttp.readyState == 4) { if(xmlhttp.status == 200) { document.myForm.time.value=xmlhttp.responseText; //Update the HTML Form element } else { alert("Error during AJAX call. Please try again"); } } } </script> <body> <form name="myForm">
Server Time:<input type="text" name="time" /> <br /> <input type="button" onClick="javascript:ajaxFunction();" value="Click to display Server Time on Textbox"/> <br /> </form> </body> </head> </html>
Explanation for the AJAX Code
Here i have declared 3 JavaScript function: getXMLObject() Responsible for creating the AJAX Object depending on the browser. ajaxFunction() Responsible for calling servlet through AJAX call. handleServerResponse() Responsible for displaying the data retrieved from the server.
Top of Form
96.239.232.152
Your email:
Enter email
Subscribe
Unsubscribe
Bottom of Form
How the AJAX Code Works: When the page loads i am creating an AJAX Object by calling the getXMLObject() function and returning the object created in the xmlhttp variable When the user clicks on the input Button, ajaxFunction() gets called which checks for whether the Ajax Object is created or not and depending on that calls the remote script. Here a function handler handleServerResponse is also defined for retrieving the value from the server When the readystate of the AJAX call reaches 4 and the http status is 200 we pass the data fetched from the server to the textbox
Servlet Code
import java.io.*; import java.text.*; import java.util.*; import javax.servlet.*; import javax.servlet.http.*; public class gettime extends HttpServlet {
public void init(ServletConfig config) throws ServletException { super.init(config); } public void destroy() { } public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException { PrintWriter out = response.getWriter(); Date df = new Date(); out.println(df.getTime()); } public void doGet(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException { doPost(request,response); } }
Explanation for the Servlet Code
By default doGet function gets called and i am redirecting the control to doPost function whenever doGet function is called In doPost function i am creating the date object and displaying the current time using the getTime() method of Date class So all the displaying content gets passed to the Ajax Object in the form of response
