This tutorial presents, how to use Ajax
Content of index.html
<%@ 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>Ajax implementation in Servlet without Using jQuery</title>
<script type="text/javascript" src="js/ajax.js"></script>
</head>
<body>
<h3>Ajax implementation in Servlet without jQuery</h3>
<br />
<div id="ajaxResponse" style="color: red; font-weight: bold"></div>
<br /> Please Enter your Name :
<input type="text" id="userName" onblur="doAjaxCall();" />
<br /> Please Enter your password :
<input type="password" id="userPass" />
<br />
<input type="submit" value="Enter">
<br />
</body>
</html>
Content of ajax.js in js directory
//Get XMLHTTP Object
function getXMLHTTPObject() {
var xmlhttpObject = null;
try {
// For Old Microsoft Browsers
xmlhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
// For Microsoft IE 6.0+
xmlhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e1) {
// No Browser accepts the XMLHTTP Object then false
xmlhttpObject = false;
}
}
if (!xmlhttpObject && typeof XMLHttpRequest != 'undefined') {
// For Mozilla, Opera Browsers
xmlhttpObject = new XMLHttpRequest();
}
// Mandatory Statement returning the ajax object created
return xmlhttpObject;
}
// Change the value of the outputText field
function setAjaxOutput() {
document.getElementById('ajaxResponse').innerHTML = xmlhttpObject.responseText;
}
function handleServerResponse() {
if (xmlhttpObject.readyState == 4) {
if (xmlhttpObject.status == 200) {
setAjaxOutput();
} else {
alert("Error during AJAX call. Please try again");
}
}
}
// Implement business logic
function doAjaxCall() {
xmlhttpObject = getXMLHTTPObject();
if (xmlhttpObject != null) {
var URL = "AjaxAction?userName="
+ document.getElementById('userName').value;
xmlhttpObject.open("POST", URL, true);
xmlhttpObject.send(null);
xmlhttpObject.onreadystatechange = handleServerResponse;
}
}
Content of AjaxServlet.java
package com.t4b.ajax.test;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String userName = request.getParameter("userName");
if (userName.equals("")) {
userName = "User name cannot be empty";
} else {
userName = "Hello " + userName;
}
response.setContentType("text/plain");
response.getWriter().write(userName);
}
}
Content of web.xml
<web-app>
<display-name>JqueryAjaxServlet</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>AjaxAction</servlet-name>
<servlet-class>com.t4b.ajax.test.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxAction</servlet-name>
<url-pattern>/AjaxAction/*</url-pattern>
</servlet-mapping>
</web-app>
Posts
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.