| Ajax with Spring MVC and jQuery |
|
| Sunday, 02 August 2009 06:29 |
|
Spring MVC does not provide out of the box Ajax support. However it provides suitable extension points through its template based design to enable Ajax support very easily. Here is the step by step account of adding Ajax support to your Spring MVC application with jQuery javascript library. Step 1 - Getting the JSP readyTo keep things simple I will use a JSP to build a simple form. The JSP is shown in Listing 1. Listing 1 - index.jsp<!-- other parts of the JSP --> <h2><a href="#">Sign In</a></h2> <label> <input <label> <span>Password : </span> <input type="password" name="password" <input type="button"
Step 2 -Add jQuery to sprinkle Ajax form postNow I will add a bit of jQuery Ajax support to submit the login form in Ajax. This is shown in Listing 2. Listing 2 - index.jsp<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script> <script> Now we are done on the client side. Its time to setup code and configuration on the server side. On the server side, I ran the example on Tomcat 6 with Spring 2.5.x Step 3 - Adding a view resolverIn order to enable Ajax support, you will need to extend Spring MVC by adding an Ajax view resolver. This is shown in Listing 3. Listing 3 - AjaxViewResolver.java/** * */ package com.kenai.openmall.springframework.view.extn;
import org.apache.commons.logging.LogFactory; import org.springframework.web.servlet.View; import org.springframework.web.servlet.view.AbstractCachingViewResolver;
* @author dhrubo * */ public class AjaxViewResolver extends AbstractCachingViewResolver {private static final Log log = LogFactory.getLog(AjaxViewResolver.class); private String ajaxPrefix; private View ajaxView; /* (non-Javadoc) * @see org.springframework.web.servlet.view.AbstractCachingViewResolver#loadView(java.lang.String, java.util.Locale) */ @Override protected View loadView(String viewName, Locale locale) throws Exception { log.info("viewName==>"+viewName);View view = null; if(viewName.startsWith(this.ajaxPrefix)){view = ajaxView; } return view; } public String getAjaxPrefix() {return ajaxPrefix; } public void setAjaxPrefix(String ajaxPrefix) {this.ajaxPrefix = ajaxPrefix; } public View getAjaxView() {return ajaxView; } public void setAjaxView(View ajaxView) {this.ajaxView = ajaxView; } } I will discuss more about this in Step 5 and 6. Step 4 - Adding support for Ajax viewNow we will add support for Ajax view. This is shown in Listing 4. AjaxView just transforms the model objects into JSON using Flex-JSON library (http://flexjson.sourceforge.net/) and passes it in response to the jQuery handler in Listing 2. Listing 4 - AjaxView.java/** * */ package com.kenai.openmall.springframework.view.extn;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.logging.LogFactory; import org.springframework.web.servlet.view.AbstractView;
* @author dhrubo * */ public class AjaxView extends AbstractView {private static final Log log = LogFactory.getLog(AjaxView.class); /* (non-Javadoc) * @see org.springframework.web.servlet.view.AbstractView#renderMergedOutputModel(java.util.Map, javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse) */ @Override protected void renderMergedOutputModel(Map map, HttpServletRequest request, HttpServletResponse response) throws Exception { log.info("Resolving ajax request view -"+map);JSONSerializer serializer = new JSONSerializer(); String jsonString = serializer.serialize(map ); response.setContentType( "text/plain; charset=UTF-8" ); response.getOutputStream().write( jsonString.getBytes() );
Step 5 - Getting ready the Spring controllerEven with Ajax request we can leverage the Spring page controller to handle the unit task. Listing 5 - below shows the simple sign in controller. Listing 5 - SignInController.java/** * */ package com.kenai.openmall.presentation.pagecontroller;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.logging.LogFactory; import org.springframework.web.servlet.ModelAndView; import org.springframework.web.servlet.mvc.Controller;
* @author dhrubo * */ public class SignInController implements Controller {protected final Log log = LogFactory.getLog(getClass()); public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception { log.info("Returning ajax view"); return new ModelAndView("ajax_foo","user",new User());
The sign in controller is just a demo class which returns a model and view object. The model now has the authenticated object and the view name. In order to determine that this was an Ajax view request we have prefixed the view name with "ajax". This is utlized by ajax view resolver and configured in Spring context. Step 6 - Wiring up thingsAs always its time to wire up things in spring configuration file shown in Listing 6. Listing 6 - spring-presentation-config.xml<?xml version="1.0" encoding="UTF-8"?> Step 7 -Tomcat web application configurationSome of you may be interested in the Tomcat web application configuration as well. It is shownin Listing 7. Listing 7 - web.xml<?xml version="1.0" encoding="UTF-8"?> Further reading
|
Home
Community