Implementing Ajax in Java web application using JQuery

Implementing Ajax features in a Java web application is considerably easy if we are using JQuery JavaScript library. JQuery provides built-in methods that we can use to enable Ajax in our Java web application.

In this post, I am going to demonstrate the Jquery’s Ajax capability using a small weather reporting web application. Before that, you can have a look at the source code by clicking on below link.

Download Source Code

A Simple weather reporting application:

Lets build a simple Java web application. User will be entering the city name and application will return the weather report for the given city.

For the above requirements, a simple application design would contain a Java servlet to serve the weather report for the city passed as a parameter and a web page for the user to enter a city name and to see the weather report. All the communication between the web browser and Java servlet should happen through Ajax calls. Using JQuery’s post Ajax function, we can asynchronously send data to server.

WeatherServlet.java

package com.veerasundar.weather;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 *
 * @author veerasundar.com/blog
 *
 */
public class WeatherServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	public WeatherServlet() {
		super();
	}

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

		String city = request.getParameter("cityName");
		String report = getWeather(city);
		response.setContentType("text/plain");
		PrintWriter out = response.getWriter();
		out.println("" + report + "");
		out.flush();
		out.close();
	}

	private String getWeather(String city) {
		String report;

		if (city.toLowerCase().equals("trivandrum"))
			report = "Currently it is not raining in Trivandrum. Average temperature is 20";
		else if (city.toLowerCase().equals("chennai"))
			report = "It's a rainy season in Chennai now. Better get a umbrella before going out.";
		else if (city.toLowerCase().equals("bangalore"))
			report = "It's mostly cloudy in Bangalore. Good weather for a cricket match.";
		else
			report = "The City you have entered is not present in our system. May be it has been destroyed "
					+ "in last World War or not yet built by the mankind";
		return report;
	}

}

As you see from the above code, the servlet WeatherServlet tries to read the city name from the request and it matches the city name against some pre-defined names and returns the weather report. In an production application the weather will be retrieved from a real time database. As this demo concentrate more on JQuey + Ajax feature, I kept the example as simple as possible.

Web.xml configuration for WeatherServlet

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>weather</display-name>
	<servlet>
		<servlet-name>WeatherServlet</servlet-name>
		<servlet-class>com.veerasundar.weather.WeatherServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>WeatherServlet</servlet-name>
		<url-pattern>/WeatherServlet</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
</web-app>

Above code snippet defines our WeatherServlet and it’s URL pattern so that when the URL pattern is requested by the client, our servlet will be called.

index.jsp:

<%@ 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 and Java - veerasundar.com</title>
</head>
<body>
	<form method="post">
	Enter City :
		<input id="cityName" name="cityName" size="30" type="text" />
		<input id="getWeatherReport" name="getWeatherReport" type="button" value="Get Weather" />
	</form>
	<div id="weatherReport" class="outputTextArea"></div>

	<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$("#getWeatherReport").click(function(){
			$cityName = document.getElementById("cityName").value;
			$.post("WeatherServlet", {cityName:$cityName}, function(data) {
				alert(data);
				$("#weatherReport").html(data);
			});
		});
	});
	</script>
</body>
</html>

Above snippet construct the parameter cityName from the entered value and calls our servlet WeatherServlet by passing this cityName. Also a callback function defined which is called when the Ajax request is complete. In our case what it does is gets the value of the “report” string in the server-returned xml data and populates this value to the “weatherReport” HTML DIV section.

Download Source Code

So, what do you think? Have you used JQuery in any of your applications? Feel free to share your thoughts in the comments section.