Spring 3 MVC, Ajax and jQuery Magic (or better: simplicity)

Oliver Wehrens — Tue, 20 Jul 2010 04:00:09 +0000

I’m playing around with some web frameworks lately and to see what’s in store with Spring 3 MVC (never did too much with it) I gave it a try to see how it handles Ajax. According to ajax simplification announcement it should be possible to get up and running in (almost) no time.

We will do a simple web application which will show the current time via Ajax.

The directory layout (using maven) should look like this:

Directory Layout



	Spring3MVC
	
		index.jsp
	

	
		spring
		
			org.springframework.web.servlet.DispatcherServlet
		
		1
	
	
		spring
		*.html

The web.xml holds no secrets. The Dispatcher servlet is defined and it should react on everything *.html.

Since we named our Servlet ‘spring’ we need to add a servlet configuration for that. It goes in WEB-INF as well.

It uses the component scanning feature of spring and instructs spring to check the package ‘com.maxheapsize.springmvc3.controller’ for controllers. Furthermore a url based view resolver is defined which uses Jstl and looks into /WEB-INF/jsp for jsp with the ending ‘.jsp’.

In WEB-INF/jsp/hello.jsp we define a jQuery snippet for the Ajax request and provide a button which we should push if we want to know the time.




  Spring MVC Ajax Demo
  
  


${message}

How does Spring now know which classes or methods to call? Here comes the nice part about it.

package com.maxheapsize.springmvc3.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import java.util.Date;

@Controller
public class HelloWorldController {

  @RequestMapping("/hello")
  public ModelAndView helloWorld() {
    return new ModelAndView("hello", "message", "Spring MVC Demo");
  }

  @RequestMapping(value = "/time", method = RequestMethod.GET)
  public @ResponseBody String getTime(@RequestParam String name) {
    String result = "Time for " + name + " is " + new Date().toString();
    return result;
  }
}

The RequestMappings define the Url’s which can be called to reach that code. So the helloWorld method is available with ‘hello.html’ in the web app. Why hello.html and not just hello ? Because we said so in the web.xml. I included a sample message which will be shown at the web page when this method is called.

If you now push the button on the webpage, ‘time.html’ with a parameter ‘name’ is called. This will go directly to the second method. Spring will also check if a string parameter ‘name’ (@RequestParam) is present in the original request. The @ResponseBody annotation indicates that a method return value should be bound to the web response body.

The result will be returned and shown in the webpage.

Ajax Result

Overall this is a pretty nice integration. I tend to use Spring for many projects and this makes it even easier to write some nice web apps in it. If you have a single page application and all you do is sending ajax request back and forth this might be a solution.

JSON response Update

To get a JSON response from your Controller you need to:

Make sure the jackson mapper is present in your classpath. Maven users use:

    
      org.codehaus.jackson
      jackson-mapper-asl
      1.5.3

in their pom.xml.

MySimpleDataObject is a Pojo

The method you are calling has a signature like:

@RequestMapping(value = "/demo", method= RequestMethod.GET)
public @ResponseBody MySimpleDataObject doSomething(@RequestParam name, @RequestParam email)

You are returning MySimpleDataObject at the end

Your calling javascript looks like this:

jQuery.getJSON("demo.html", {name: name, email: email}, function (data) {
        alert(data.someValueInMySimpleDataObject);
      });

maxheapsize.com » spring 3

Spring 3 MVC, Ajax and jQuery Magic (or better: simplicity)