Home » Java programming language

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:

AJAX Request example 1

AJAX Request example 2







Was this page helpful? YES NO

Are you a blogger? Join our Blogging forum.



Comments and Discussions


We are using Google to publish ads on our website; Google has its own privacy policies. They may save log, cookies on your system. Google may also collect information of your system like IP address, region, city, country. For more details please go through the Google’s privacy policy.