Using AJAX with Spring MVC

Update Since the release of Spring 3.0, AJAX with Spring MVC has been greatly simplified.  SpringSource hosts some excellent sample applications demonstrating Spring MVC, and the “mvc-ajax” sample uses a dead simple technique for accomplishing what I’ve described below.  If you’re using Spring 2.5, read on.  Otherwise, browse to the SpringSource samples repository and benefit from the major upgrades in 3.0.

There are numerous ways to incorporate AJAX with Spring MVC, but many of the solutions I researched added far more complexity than I thought necessary to meet my needs.  What I wanted was a way to simply update a section of a page using any Javascript library my little heart desired.

The confusing portion of all this was the fact that a Spring MVC controller normally returns a ModelAndView object, and all I wanted was a String (either html or json).  I found the answer in Spring’s own Image Database example code.  I learned that, instead of returning anything, I could map a call to a void method and write to the OutputStream instead.

If I want to invoke an AJAX search call for a list of providers, I can do the following:  Using jquery for this example, I can have a function that is called by some event on the page that retrieves a String from the server based on the passed parameter.  The second function is simple a callback that updates the appropriate portion of the page.

function searchProviders(type){
$.get("search.html", {type: type}, displayDisplayResults, "html");
}

function displayDisplayResults(html){
$('#providerList').append(html);
}

On the back end, using an annotated Spring Controller, I map the url to my void method.  Spring makes the OutputStream available in the controller methods as long as you include it as a parameter in the method signature.

@RequestMapping
 public void search(@RequestParam("type")String type, OutputStream outputStream) throws IOException {
 List<Provider> providers = providerService.getProviders(type);
 StringBuilder providerList = new StringBuilder();
 for (Provider provider : providers) {
 providerList.append("<li><a href=\"").append(baseUrl).append("/appointment/index.html?providerId=").append(provider.getId()).append("\">")
 .append("<span>").append(provider.getName().trim()).append("</span>")
 .append("<span class=\"arrow\"/>")
 .append("</a></li>");
 }
 outputStream.write(providerList.toString().getBytes());
 outputStream.flush();
 }

My content is written directly to the OutputStream (which I’ve dutifully flushed) and my javascript code takes care of the rest.  The update is finished and I don’t have to worry about a ModelAndView or Spring’s implementation of the Dojo framework.

For those who prefer using json, check out this helpful project: spring-json.sourceforge.net

Advertisements
This entry was posted in Code and tagged , . Bookmark the permalink.

6 Responses to Using AJAX with Spring MVC

  1. Brad says:

    Thanks a lot. This is exactly the information that I’ve been looking for. Very helpful post.

  2. AKZ says:

    How can i get rendered page in controller?

    • Jim says:

      I’m curious, why do you want the entire rendered page sent back to the controller? The advantage of ajax style handling is that you can update certain portions of your page, without necessitating a full page refresh (or processing the entire page in a controller). What is your objective?

  3. John says:

    How to download mvc-ajax from :
    https://src.springframework.org/svn/spring-samples/

    and import them to eclipse or netbeans,

    thanks.

    • Jim says:

      It is a subversion (svn) repository. Both Netbeans and Eclipse have svn plugins. You’ll want to perform a “check out” from the Spring repository. When the plugin prompts you for the repository url, enter the link you copied in your comment.

  4. Leo.n says:

    Thanks lot our snippet…….
    it very useful for my codings

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s