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




     




        

Comments

Post a Comment

Popular posts from this blog

Twitter acquisition

Hi All,  " Twitter has acquired the Android lockscreen app ". There might be a few updates in that app in near future.    They have mentioned like " Twitter may come out with a "Twitter For Android launcher" and may push contextual tweets and direct messages directly to the lockscreen of a user ".   This app will be very useful for those who tweets all the time and those who need to get updated with the current news.           For more info:  http://timesofindia.indiatimes.com/tech/tech-news/Twitter-acquires-Android-lockscreen-app/articleshow/33405320.cms
Read more

How to keep your search history 'private'

Very Good morning all,       I think most of us know to clear browse history,especially guys knows it very well... if u know what i mean.       But still some may not know about clearing it.For your kind Info all our browser will have the option of saving browser history that would record each and every page u go,if someone using your used browser they could see all the pages you've gone.      Our browser history information will have all our personal traits. Advertisements companies will use it for targeting you through your browser history and hackers may find your pass keys too.        " Cookies are nothing but temporary storage of your browser "      The main thing is that "COOKIES",it will store what ever u do like filling forms,browser actions etc., The best way of not to be tracked is disabling the "Accept cookies" option.     To disable browser history and cookies capture,go to...
Read more

Creating empty Rows in datatable jquery

Image
Hi all, This is about how we can create Empty rows in datable  irrespective of the rows returned from DB. I have done it in "fnDrawCallback". My logic is like i have to display 10 rows on Initial load. If DB returned 2 rows, i have to display the balance 8rows with empty values. Here it follows, Now steps to create datatable, After the whole table rendered. You can get the number of rows printed in table in " fnDrawCallback ". In this, am getting the total records and passing it to my function which create empty rows. As we are using (#tableid).datatable().fnData([]) , it will call the " fnDrawCallback" again and again si i have restricted it to run only one times using var itr=1; We can manually set " " values to be printed in table using  fnData([" "," "," "])   as you know how many columns you are printing in table, By using this simple way, we can creating rows with empty records...
Read more