Spring MVC, Ajax and JSON Part 3 - The Client Side Code

If you’ve been following this short series of blogs on Spring, Ajax and JSON you’ll recall that I’ve got as far as creating a Spring MVC web application that displays a form, which allows the user to select a bunch of items and submit a request to the server to purchase them. The server then replies with some JSON allowing the user to confirm their purchases. If you already know all this you can now jump to HERE. If you’re wondering what I’m talking about then take a look at the first two blogs in this series:

• Spring MVC, Ajax and JSON Part 1 - Setting The Scene
• Spring MVC, Ajax and JSON Part 2 - The Server Side Code

HERE

Having completed the server side code then the next thing to do is to move on to the client side code,

Spring MVC, Ajax and JSON Part 2 - The Server Side Code

In my last blog I said that I was going to talk about Spring, Ajax and JSON, but didn't. The reason for this is that I wanted to set the scene using a (barely) credible shopping web site scenario. In this scenario when the user clicks on the eCommerce page link, the server app loads some the items from a catalogue and displays them on the page. The user then checks a number of items and presses 'Confirm Purchase'. Now, this is where Ajax and JSON come in, on pressing 'Confirm Purchase' the browser makes an Ajax request to the server sending it the item ids. The server then retrieves the items from the database returns them as JSON to the browser. The browser then processes the JSON, displaying the items on he screen.

My last blog got as far as creating and displaying a form that presented a list of items from the imaginary catalogue to the user. This blog takes a look at the next step in the project: creating some JSON.

Spring MVC, Ajax and JSON Part 1 - Setting The Scene

I've been thinking about writing a blog on Spring, Ajax and JSON for a good while, but I've never got around to it. This was mainly because it was quite complicated and the technique required has been in a state of flux. When I decided to write this blog, I had a scout around the Internet and if you look on places such as Stack Overflow you'll see many different and often contradictory answers to the question "how do I write a Spring Ajax/JSON application?" I think that this is fault of the Guys at Spring in that they've been really busy improving Spring's support for JSon; not only that the Guys at JQuery have also been busy, which means that overall things have changed dramatically over the last couple of years and the answers to this "how do I write a Spring Ajax/JSON application?" are out of date.

Using RESTful URLs on your Spring 3 MVC Webapp

This blog comes as an answer to a question from a reader. Now, as a rule, I don’t do request blogs, but I thought that this sounded like an interesting topic. The question refers to my blog from July 11 on accessing request parameters using Spring 3 MVC and was “Do you know how to encode the uuid so it is not visible to the user for security concerns?”. The answer is “Yes”, but that would make for a very short blog.

Adding the Blueprint Toolkit to your Spring Webapp

If you’ve ever taken a look at the Spring MVC sample code, you’ll notice that the screens have a certain style and digging deeper into the JSPs you’ll find that the apps use a number of CSS classes with their <div>s tag such as container and span-12.

The Spring MVC-Ajax Sample and its JSON Library

The Spring-MVC sample code is available from the Spring subversion repository at https://src.springframework.org/svn/spring-samples. The idea of this sample is to demonstrate a simple Ajax application that updates an account screen both checking that a user name is available and adding a new account to the application.

Adding JQuery to your Page

JQuery is probably the most popular Javascript library available today and given its flexibility, and the enormous number of plugins it’s not difficult to see why. There are two versions of JQuery available, a production version and developer or debug version, and at least two ways of including it in your page.