AJAX Request in JSP - An Example

Learn: How to sending data through HttpRequest and get it back on webpage without refreshing the page.
By: Vanka Manikanth, on 02 MAR 2017

AJAX is an Asynchronous Request which is mostly used in different websites to load the content without refreshing the whole page. For example, you can see the cricinfo, it will automatically update dynamically without any refreshing the page, the request to the server is sent without any reload.

index.jsp

Here, we are taking the inputs from user and sending them to server request by creating HttpRequest object. Soon as the user clicks on register button the request is sent and response is returned back.

<html>
<head>
	<title>AJAX REQUEST IN JSP</title>
	<script type="text/javascript">
		function loadAjax(){
			var username= document.getElementById("username").value;
			var email= document.getElementById("email").value;
			var tel= document.getElementById("tel").value;
			var division= document.getElementById("division").value;
			
			
			var url="ajax.jsp?username="+username +"&email="+email+"&division="+division+"&tel="+tel;
			alert(url);

			if(window.XMLHttpRequest){
				
				request = new XMLHttpRequest();
				
			}else if(window.ActiveXObject){
				
				request = new ActiveXObject("Microsoft.XMLHTTP");
			}
			
			try{
				request.onreadystatechange=sendInfo;
				request.open("POST",url,true);
				request.send();
				
			}catch(e){
				alert("Unable to connect server");
			}
			
		}

		function sendInfo(){
			var p =		document.getElementById("print");

			if(request.readyState ==1){
				var text = request.responseText;
				p.innerHTML="Please Wait.....";
				console.log("1");
			}

			if(request.readyState ==2){
				var text = request.responseText;
				console.log("2");
				
			}
			if(request.readyState ==3){
				var text = request.responseText;
				console.log("3");
				
			}
			if(request.readyState ==4){
				var text = request.responseText;			
				p.innerHTML=" Request Processed  "+text;
			}
		}
	</script>
</head>
<body>
	<h1>AJAX REQUEST IN JSP</h1>
	<form>
		<p><label>YOUR NAME</label>
		<input type="text" name="username" id="username" required="required"></p>
		<p><label>YOUR EMAIL</label>
		<input type="email" name="email" id="email" required="required"></p>
		<p><label>YOUR PHONE</label>
		<input type="tel" name="tel" id="tel" required="required"></p>
		<p><label>YOUR DIVISION</label>
		<select name="division" required="required" id="division">
		<option value="">Select</option>
		<option value="East">East</option>
		<option value="West">West</option>
		<option value="North">North</option>
		<option value="South">South</option>
		</select></p>
		<button type="button" onclick="loadAjax()">REGISTER</button>
	</form>
	<p id="print"></p>
</body>
</html>

ajax.jsp

In the index.jsp if you clearly observe we are sending the input values to ajax.jsp. So at there we took the parameter values and displayed them.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1" import="java.sql.*"%>
<!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>Insert title here</title>
	</head>
	<body>
		<%
		String username=request.getParameter("username");
		String email=request.getParameter("email");
		String division=request.getParameter("division");
		String tel=request.getParameter("tel");
		long phone = Long.parseLong(tel);
		%>

		<h3>USER NAME IS : <%=username %></h3>
		<h3>EMAIL ID IS : <%=email %></h3>
		<h3>DIVISION IS : <%=division %></h3>
		<h3>PHONE NUMBER IS : <%=phone %></h3>
	</body>
</html>

Note: For much more clarity just read on to our tutorial of COMMENT BOX DESIGN USING AJAX IN JSP.

Output:

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples