In Java World Servlets are popularly used for Model View Controller(MVC) Design Pattern. This article will guide you on writing AJAX based application that will post data to Servlet and will fetching the computed data from the Servlet.
Read The Full Tutorial.
In Java World Servlets are popularly used for Model View Controller(MVC) Design Pattern. This article will guide you on writing AJAX based application that will post data to Servlet and will fetching the computed data from the Servlet. With this approach the page will get the updated content from the server without refreshing the jsp/html page.
JSP 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() {
if(xmlhttp) {
var txtname = document.getElementById("txtname");
xmlhttp.open("POST","getname",true); //getname will be the servlet name
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("txtname=" + txtname.value); //Posting txtname to Servlet
}
}
function handleServerResponse() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
document.myForm.message.innerHTML=xmlhttp.responseText; //Update the HTML Form element
}
else {
alert("Error during AJAX call. Please try again");
}
}
}
</script>
<body>
<form name="myForm" method="POST" action="getname">
<table>
<tr>
<td>Enter Name</td>
<td><input type="text" name="txtname" id="txtname" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Submit" onclick="ajaxFunction();" /></td>
</tr>
</table>
<div id="message"></div>
</form>
</body>
</head>
</html>
Servlet Code
import java.io.*;
import java.text.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class getname 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 {
String name = null;
PrintWriter out = response.getWriter();
if(request.getParameter("txtname") != null) {
name = request.getParameter("txtname");
}
else {
name = "";
}
out.println("You have successfully made Ajax Call:" + name);
}
source: hiteshagrawal
|
Ajax Projects
