REST AND AJAX. Introduction. Module 13

Transcription

1 Module 13 REST AND AJAX Introduction > 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 They allow for AJAX-based web applications They push more and more behavior to the client, including validation, partial page update, and so on. > In this module, we start with REST (Representational State Transfer), an architectural style that has influenced how we think and handle web resources.

2 Representational State Transfer (REST) > The concept essentially has two parts The resources and how we identify them 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. > It describes how to work with resources using the HTTP protocol and the features offered by this protocol. REST in Five Steps > A Short Primer 1. Give everything an ID 2. Link things together 3. Use standard HTTP methods 4. Support multiple representations 5. Use stateless communications

3 REST in Five Steps > Give Everything an ID Use URIs for entity IDs REST in Five Steps > Link Things Together Query Response <customers> <customer ref="/userdirectory/user/johndoe"/> <customer ref="/userdirectory/user/janedoe"/> <customer ref="/userdirectory/user/jimkirk"/> </customers>

4 REST in Five Steps > Use Standard HTTP Methods REST in Five Steps > Use Standard HTTP Methods Leverage standard semantics for HTTP methods Method GET POST PUT DELETE Purpose Read, possibly cached Update or create without a known ID Update or create with a known ID Remove

5 Example REST in Five Steps > Support Multiple Representations Offer data in a variety of formats XML JSON (X)HTML > Support content negotiation Accept header GET /foo Accept: application/json URI-based GET /foo.json

6 REST in Five Steps > Use Stateless Communications Long lived identifiers Avoid sessions Everything required to process a request contained in the request HATEOAS Principle > Hypermedia As The Engine Of Application State. REST applications should provide at most one fixed URL: all application URLs, with related resources, should be dynamically discovered, and navigated, starting from that fixed URL, thanks to the use of hypermedia links throughout all resources.

7 Common Patterns: Container, Item > Server in Control of URI Path Space List container contents: GET /container Add item to container: POST /container With item in request URI of item returned in HTTP response header e.g. Location: > Read item: GET /container/item > Update item: PUT /container/item With updated item in request > Remove item: DELETE /container/item Common Patterns: Map, Key, Value > Client in Control of URI Path Space List key-value pairs: GET /map Put new value to map: PUT /map/{key} With entry in request e.g. PUT /map/dir/contents.xml Read value: GET /map/{key} Update value: PUT /map/{key} With updated value in request Remove value: DELETE /map/{key}

8 Advantages of a RESTful Approach > Reduced client coding errors. > Reduced invalid state transition calls. > Fine grained evolution without (necessarily) breaking old clients. > Addressability: URLs. > A uniform, constrained interface: HTTP Methods. > A stable protocol: HTTP. > Interoperability. > Ubiquity. > Familiarity. Key Benefits > Server Side Horizontal scaling Straightforward failover Cacheable Reduced coupling Works well with existing Web infrastructure

9 Key Benefits > Client Side Bookmarkable Easy to experiment in browser Broad programming language support Choice of data formats Drawbacks of REST > If the system is a very large one, then designing based on REST could become a very complex task. No direct bridge to the OOP world No standard formal language to describe interaction, like WSDL > Few tools. > Restrictions for GET length sometimes may be a problem. > Implementing Security on a REST system is an issue.

10 public class RestfulWorld private public Country findcountrybycode(@pathvariable String code) { return dao.findentity(code); } Controller = RequestMethod.GET) public String init(model model) { model.addattribute("continents", dao.getallcontinents()); return "search_ajax"; public List<Country> findbycontinent(@pathvariable String continent) { return dao.findcountriesbycontinent(continent); }

11 Asynchronous JavaScript and XML (AJAX) > The term AJAX was coined4 by Jesse James Garrett in > 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/JSON) Asynchronous data retrieval using the XMLHttpRequest JavaScript to bring all this together Asynchronous JavaScript and XML (AJAX) > 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 > We use jquery in this training It is one of the most widely used libraries.

12 search_ajax.jsp (1/3) <script type="text/javascript" src="/lab-mvc/jquery js"></script> <script type="text/javascript"> $(document).ready(function() { $('#btnsearch').click(function(){ var continent= $('#continent').val(); $.ajax({ method: "POST", url: "/lab-mvc/world/rest/findbycontinent/" +continent, success: function(responsedata){ $('#tbl').remove(); $('#result').append( '<table border="1" id="tbl"></table>') }); </script> search_ajax.jsp (2/3) }); }); $.each(responsedata, function(i, item) { $('#tbl').append('<tr><td>' +item.code + '</td><td>'+item.name + '</td><td>'+item.population+ '</td></tr>' ); }); }

13 <body> search_ajax.jsp (3/3) <select id="continent" name="continent"> <c:foreach items="${continents}" var="cont"> <option value="${cont}">${cont}</option> </c:foreach> </select> <input id="btnsearch" type="submit" value="search" /> <div id="result"> </div> </body> </html>