Ajax in Java JSP Servlet based web applications are very common. Recently I have written a lot about jQuery methods and how we can use them. Today we will look into one of the important jQuery functionality where we can easily execute AJAX calls and process the response in a Java Servlet JSP based web application.
Table of Contents
Ajax JSP Servlet Example
I am using Eclipse IDE for creating the “Dynamic Web Project”, you can use any other IDE too. Our main focus will be towards jQuery and AJAX call from JSP to a servlet. Below image shows the final project structure.
Ajax Servlet Code
We have a very simple servlet that gets the userName from request, create a greetings and return it as plain text.
Copy
package com.journaldev.servlets;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/GetUserServlet")
public class GetUserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String userName = request.getParameter("userName").trim();
if(userName == null || "".equals(userName)){
userName = "Guest";
}
String greetings = "Hello " + userName;
response.setContentType("text/plain");
response.getWriter().write(greetings);
}
}
Notice that I am using Servlet-3 annotations for configuration, if you like XML based configuration then you can do it in web.xml file. We will call this servlet asynchronously using jQuery AJAX support.
Ajax JSP Page
Below is our JSP page code, it has an input field where we can provide user name. As soon as focus is moved out of it, jQuery AJAX method will execute and call our servlet and process the response.
index.jsp code:
Copy
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>jQuery, Ajax and Servlet/JSP integration example</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"
type="text/javascript"></script>
<script src="js/app-ajax.js" type="text/javascript"></script>
</head>
<body>
<form>
Enter Your Name: <input type="text" id="userName" />
</form>
<br>
<br>
<strong>Ajax Response</strong>:
<div id="ajaxGetUserServletResponse"></div>
</body>
</html>
Notice that we have two JS files included in the JSP page, first one is the jQuery JS library and another one contains our JS code for ajax call. I am including jQuery JS from the code.jquery.com URL, we can also download it and keep with our JS file.
JSP code is very simple, we will populate ajaxGetUserServletResponse div content from the AJAX call response through jQuery.
jQuery AJAX JavaScript File
Below is our javascript file code for jQuery AJAX request.
app-ajax.js code:
Copy
$(document).ready(function() {
$('#userName').blur(function(event) {
var name = $('#userName').val();
$.get('GetUserServlet', {
userName : name
}, function(responseText) {
$('#ajaxGetUserServletResponse').text(responseText);
});
});
});
We can also make jQuery AJAX call using it’s ajax() method, as shown below. Above is the shorthand approach to using ajax() method.
Copy
$(document).ready(function() {
$('#userName').blur(function() {
$.ajax({
url : 'GetUserServlet',
data : {
userName : $('#userName').val()
},
success : function(responseText) {
$('#ajaxGetUserServletResponse').text(responseText);
}
});
});
});
Below is the syntax of the jQuery ajax() method, try to relate it to the above code and you will understand what’s going on here.
Copy
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
Our jQuery Ajax JSP Servlet Example application is ready, just build and deploy it in your favorite servlet container. Below image shows the output produced, I am using Chrome Developer tools to confirm that our servlet is getting called.
Ajax JSP Servlet Example Summary
We learned the basics of jQuery AJAX support and how we can integrate it with Java web application, in next tutorials we will learn more features of jQuery that we can use in any web application. You can download the final project from the below link.
Kunal bhide says
Hey buddy,
Thank you so much for this code. You have saved my life.
Last one week i was working on this ajax code but i didnt getting it.And finally i got it.
Thanks again.
gyana says
Not working for me . You may be missed to write regarding web.xml
Girija says
for me also not woorking.
Barry says
Not working for me, but I’m getting an error on the annotation.WebServlet class – giving me a compilation error with regards to this. I’ve seen all kinds of mixed information on adding it to the web-inf lib dir. Not sure if I can just go download the jar with it.
shahjad says
Hello ,
This Example is working fine..
Thanks..
Sidharth says
Dear Pankaj,
Thank for this program.
I am not getting the desired output …when i enter the name “Guest” …I am not getting “Hello Guest” as an Ajax response. Build successfully(clean and install all).
Kindly reply. thank you.
Regards,
Ath J says
There is not servlet class file in the example.There is source file but not class file.That’s why so many people were unable to run it.Actually he has correctly not compiled the file as the java versions of people would differ and they would not be able to run it.So first compile the servlet file to class file and then place it in the classes forlder and it would work
huangjinku says
request.getParameter(“userName”).trim()……
when request.getParameter(“userName”) is null ,there will throw an exception
huangjinku says
not need web.xml?
sanooj says
I want to know more….
Radovan says
Thank you for a tutorial!
As I understand, when user make any request on server, response from servlet is automatic send back to client? Without any call from sendRedirect() or forward() or include()?
Pankaj says
You can do forward or sendRedirect when you want to respond with HTML response. Here we are sending plain text response from servlet because we want to show that in UI through Ajax calls. You can send the JSON or XML response as well and then parse it through JS at your client side code.
Jairo Sanchez says
I don’t have a response from the Servlet. https://drive.google.com/file/d/0B1iTIMPpZHx2YlNpNFJLMUJpd28/view?usp=sharing
Jairo Sanchez says
Chrome: https://drive.google.com/file/d/0B1iTIMPpZHx2Y2wwVThFcHh6eXM/view?usp=sharing
Gouravmoy Mohanty says
Hi Pankaj,
I find that this code is working perfectly in Chrome. I wrote a similar in which there is a ajax call function that connects to the server every 5 sec and fetches the date and time. it worked perfectly in chrome but not working for IE. Its only performing one call for IE and then stopping. Can you suggest a fix?
yuanyu says
Thanks! This example help me out how the ajax could be implement by javascript and jsp!
Emran Hossain says
Sir , thank you very much .It works .
Eshan says
How to return the same data in json format?
Antony Sebastin C says
Wanna become a versatile developer in JAVA domain, could you help me..?