REST and AJAX

Marten Deinum，Koen Serneels

Until now we have been building quite a classic web application: we send a request to the server, the server processes the request, and we render the result and show it to the client. Over the last decade, however the way we build web applications has changed considerably. Now we have JavaScript and JSON/XML, which allow for AJAX-based web applications and also push more and more behavior push to the client, including validation, rendering parts of the screen, and so on.  In this chapter we start with REST(Representational State Transfer), a concept or architectural style that has influenced how we as developers think of web resources and how we should handle them. We next discuss AJAX and consider it in combination with REST. The second part of this chapter covers file uploads. You will see how to do file uploading with the Spring Framework and how to handle the task in our controllers. However before we get into this let’s take a look at REST.

Representational State Transfer (REST)

This section briefly explains the topic of REST. The concept essentially has two parts: first the resources and how we identify them, and then the way we operate or work with these resources. REST was described in 2000 by Roy Thomas Fielding in a paper called ‘Architectural Styles and the Design of Network-based Software Architectures’.2 It describes how to work with resources using the HTTP protocol and the features offered by this protocol.

Identifying Resources

We briefly discussed the parts a URL (Unique Resource Locator) consists of. For REST this doesn’t really change; however, the URL is important as it points to a unique resource.

In REST it is all about a representation of a resource, and hence the URL/URI is important. It gives us the location of an actual resource (web page, image on the web page, mp3 file, or whatever). What we see in our web browser isn’t the actual resource but a representation of that resource. The next section explains how we can use this resource location to work with (modify, delete, and so on) that resource.

Asynchronous JavaScript and XML (AJAX)

The term AJAX was coined4 by Jesse James Garrett5 in 2005. AJAX by itself isn’t a technology, it is a collection of technologies working together to create a rich user experience for our web application. AJAX incorporates the following technologies: • Standards-based presentation by using HTML and CSS • Dynamic display and interaction by using the Document Object Model (DOM) • Data interchange and manipulation (using XML or JSON) • Asynchronous data retrieval using the XMLHttpRequest, JavaScript to bring all this together Although the acronym stands for Asynchronous JavaScript and XML, it is often used with JavaScript Object Notation (JSON) to pass data between the client and server.  As AJAX has already been in use for a couple of years, there are quite a lot of JavaScript frameworks out there that make it easier to create a rich user experience. For Spring MVC, it doesn’t matter which JavaScript library you choose, and it is beyond the scope of the book to discuss the abundance of JavaScript libraries out there. For our example we use jQuery,6 as at the moment of writing it is one of the most widely used libraries out there. To be able to use jQuery, we need to load the JavaScript file containing this library.

Adding AJAX to Our Application

Thanks to the flexibility of Spring MVC, it is quite easy to add AJAX behavior to our application and integrate it nicely with Spring MVC. In this section we will see how we can change our form submit into an AJAX-based form submit (with and without the use of JSON). However a form submit isn’t the only possible use for AJAX; it merely serves our sample application, it is also quite possible to create autocompletion fields, automatic field/form validation, and so on.

Sending and Receiving JSON

It is possible to send JSON to the server as well as to receive JSON from the server. . The advantage of sending JSON is that it is quite compact and therefore faster to send and process (both client and server side) than XML. A drawback can be that you need some hand-coding to prepare the JSON for sending to the server, especially when reusing existing objects (as we can see in our sample). To make this possible, we need to modify our client-side JavaScript and also make some changes to our request handling method. The controller needs to know that we aren’t using a normal model attribute but instead want to use JSON for our BookSearchCriteria. To enable this, we are going to annotate our method argument with RequestBody; it is analogous to ResponseBody, but for incoming requests.