Using AJAX with Spring MVC 3.x

While working with one of my application, I had a simple requirement to grab customer data as they key-in their customer Id. First thought which came to my mind was to simply use AJAX however in the past we had to write lot of stuff and workarounds to make it work.

However, Spring 3.0 now officially support AJAX remoting with JSON as discussed in Keith Donald's article.

So, after reading this article the first step was to get jQuery and JSON javascript files which can be downloaded from their sites. This was easy!

Next, write the javascript code in the JSP page which activates on users input (to be specific on key up event). Here is how I did it:

First I veified that jQuery actually works on my page after adding following lines:
<script type="text/javascript" src="/travel-request/resources/js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="/travel-request/resources/js/json.min.js"></script>
<script type="text/javascript">   
     $(document).ready(function() {
        console.log("Welcome to jQuery.");
      });
</script>

With the help of Firebug in FireFox I was able to verify using jQuery logging facility that it works!

So, half the job was done. Now comes the interesting part i.e. making an AJAX call to my customer information service and getting the response. Here is what I did:

Capture key up event and ignore any characters other than numbers i.e. 0-9
    $('#customerId').keyup(function(event) {
        var val = $(this).val();
        var regex = /[a-zA-Z\!@#%&()+{}?*+.^$ ]/g;
        if(val.match(regex)) {
            val = val.replace(regex, "");
            $(this).val(val);
        }
        if($('#customerId').val().length > 9 || $('#customerId').val().length == 8)
            clearCustomerData();
        else if ($('#customerId').val().length == 9) {
            userid_length = $('#customerId').val().length;   
            if (userid_length > 9){
                console.log('customer Id must be 9 numbers only...')
            }else
                {
                    getCustomerData();
                }
        }
    });


Next define implementation for getCustomerData() and clearCustomerData() functions which makes an AJAX call:
function getCustomerData() {
   $.getJSON("/customer/getInfo", { customerId: $('#customerId').val() }, function(customerAvailable) {
   if(customerAvailable.available) {
      $('#customerFirstName').val("customerAvailable.firstName");
      $('#customerMiddleName').val("customerAvailable.middleName");
      $('#customerLastName').val("customerAvailable.lastName");
   });
}

function clearCustomerData(){
   $('#customerFirstName').val("");
   $('#customerMiddleName').val("");
   $('#customerLastName').val("");

}
NOTE: $('#customerFirstName') above is linking the html label in the form.

At last, write a service using Spring magic which takes care of the rest as follows in your controller:
    @RequestMapping(value="/customer/getInfo", method=RequestMethod.GET)
    public @ResponseBody CustomerAvailable getCustomerName(@RequestParam String customerId){
        CustomerAvailable customer = new CustomerAvailable();
        customer.setAvailable(true);
        Map<String,String> customerData = new HashMap<String,String>();
        customerData.put("firstName", "FIRSTNAME");
        customerData.put("middleName", "M");
        customerData.put("lastName", "LASTNAME");
        return customer;
    }

Done! But, before I go don't forget to take a look at JSON formatter this is a nice tool to format unstructured JSON response and make it readable. I've added a link to this tool in references.

References:
https://src.springframework.org/svn/spring-samples/mvc-ajax/
http://blog.springsource.com/2010/01/25/ajax-simplifications-in-spring-3-0/
http://api.jquery.com/jQuery.getJSON/
http://ajaxian.com/archives/jquery-logging
http://stackoverflow.com/questions/3403574/no-results-message-on-jquery-autocomplete
http://stackoverflow.com/questions/2866108/jquery-keyup-illegal-characters
http://jetlogs.org/2007/09/14/jquery-textbox-validation-and-the-blur-event/
http://jsonformatter.curiousconcept.com/