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. I’m not going to give the entire source code here. Instead I am going to explain the important pieces of the application.

A Simple weather reporting application:

Application Requirements:

Build a web application for getting the weather report for any city. The city name should be get from the user as input.

Application Design:

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

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

	String city = request.getParameter("cityName");
	String report = getWeather(city);
	response.setContentType("text/xml");
	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

<servlet>
	<description>Weather Data provider</description>
	<display-name>Weather Data provider</display-name>  

	<servlet-name>WeatherServlet</servlet-name>
	<servlet-class>ajaxify.WeatherServlet</servlet-class>
</servlet>  

<servlet-mapping>
	<servlet-name>WeatherServlet</servlet-name>
	<url-pattern>/WeatherServlet</url-pattern>
</servlet-mapping>

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.

JSP Page to get input from user:

<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>

Above snippet contains a form where user can enter the city name and a DIV section to show the weather report retrieved from the server. This snippet is part of a JSP file.

JQuery to send data thru Ajax

Now comes the imprtant section. JQuery code to send and recieve information to server asynchronously. Have a look the below code.

<script type="text/javascript">
	$(document).ready(function() {
		$("#getWeatherReport").click(function(){
			$cityName = document.getElementById("cityName").value;
			$.post("WeatherServlet", {cityName:$cityName}, function(xml) {
				$("#weatherReport").html( $("report", xml).text() );
			});
		});
	});
</script>

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.

Combine all the above and you are done

If you combine all the above code snippets into a web application, then you are almost done. Now create a WAR out of the web application and deploy it in a web server. After this, invoke the JSP page then enter the city name and click ‘Get Weather’ button which will sends the city name asynchronously to Server using JQuery and will recieve the result and populates the report in an HTML page. All this achieved easily with the JQuery 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.