In this tutorial you will learn how a servlet can be accessed using Ajax request
Access Servlet Using Ajax Request
In this tutorial you will learn how a servlet can be accessed using Ajax request
The Servlet request and Ajax request both are different things so, there is no need to confused with these terms. Ajax is an asynchronously requested object that is originated by the browser whereas, Servlet is a java specific term that gets the simple GET, POST, PUT, etc, request to service a HTTP request or an Ajax request.
Following example demonstrate you for showing how a servlet can be accessed using ajax request :
At first I have created a html page which contains a <h2> header line with text 'Ajax Demo' and a paragraph with 'id' because of to address it through DOM in JavaScript and a button that call a JavaScript function on the event 'onclick'. In next step for the browser compatibility we are required to get browser specific XMLHttpRequest object so I write a JavaScript code also in this page that contains a function getXmlHttpRequestObject() written for the browser specification, a global XmlHttpRequest (var rcvReq = getXmlHttpRequestObject() ) object that we can use it for making call to our servlet, a function alterContent() that initiates an asynchronous call by making sure the XmlHttpRequest object is ready to initiate a new asynchronous call to the server or not if not, then initiates a new request after clicking on the button by the user, an open() method that is set up for the Ajax call, in the next line a function will call when state of XmlHttpRequest object is changed, and a function handleAlterContent() will call when an asynchronous call result is returned by the server and the state of XmlHttpRequest is set as readyState = = 4. Then create a Servlet named 'AccessServlet.java'.
ajax.html
<html>
<head>
<script type="text/javascript">
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //To support the browsers IE7+, Firefox, Chrome, Opera, Safari
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); // For the browsers IE6, IE5
} else {
alert("Error due to old verion of browser upgrade your browser");
}
}
var rcvReq = getXmlHttpRequestObject();
function alterContent() {
if (rcvReq.readyState == 4 || rcvReq.readyState == 0) {
rcvReq.open("GET", 'AccessServlet', true);
rcvReq.onreadystatechange = handleAlterContent;
rcvReq.send(null);
}
}
function handleAlterContent() {
if (rcvReq.readyState == 4) {
document.getElementById("1").innerHTML = rcvReq.responseText;
}
}
</script>
</head>
<body>
<h2>Ajax Demo</h2>
<p id="1"><input type="button" onclick="alterContent()" value ="AlterContent"/></p>
</body>
</html>
AccessServlet.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;
public class AccessServlet extends HttpServlet
{
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException
{
PrintWriter out = response.getWriter();
out.println("This Example demonstrates, using Ajax request to Access Servlet ");
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <display-name>ajaxWithServlet</display-name> <servlet> <servlet-name>AccessServlet</servlet-name> <servlet-class>AccessServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AccessServlet</servlet-name> <url-pattern>/AccessServlet</url-pattern> </servlet-mapping> </web-app>
Output :
When you will execute the above example you will get the output as :
When you will click on AlterContent button you will get the output as :
[ 0 ] Comments