Addition of two numbers using servlet,ajax call and displaying result in alert box
Hi all,
Today my post will be technical oriented.Its about Servlet and ajax.
First Step:
* Open the Eclipse IDE and create New->Dynamic Web project
* Go to WebContent->WEB-INF->web.xml. Paste the following code.
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>FirstAjaxCall</display-name>
<welcome-file-list>
<welcome-file>ajaxserv.html</welcome-file>
</welcome-file-list>
<servlet>
<description></description>
<display-name>AjaxServlet</display-name>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/AjaxServlet</url-pattern>
</servlet-mapping>
</web-app>
Next Step: Create a servlet file by right clicking your project.Paste the following code.
AjaxServlet.java
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;
@SuppressWarnings("serial")
public class AjaxServlet extends HttpServlet
{
public void doPost(HttpServletRequest request,HttpServletResponse response)
throws IOException, ServletException
{
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String strval1= request.getParameter("val1");
String strval2= request.getParameter("val2");
int val1=Integer.parseInt(strval1);
int val2=Integer.parseInt(strval2);
int val3=val1+val2;
out.println("The addition using ajax call result:"+val3);
}
}
Next Step: Create a new html file under WebContent folder. New file->HTML
ajaxserv.html
<!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>Adding by AJAX call</title>
<script type="text/javascript">
function getXmlHttpRequestObject()
{
var xmlHttp = false;
if (window.XMLHttpRequest) //To support the browsers IE7+, Firefox, Chrome, Opera, Safari
{
return new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");// For the browsers IE6, IE5
}
else
{
alert("Error");
}
}
var xmlhttp = new getXmlHttpRequestObject();
function servletcall() {
if(xmlhttp) {
var val1 = parseInt(document.getElementById("val1").value);
var val2 = parseInt(document.getElementById("val2").value);
xmlhttp.open("POST","AjaxServlet?val1="+ val1 +"&val2="+ val2 +"",true);
xmlhttp.onreadystatechange = handleServlet;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("val1"+val1.value);
xmlhttp.send("val2"+val2.value);
}
}
function handleServlet() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
alert(innerHTML=xmlhttp.responseText);
}
else {
alert("Error");
}
}
}
</script>
</head>
<body>
<form>
Value 1<input type="text" id="val1" /><br/>
Value 2<input type="text" id="val2" /><br/>
<input type="button" value="Submit" onclick="servletcall();" /><br/>
</form>
</body>
</html>
After Completing the above steps.Start your tomcat server after deploying your project in TOMCAT installation folder or else just right click on your project and select Run As-> your configured server.
Value 1:10
Value 2:20
Result: The addition using ajax call result:30
Please refer to the following link to know about xmlhttp and its Methods.
AJAX- XMLHTTP request,Response and other menthods
Today my post will be technical oriented.Its about Servlet and ajax.
First Step:
* Open the Eclipse IDE and create New->Dynamic Web project
* Go to WebContent->WEB-INF->web.xml. Paste the following code.
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>FirstAjaxCall</display-name>
<welcome-file-list>
<welcome-file>ajaxserv.html</welcome-file>
</welcome-file-list>
<servlet>
<description></description>
<display-name>AjaxServlet</display-name>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/AjaxServlet</url-pattern>
</servlet-mapping>
</web-app>
Next Step: Create a servlet file by right clicking your project.Paste the following code.
AjaxServlet.java
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;
@SuppressWarnings("serial")
public class AjaxServlet extends HttpServlet
{
public void doPost(HttpServletRequest request,HttpServletResponse response)
throws IOException, ServletException
{
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String strval1= request.getParameter("val1");
String strval2= request.getParameter("val2");
int val1=Integer.parseInt(strval1);
int val2=Integer.parseInt(strval2);
int val3=val1+val2;
out.println("The addition using ajax call result:"+val3);
}
}
Next Step: Create a new html file under WebContent folder. New file->HTML
ajaxserv.html
<!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>Adding by AJAX call</title>
<script type="text/javascript">
function getXmlHttpRequestObject()
{
var xmlHttp = false;
if (window.XMLHttpRequest) //To support the browsers IE7+, Firefox, Chrome, Opera, Safari
{
return new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");// For the browsers IE6, IE5
}
else
{
alert("Error");
}
}
var xmlhttp = new getXmlHttpRequestObject();
function servletcall() {
if(xmlhttp) {
var val1 = parseInt(document.getElementById("val1").value);
var val2 = parseInt(document.getElementById("val2").value);
xmlhttp.open("POST","AjaxServlet?val1="+ val1 +"&val2="+ val2 +"",true);
xmlhttp.onreadystatechange = handleServlet;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("val1"+val1.value);
xmlhttp.send("val2"+val2.value);
}
}
function handleServlet() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
alert(innerHTML=xmlhttp.responseText);
}
else {
alert("Error");
}
}
}
</script>
</head>
<body>
<form>
Value 1<input type="text" id="val1" /><br/>
Value 2<input type="text" id="val2" /><br/>
<input type="button" value="Submit" onclick="servletcall();" /><br/>
</form>
</body>
</html>
After Completing the above steps.Start your tomcat server after deploying your project in TOMCAT installation folder or else just right click on your project and select Run As-> your configured server.
Value 1:10
Value 2:20
Result: The addition using ajax call result:30
Please refer to the following link to know about xmlhttp and its Methods.
AJAX- XMLHTTP request,Response and other menthods
Comments
Post a Comment