AJAX in Servlet & jsp using JQuery – Java web application

 

 
Implementing Ajax features in a Java web application will be so easy if you are using JQuery library; Since this library provides built-in methods that can be used to enable Ajax. In this post, I am going to demonstrate the JQuery’s Ajax capability using on blur event in java web application.
 

Folder Structure

 

 
As highlighted in the image download the jQuery library and place in js folder of eclipse work-space, and refer this jQuery files in the head section in the jsp, this jQuery file is responsible for the AJAX call made to the servlet and for updating the response back in the JSP.
 

Jsp Page

JS File

 
File: ajax.js
In this file we will fire ajax via jquery get method to call java servlet

$(document).ready(function() {
	$('#userName').blur(function(event) {
		var name = $('#userName').val();
		$.get('JqueryServlet', {
			userName : name
		}, function(responseText) {
			$('#ajaxResponse').text(responseText);
		});
	});
});

 
Here when the user types a name in the “userName textbox” and click anywhere outside the textbox, then its blur event gets triggered and the ‘get’ function executes the Ajax GET request on the Servlet. Here the first argument of get method is the URL, second argument is a key-value pair that passes the parameter from JSP to Servlet and the third argument is a function that defines what is to be done with the response that is got back from the Servlet.
 
Note :
This get method is a shorthand Ajax function, which is equivalent to:

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Recommended reading:

Servlet

 
Now let’s go on and write the servlet which handles this Ajax call

package com.servlet;

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 JqueryServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(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);
}
}

I hope the code above is self explanatory.
 

Another must read:

• AngularJS Interacting with Java Servlet using JSON
• Dynamic Dependent Select Box in JSP & Servlet using JQuery and JSON
• Tab Style Login and Signup example using jQuery in Java web application

Web.xml

 
Make sure you have done servlet mapping in web.xml as shown below

  JqueryAjaxServlet
  
    index.jsp
  
  
    JqueryServlet
    com.servlet.JqueryServlet
  
  
    JqueryServlet
    /JqueryServlet/*
  

Demo

 

 
On running the application the above webpage is generated, in which enter a value in the textbox and click anywhere outside the textbox, then you will see a welcome message saying “Hello (userName)”.

Note: In our next article I have explained on how to return complex Java objects such as list, map, etc. as response to a ajax call.
 

 

Reference

• jQuery.get()
• jQuery.ajax()