Thursday, January 13, 2011

Spring MVC 3 and jQuery Integration Tutorial

In this tutorial we will build a simple Spring MVC 3 application with AJAX capabilities using jQuery. We will explore how to post data using jQuery.post() and process the result. We will be developing a non-AJAX application first then convert it to an AJAX-powered version later.

What is jQuery?
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Source: http://jquery.com/

What is AJAX?
Ajax is a group of interrelated web development methods used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not needed, and the requests need not be asynchronous.

Like DHTML and LAMP, Ajax is not one technology, but a group of technologies. Ajax uses a combination of HTML and CSS to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and to allow the user to interact with the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

Source: http://en.wikipedia.org/wiki/Ajax_(programming)

Our application is a simple arithmetic operation that adds two numbers and displays the sum. Here's a screenshot of the non-AJAX version:


Here's a screenshot of the AJAX version:


Notice nothing much is different, except that the non-AJAX version will display the result on another page, while the AJAX version will display on the same page. Actually, this is the main difference! With AJAX we have a responsive, desktop-like application. No page refresh.

Non-AJAX Version

Let's develop first our non-AJAX Spring MVC application.

We need a controller to handle the user's requests. Let's call it NonAjaxController

NonAjaxController
package org.krams.tutorial.controller;

import javax.annotation.Resource;

import org.apache.log4j.Logger;
import org.krams.tutorial.service.ArithmeticService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

/**
 * Handles and retrieves the main requests
 */
@Controller
@RequestMapping("/main/nonajax")
public class NonAjaxController {

 protected static Logger logger = Logger.getLogger("controller");
 
 @Resource(name="springService")
 private ArithmeticService springService;
 
    /**
     * Handles and retrieves the non-AJAX, ordinary Add page
     */
    @RequestMapping(value="/add", method = RequestMethod.GET)
    public String getNonAjaxAddPage() {
     logger.debug("Received request to show non-AJAX, ordinary add page");
    
     // This will resolve to /WEB-INF/jsp/nonajax-add-page.jsp
     return "nonajax-add-page";
 }
    
    /**
     * Handles request for adding two numbers
     */
    @RequestMapping(value = "/add", method = RequestMethod.POST)
    public String add(@RequestParam(value="inputNumber1", required=true) Integer inputNumber1,
           @RequestParam(value="inputNumber2", required=true) Integer inputNumber2,
           Model model) {
  logger.debug("Received request to add two numbers");
  
  // Delegate to service to do the actual adding
  Integer sum = springService.add(inputNumber1, inputNumber2);
  
  // Add to model
  model.addAttribute("sum", sum);
  
     // This will resolve to /WEB-INF/jsp/nonajax-add-result-page.jsp
  return "nonajax-add-result-page";
 }
    
}
This controller declares the following mappings:
/main/nonajax/add (GET) - retrieves the add page
/main/nonajax/add POST) - computes the sum and retrieves the result page
The first mapping receives a request to display the add page. The second mapping receives two numbers and delegates the computation to the ArithmeticService. When the ArithmeticService is done processing, the controller then forwards the result to another JSP page which displays the result.

Here are the JSP pages:

nonajax-add-page.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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=UTF-8">
 
 <title>Spring MVC - jQuery Integration Tutorial</title>
</head>
<body>

<h3>Spring MVC - jQuery Integration Tutorial</h3>
<h4>Non-AJAX version</h4>

<c:url var="addUrl" value="/krams/main/nonajax/add" />
<form method="POST" action="${addUrl}">

Demo 1 
<div style="border: 1px solid #ccc; width: 250px;">
 Add Two Numbers: <br/>
 <input id="inputNumber1" name="inputNumber1" type="text" size="5"> +
 <input id="inputNumber2" name="inputNumber2" type="text" size="5">
 <input type="submit" value="Add" /> <br/>
 Sum: (Result will be shown on another page)
</div>

</form>

</body>
</html>

nonajax-add-result-page.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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=UTF-8">
 
 <title>Spring MVC - jQuery Integration Tutorial</title>
</head>
<body>

<h3>Spring MVC - jQuery Integration Tutorial</h3>
<h4>Non-AJAX version</h4>

Demo 1 Result
<div style="border: 1px solid #ccc; width: 250px;">
 Sum: ${sum}
</div>

</body>
</html>

Let's run the application. We'll be adding two numbers: 5 and 10, and we expect 10 as the result.

To access the Add page, enter the following URL in your browser:
http://localhost:8080/spring-mvc-jquery/krams/main/nonajax/add


Here's the result:

Now let's examine the service that performs the actual processing:

ArithmeticService
package org.krams.tutorial.service;

import org.apache.log4j.Logger;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

/**
 * @Service enables the class to be used as a Spring service
 * @Transactional enables transaction support for this class
 */
@Service("springService")
@Transactional
public class ArithmeticService {
 
 protected static Logger logger = Logger.getLogger("service");
 
 /**
  * Adds two numbers
  */
 public Integer add(Integer operand1, Integer operand2) {
  logger.debug("Adding two numbers");
  // A simple arithmetic addition
  return operand1 + operand2;
 }
 
}
This is a very simple POJO service that contains a simple arithmetic function. To make this POJO available as a Spring service bean, we just add the @Service annotation.

AJAX Version

Let us now convert our non-AJAX application to an AJAX-powered version.

To create our AJAX application we will create one JSP page to handle both the request and result on the same page. This is the primary benefit of AJAX. We also need another controller to handle the page request.

Here is the controller.

AjaxController
package org.krams.tutorial.controller;

import javax.annotation.Resource;

import org.apache.log4j.Logger;
import org.krams.tutorial.service.ArithmeticService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
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;

/**
 * Handles and retrieves the main requests
 */
@Controller
@RequestMapping("/main/ajax")
public class AjaxController {

 protected static Logger logger = Logger.getLogger("controller");
 
 @Resource(name="springService")
 private ArithmeticService springService;
 
 /**
  * Handles and retrieves the AJAX Add page
  */
    @RequestMapping(value = "/add", method = RequestMethod.GET)
    public String getAjaxAddPage() {
     logger.debug("Received request to show AJAX, add page");
     
     // This will resolve to /WEB-INF/jsp/ajax-add-page.jsp
     return "ajax-add-page";
 }
 
    /**
     * Handles request for adding two numbers
     */
    @RequestMapping(value = "/add", method = RequestMethod.POST)
    public @ResponseBody Integer add(@RequestParam(value="inputNumber1", required=true) Integer inputNumber1,
           @RequestParam(value="inputNumber2", required=true) Integer inputNumber2,
           Model model) {
  logger.debug("Received request to add two numbers");
  
  // Delegate to service to do the actual adding
  Integer sum = springService.add(inputNumber1, inputNumber2);
  
  // @ResponseBody will automatically convert the returned value into JSON format
  // You must have Jackson in your classpath
  return sum;
 }
}
This controller declares two mappings:
/main/ajax/add (GET) - retrieves the add page
/main/ajax/add (POST) - processes the sum
Notice the POST version of the add() will return an Integer but it's also annotated with @ResponseBody. With this annotation added, Spring will automatically convert the returned data to an appropriate response. In our case, it will convert the Integer to a JSON format if you have the Jackson library in your classpath

What is @ResponseBody
The @ResponseBody annotation instructs Spring MVC to serialize .... Spring MVC automatically serializes to JSON because the client accepts that content type.

Underneath the covers, Spring MVC delegates to a HttpMessageConverter to perform the serialization. In this case, Spring MVC invokes a MappingJacksonHttpMessageConverter built on the Jackson JSON processor. This implementation is enabled automatically when you use the mvc:annotation-driven configuration element with Jackson present in your classpath.

Source: http://blog.springsource.com/2010/01/25/ajax-simplifications-in-spring-3-0/

Here is the JSP page.

ajax-add-page.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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=UTF-8">
 
 <script type="text/javascript" src="/spring-mvc-jquery/resources/js/jquery/jquery-1.4.4.min.js"></script>
 <script type="text/javascript">
     var jq = jQuery.noConflict();
 </script>
 
 <title>Spring MVC - jQuery Integration Tutorial</title>

</head>
<body>

<h3>Spring MVC - jQuery Integration Tutorial</h3>
<h4>AJAX version</h4>

Demo 1
<div style="border: 1px solid #ccc; width: 250px;">
 Add Two Numbers: <br/>
 <input id="inputNumber1" name="inputNumber1" type="text" size="5"> +
 <input id="inputNumber2" name="inputNumber2" type="text" size="5">
 <input type="submit" value="Add" onclick="add()" /> <br/>
 Sum: <span id="sum">(Result will be shown here)</span>
</div>


<script type="text/javascript"> 

function add() {
 jq(function() {
  // Call a URL and pass two arguments
  // Also pass a call back function
  // See http://api.jquery.com/jQuery.post/
  // See http://api.jquery.com/jQuery.ajax/
  // You might find a warning in Firefox: Warning: Unexpected token in attribute selector: '!' 
  // See http://bugs.jquery.com/ticket/7535
  jq.post("/spring-mvc-jquery/krams/main/ajax/add",
     {  inputNumber1:  jq("#inputNumber1").val(),
        inputNumber2:  jq("#inputNumber2").val() },
      function(data){
       // data contains the result
       // Assign result to the sum id
       jq("#sum").replaceWith('<span id="sum">'+ data + '</span>');
     });
 });
}

</script>
</body>
</html>
Notice in the head section, we have included the jQuery library:
<script type="text/javascript" src="/spring-mvc-jquery/resources/js/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
     var jq = jQuery.noConflict();
</script>
We've also added a jQuery.noConflict(). This basically allows us to use any variable to represent a jQuery call. By default it uses $ to call its function. By assigning jQuery.noConflict() to a variable, we can now use this new variable to call all our jQuery functions. For more info, see http://api.jquery.com/jQuery.noConflict/

Let's examine our JSP page. Notice it contains two parts: the HTML part that shows the input, and the JavaScript part that handles the AJAX.

HTML part
Demo 1
<div style="border: 1px solid #ccc; width: 250px;">
 Add Two Numbers: <br/>
 <input id="inputNumber1" type="text" size="5"> +
 <input id="inputNumber2" type="text" size="5">
 <input type="submit" value="Add" onclick="add()" /> <br/>
 Sum: <span id="sum">(Result will be shown here)</span>
</div>
This is a simple form that takes two numbers. When the Add button is clicked, the JavaScript add() function is called.

JavaScript part
<script type="text/javascript"> 

function add() {
 jq(function() {
  // Call a URL and pass two arguments
  // Also pass a call back function
  // See http://api.jquery.com/jQuery.post/
  // See http://api.jquery.com/jQuery.ajax/
  // You might find a warning in Firefox: Warning: Unexpected token in attribute selector: '!' 
  // See http://bugs.jquery.com/ticket/7535
  jq.post("/spring-mvc-jquery/krams/main/ajax/add",
     {  inputNumber1:  jq("#inputNumber1").val(),
        inputNumber2:  jq("#inputNumber2").val() },
      function(data){
       // data contains the result
       // Assign result to the sum id
       jq("#sum").replaceWith('<span id="sum">'+ data + '</span>');
     });
 });
}

</script>

The add() function is a wrapper to jQuery's post() function. (For more info about post(), see See http://api.jquery.com/jQuery.post/) It takes any number of arguments and a callback function to handle the result. Here we're including the values from two input text fields: inputNumber1 and inputNumber2. Then we use an inner function function(data){...} to handle the result.
function(data){
       // data contains the result
       // Assign result to the sum id
       jq("#sum").replaceWith('<span id="sum">'+ data + '</span>');
     });
Here the sum is the name of the HTML element we assigned earlier in the HTML part:
Sum: <span id="sum">(Result will be shown here)</span>

Let's run our application and check the result.

To access the Add page, enter the following URL in your browser:
http://localhost:8080/spring-mvc-jquery/krams/main/ajax/add

Here's the result:

The result is displayed on the same page. There's no need to create another page just to view the result.

We're almost done with our tutorial. Now we need to add the required XML configurations to enable Spring MVC.

Let's start with the web.xml

web.xml
<servlet>
  <servlet-name>spring</servlet-name>
  <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  <load-on-startup>1</load-on-startup>
 </servlet>
 
 <servlet-mapping>
  <servlet-name>spring</servlet-name>
  <url-pattern>/krams/*</url-pattern>
 </servlet-mapping>

 <listener>
  <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
 </listener>

In the web.xml we declared a servlet-name spring. By convention, we must declare a spring-servlet.xml as well.

spring-servlet.xml
<!-- Declare a view resolver -->
 <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver" 
      p:prefix="/WEB-INF/jsp/" p:suffix=".jsp" />

By convention, we must declare an applicationContext.xml as well.

applicationContext.xml
<!-- Activates various annotations to be detected in bean classes -->
 <context:annotation-config />
 
 <!-- Scans the classpath for annotated components that will be auto-registered as Spring beans.
  For example @Controller and @Service. Make sure to set the correct base-package-->
 <context:component-scan base-package="org.krams.tutorial" />
 
 <!-- Configures the annotation-driven Spring MVC Controller programming model.
 Note that, with Spring 3.0, this tag works in Servlet MVC only!  -->
 <mvc:annotation-driven /> 

Conclusion

That's it. We've completed our application. We've managed to build a simple Spring MVC 3 application with AJAX capabilities using jQuery. We've also explored how we can return JSON responses using @ResponseBody and the Jackson library

The best way to learn further is to try the actual application.

Download the project
You can access the project site at Google's Project Hosting at http://code.google.com/p/spring-mvc-jquery/

You can download the project as a Maven build. Look for the spring-mvc-jquery.zip in the Download sections.

You can run the project directly using an embedded server via Maven.
For Tomcat: mvn tomcat:run
For Jetty: mvn jetty:run

If you want to learn more about Spring MVC and integration with other technologies, feel free to read my other tutorials in the Tutorials section.
StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Spring MVC 3 and jQuery Integration Tutorial ~ Twitter FaceBook

Subscribe by reader Subscribe by email Share

36 comments:

  1. Very good examples! Thanks a lot!

    ReplyDelete
  2. Haven't got the time to go through it now, but will certainly be back! At first look, great example!! Thx

    ReplyDelete
  3. It's really helpful to me, thanks for your teaching.

    ReplyDelete
  4. Very good post. It was very simple and to the point. I wished to understand the Ajax interactions, thus, this is it. Thanks, krams

    ReplyDelete
  5. what would I do if I want to use Ajax to return a new jsp at the bottom of the ajax-add-page.jsp. I am trying to change the code to keep a listarray of all the vales I entered and there sums and display them in a secound JSP

    ReplyDelete
  6. Thank you for the example, it helped me get a better understanding of Spring MVC and jQuery.

    ReplyDelete
  7. Hello i run this project but i got this error i cant's solve it please help me tosolve this error

    Error configuring application listener of class org.springframework.web.context.ContextLoaderListener or
    The requested resource (/spring-mvc-dwr/) is not available.

    reply fast indrajit

    ReplyDelete
  8. Thank so mauch, good tutorial @

    ReplyDelete
  9. what is Model model??

    ReplyDelete
  10. i'm not getting the desired output when i tried to run this app on spring...

    ReplyDelete
  11. Sir, how do you run/code this with a Controller defined bean in the dispatcher servlet? Thank you.

    ReplyDelete
  12. Hi Nice article,

    1) How about if we are getting back an object for example :
    EmployeeOB (id, firstName, lastName,...) ?

    2)How about more than one objects ?
    thanks

    ReplyDelete
  13. @Majid, assuming you want to display these objects to the presentation layer, my best advice is to create a DTO and send the model in JSON format. Once it's JSON, the presentation layer with jQuery should be able (and easily) display the data without dependency on the backend. You need to create a DTO (data transfer object) to minimize what information you want to send to the presentation layer. You don't want to send every property that's available from your domain (unless you want to). Also, if you're using JPA and Spring's JSON support via Jackson, it's not advisable to send directly the domain as you may encounter an infinite mapping loop between your domain if they have references to other objects that also reference this same domain.

    ReplyDelete
  14. Excellent example. I had created a Spring MVC project using the STS Spring MVC template. Everything went fine until I tried adding a reference to the jquery library which it simply couldn't do. By comparing your project with the one I had built, I was able to identify what was wrong.

    Thank you again.

    ReplyDelete
  15. Is there any extra effort required to integrate ajax or jasper report with tiles definition ... This does not works for me in tiles configuration .... But works fine when invoked standalone....

    ReplyDelete
  16. hey really ur tutorials are very fruitful.I have one doubt . when i integrate the ajax code in normal jsp without form tag ,it works fine . But same jsp didnt works for form tag.Is there any thing i need to do it.

    ReplyDelete
  17. @Anonymous, what browser are you using? I suggest you use Firefox's FireBug or Google Chrome's Developer Tools to inspect the http requests and see what's being transmitted. Also, did you check the actual HTML code that has been generated (the actual source you see when you right-click on the HTML page on your browser)? Maybe there's something missing.

    ReplyDelete
  18. Could I deploy this project on JBoss?

    ReplyDelete
  19. Great introduction to Spring & jQuery. Easy to follow, thanks!

    ReplyDelete
  20. Nice Example. thanks

    ReplyDelete
  21. Thanks for the article, really clear. I have been using Spring mvc and DWR for ajax for years, my conclusion is thar DWR is far superior than Spring mvc for ajax. You achieve better results with much less code and more cleaner.

    ReplyDelete
  22. krams your tutorial was amazing.. but i need example code for spring MVC with JDBC.. pls help me

    ReplyDelete
  23. Hi, krams. This example do not start:

    SEVERE: Error configuring application listener of class org.springframework.web.context.ContextLoaderListener
    java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener

    Can you help me?

    ReplyDelete
  24. hi krams,

    I tried the same way you explained in this post. Everything working fine except ajax post request. I double checked that both Jackson jar an jquery.js in classpath and resource folder. But Still ajax post is not working.I'm able to capture the request with chrome developer. When i checked captured request, i found the 404 code for jquery-1.4.4.min.js. But its in resource folder. can you plz help ?

    ReplyDelete
  25. Thank you for this tutorial - it's great for spring beginners!

    ReplyDelete
  26. Hi All , You need to add the below jars in your lib for getting the response
    jackson-core-asl-1.8.10
    jackson-mapper-asl-1.8.10
    jackson-core-lgpl-1.8.10
    jackson-mapper-lgpl-1.8.10
    jackson-jaxrs-1.8.10
    jackson-xc-1.8.10
    jackson-mrbean-1.8.10
    jackson-smile-1.8.10
    OR
    jackson-all-1.8.10
    Refer to below path

    http://wiki.fasterxml.com/JacksonDownload

    ReplyDelete
  27. This is a great example, exactly what i was looking for, everything works fine for Ajax except i am not getting the result back on jsp page, getting control in the controller and calculating and i verified the result in the controller method everything is fine, but result is not populated in Jsp, does anyone has any idea what I am doing wrong

    ReplyDelete
    Replies
    1. I know this is late. If it's possible, maybe you should avoid JSP, and use one of the templating engines like Thymeleaf. I have a tutorial for that.

      Delete
  28. how to return a List or object instead of integer , and how to access it in script ,

    ReplyDelete
  29. very nice,simple and clear example this is a perfect example how to explain a concept

    ReplyDelete
  30. loved it, any questions appearing in my mind while reading were answered later on. nice teaching intuition. all the best.

    ReplyDelete
  31. Works great, quite practical thanx

    ReplyDelete
  32. error POST http://localhost:8080/AjaxSample/employee/add.htm 406 (Inacceptable)
    i've already added
    jackson-mapper-lgpl-1.9.3
    jackson-jaxrs-1.9.3

    ReplyDelete