Pages

Wednesday 10 September 2014

Simple AJAX example in JSP/Servlet

AJAX (Asynchronous JavaScript and XML) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With Ajax, Web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data can be retrieved using the XMLHttpRequest object.

AJAX comes to your rescue when there is only a small amount of data that needs to be updated on a page already loaded and rest of data remains the same. In such case you need not reload the whole page, rather you would go with the reload of specific data.

Here is the example of how Ajax can be used in JSP and Servlets:

index.jsp

<%@ 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>My Page</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 getEmployeeDetails() {
if(xmlhttp) {  
var empId = document.getElementById("empId").value;
xmlhttp.open("POST","EmployeeDetails?"+"empId="+empId,true);
  xmlhttp.onreadystatechange  = responseHandler;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send(null);
  }
}

 function responseHandler() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
document.frm.txtarea.value=xmlhttp.responseText;      
      }else {
        alert("Error occured while AJAX call..... Please try again.....");
      }
    }
}
</script>

</head>
<body>
<form name="frm">
<table width="100%">
<tr style="width: 100%;">
<td style="padding-left: 40px;  padding-top: 10px; padding-bottom: 10px">Employee Id ::   
<input type="text" id="empId" style="width: 150px">
   
<a style="padding-right: 40px;">
<input style="background-color:#092A6B;color:#FFFFFF;width: 150px ;font-size: 15; cursor: pointer;" type="button" value="Retrieve Details" onClick="getEmployeeDetails();">
</a>
</td>
</tr>
<tr style="width: 100%;">
<td style="padding-left: 30px; padding-bottom: 10px">
<textarea name="txtarea" style="width: 670px; height: 100px;"></textarea>
</td>
</tr>
</table>
</form>
</body>
</html>

EmployeeDetails.java

 package com.shakeel;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

 /**
 * Servlet implementation class EmployeeDetails
 */
public class EmployeeDetails extends HttpServlet {
private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public EmployeeDetails() {
        super();
        // TODO Auto-generated constructor stub
    }

 /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}

 /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

PrintWriter out = response.getWriter();
response.setContentType("text/xml");
String empId = request.getParameter("empId");
String result = "";

if(empId.equalsIgnoreCase("E100")){
result = " Name: Shaan \n Address: Bangalore \n Role: Programmer";
}else if(empId.equalsIgnoreCase("E101")){
result = " Name: Shakeel \n Address: San Francisco \n Role: Lead";
}else{
result = " Employee Id does't exist.... Please try some other Employee Id...";
}

out.println(result);
}


}


web.xml

 <?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>AjaxExample</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

   <servlet>
    <description></description>
    <display-name>EmployeeDetails</display-name>
    <servlet-name>EmployeeDetails</servlet-name>
    <servlet-class>com.shakeel.EmployeeDetails</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>EmployeeDetails</servlet-name>
    <url-pattern>/EmployeeDetails</url-pattern>
  </servlet-mapping>

 </web-app>


Output


I hope this example would have helped you in understanding of how exactly AJAX calls are made and the result is retrieved.


Posted by at 10 comments:
Labels: , , , ,

Running a Unix script from JSP/Servlet

In this example we are going to see how a UNIX script can be called from a JSP page and the result of the UNIX script is displayed back at the JSP page.

Here is the example illustrating the same:

index.jsp

 <%@ 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>My Page</title>

 <script type="text/javascript">

function getXMLObject()
{
var xmlHttp = false; 
    try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
}
    catch (e) {
      try {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e2) {
        xmlHttp = false;
      }
    }
   
    if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
      xmlHttp = new XMLHttpRequest();   
    }   
    return xmlHttp; 
}

var xmlhttp = new getXMLObject(); 

 function getStudentDetails() {
if(xmlhttp) {  
var studentId = document.getElementById("studentId").value;
xmlhttp.open("POST","StudentDetails?"+"studentId="+studentId,true);
  xmlhttp.onreadystatechange  = responseHandler;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send(null);
  }
}

function responseHandler() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
document.frm.txtarea.value=xmlhttp.responseText;      
      }else {
        alert("Error occured while AJAX call..... Please try again.....");
      }
    }
}
</script>

 </head>
<body>
<form name="frm">

 <table width="100%">
<tr style="width: 100%;">
<td style="padding-left: 40px;  padding-top: 10px; padding-bottom: 10px">Student Id ::   
<input type="text" id="studentId" style="width: 150px">
   
<a style="padding-right: 40px;">
<input style="background-color:#092A6B;color:#FFFFFF;width: 150px ;font-size: 15; cursor: pointer;" type="button" value="Retrieve Details" onClick="getStudentDetails();">
</a>
</td>
</tr>
<tr style="width: 100%;">
<td style="padding-left: 30px; padding-bottom: 10px">
<textarea name="txtarea" style="width: 670px; height: 100px;"></textarea>
</td>
</tr>
</table>
</form>
</body>

</html>
StudentDetails.java

 package com.shakeel;

 import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.io.PrintWriter;

 import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

 /**
 * Servlet implementation class StudentDetails
 */
public class StudentDetails extends HttpServlet {
private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public StudentDetails() {
        super();
        // TODO Auto-generated constructor stub
    }

 /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
String studentId = request.getParameter("studentId");
System.out.println(studentId);

String command = "sh getDetails.sh "+studentId; // UNIX command to be executed with parameter paased
out.println(executeCommand(command));
}

BufferedWriter bw = null;
private String executeCommand(String command) throws IOException {
 
StringBuffer output = new StringBuffer();

 Process p;
try {
p = Runtime.getRuntime().exec(command); // Process to execute UNIX command 
p.waitFor();
BufferedReader reader = new BufferedReader(new InputStreamReader(p.getInputStream()));

File fout = new File("out.txt");
FileOutputStream fos = new FileOutputStream(fout);
 
bw = new BufferedWriter(new OutputStreamWriter(fos));
            String line = "";
while ((line = reader.readLine())!= null) {
output.append(line + "\n");
bw.write(line);
bw.newLine();
}
} catch (Exception e) {
e.printStackTrace();
}finally{
bw.close();
}
return output.toString();
}

}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>UnixCall</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

  <servlet>
    <description></description>
    <display-name>StudentDetails</display-name>
    <servlet-name>StudentDetails</servlet-name>
    <servlet-class>com.shakeel.StudentDetails</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>StudentDetails</servlet-name>
    <url-pattern>/StudentDetails</url-pattern>
  </servlet-mapping>
</web-app>
I hope this example would have given you an idea on how to call a UNIX script from Java.

Posted by at 2 comments:
Labels: , , , , ,
Subscribe to: Posts (Atom)