rest and ajax reconciled
DESCRIPTION
Lars Trieloff's presentation on REST and AJAX held at AJAX World East 2008 in New York.TRANSCRIPT
REST and AJAX reconciled
Lars Trieloff at AJAX World East 2008
What is REST?
What is REST?
• Buzzword
What is REST?
• Buzzword
• Alternative to SOAP
What is REST?
• Buzzword
• Alternative to SOAP
• Representational State Transfer
What is REST?
• Buzzword
• Alternative to SOAP
• Representational State Transfer
• Architecture of the World Wide Web
What is REST?
• Buzzword
• Alternative to SOAP
• Representational State Transfer
• Architecture of the World Wide Web
• Architecture for Scalable Network Applications
How do we start?
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for AJAX
Things are Resources
Resource
Resources can be items of information (a blog entry) or or informational descriptions of real things (a blog author)
Resources have URIs
Resource
Uniform Resource Identifier are unique ids for resources, just like ISBN for a book or a driver’s license for a person
URI
Resources have Representations
Resource
Representations can have different formats (HTML, XML, JSON) or show different aspects of a resource.
URI
Representation Representation
Representations have URLs
Resource
Uniform Resource Locators describe how to get to a representation of a resource, they include protocol,
hostname, path and extra information
URI
Representation Representation
URL URL
Clients interact via Verbs
Resource
Uniform Resource Locators describe how to get to a representation of a resource, they include protocol,
hostname, path and extra information
URI
Representation Representation
URL URLGET POST PUT DELETE
GET is for reading
Resource
GET is a “safe” method. There are no side-effects, and the requested resource stays unmodified.
Representation
GET
Resource
Representation
Before After
PUT is for replacing
Resource
PUT is a “idempotent” method. Issuing the same PUT request multiple times yields the same result.
Representation
PUT
Resource
Representation
Before After
DELETE is for deleting
Resource
DELETE is also “idempotent”. Deleting a resource twice yields the same result - the resource is gone.
Representation
DELETE
Before After
POST is for action
Resource
POST is neither safe nor idempotent. It is used for updating, creating and executing resources.
Representation
POST
Before After
Resource
Representation
Resource
Representation
So what?
• There are unlimited resources
• Every resource can be addressed
• There are only four verbs
• Resources have an uniform interface
This makes it easy to write clients for existing REST applications and makes it easy to expose a RESTful
interface to an application.
How do we go on?
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for AJAX
What are REST Clients
• Libwww
• Apache Commons HTTPClient
• Python httplib
• Ruby Net::HTTP
• Microsoft Internet Explorer
• Mozilla Firefox
• Apple Safari
• Opera
HTTP Client Libraries
+Full HTTP Support
+Desktop Applications
+Server-side mashups
- Not in the web browser
Web Browsers as HTTP Clients
+No client needed
+Everywhere installed
- Weak HTTP Support
- Web Forms 1.0
- Browser Bugs
Web Forms 1.0
<form action="/blog" method="POST" enctype="application/x-www-form-u
rlencoded">
<label for="title">Title</label>
<input type="text" name="title">
<label for="text">Entry</label>
<textarea name="text"> </textarea> <input type="submit"></form>
Web Forms 1.0
<form action="/blog" method="POST" enctype="application/x-www-form-u
rlencoded">
<label for="title">Title</label>
<input type="text" name="title">
<label for="text">Entry</label>
<textarea name="text"> </textarea> <input type="submit"></form>
But how do I dynamically change
the action (target resource) of the
form?
Web Forms 1.0
<form action="/blog" method="POST" enctype="application/x-www-form-u
rlencoded">
<label for="title">Title</label>
<input type="text" name="title">
<label for="text">Entry</label>
<textarea name="text"> </textarea> <input type="submit"></form>
But how do I dynamically change
the action (target resource) of the
form?
Why do only GET and POST methods work and PUT and
DELETE are ignored?
Web Forms 1.0
<form action="/blog" method="POST" enctype="application/x-www-form-u
rlencoded">
<label for="title">Title</label>
<input type="text" name="title">
<label for="text">Entry</label>
<textarea name="text"> </textarea> <input type="submit"></form>
But how do I dynamically change
the action (target resource) of the
form?
Why do only GET and POST methods work and PUT and
DELETE are ignored?How do I specify a
different encoding, for
example XML or JSON?
Solutions:
• Changing the action dynamically: URI Templates
• Other Methods than POST and GET: Web Forms 2.0
• More advanced encodings: Web Forms 2.0
http://bitworking.org/projects/URI-Templates/
http://www.whatwg.org/specs/web-forms/current-work/
Solution for now:
AJAXmaking browsers better HTTP clients using
Where are we now?
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for AJAX
With AJAX we can
• get data-only (JSON) representations of web pages in the background
• Overload Web Forms 1.0 behavior, and make them 2.0
• issue data-only (JSON) HTTP requests to these very resources
Getting alternate Representations
<head> <title>REST and AJAX</title>
<link rel="alternate" href="this.json" type="text/json">
<script type="text/javascript">
function initRest() { var links = document.getElement
sByTagName("link");
var entries = document.getElementById("entries");
for (link in links) { if (links[link].rel=="alterna
te") {
//pull data and populate entries with a list of entries
} } } </script> </head> <body onload="initRest()">
<ul id="entries"> </ul> </body>
Overloading Forms
<form action="/blog"
method="PUT" enctype="text/jso
n"
onsubmit="RESTForm(this);return fals
e;">
<label for="title">Title</title>
<label for="title">Title</label>
<input type="text" name="title">
<label for="text">Entry</label>
<textarea name="text">
</textarea>
<input type="submit">
</form>
Data-only requests function RESTForm(form) { var json = "{" + "title: " + form.title.value +", " + "text: " + form.text.value + "}"; var xmlhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open(form.method, form.action); xmlhttp.send(json); }
Planning RESTful AJAX applications
1. Define the domain model
2. Define Resources, Resource Types and URIs
3. Define Representations for Resources
4. Define POST behavior
Watch out!
• Problem: Some browsers do not support PUT or DELETE requests, even as XHR
• Solution: Wrap your PUT or DELETE Request in a POST request and add the X-HTTP-Method-Override Header
common pitfalls and how to cope with them
Watch out!
• Problem: Some browsers do not handle 301 or 302 response codes for redirects properly
• Solution: Define a format for redirection messages that wraps headers such as Location and Status codes in JSON
common pitfalls and how to cope with them
What is next?
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for AJAX
Framework Checklist
• Resource-based approach?
• having something like /action/view/1 is a warning sign
• Acknowledges existence of Representations?
• you need multiple representations
• Solid engineering, community, support?
• without, you can do it on your own
frameworks can help getting the job done
Framework Examples
• Apache Cocoon
• based on XML pipelines, URL patterns, selectors
• RESTlet
• Like Servlets for REST. Good for existing models
• Apache Sling
• based on JCR, a database for resources, with server-side scripting support
frameworks that can help getting the job done
How do we go on?
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for AJAX
Sling with µjax• Exposes the complete JCR repository
(Resource Database) as JSON tree
• API for reading, creating, writing, deleting and moving Resources
• Stand-alone Javascript library, plays nicely with your framework
• Extra: Dojo Toolkit Integration
µjax Core Principles
I2
3
Browser
J2EE WebServer
browser & ujax.jsreading: json & resource GET’swriting: form-POSTs & GETs
UjaxServlet.javatranslating requests to JCR callsJCR CompliantContent Repository
I
2
3
µjax Core Principles
I2
3
Browser
J2EE WebServer
browser & ujax.jsreading: json & resource GET’swriting: form-POSTs & GETs
UjaxServlet.javatranslating requests to JCR callsJCR CompliantContent Repository
I
2
3very simple js API to read content, Forms to write content
µjax Core Principles
I2
3
Browser
J2EE WebServer
browser & ujax.jsreading: json & resource GET’swriting: form-POSTs & GETs
UjaxServlet.javatranslating requests to JCR callsJCR CompliantContent Repository
I
2
3very simple js API to read content, Forms to write content
handles all the heavy lifting, particularly security16 tons
resource oriented urlshttp://localhost:7402/mydata/entries.list.html dojo widget integration
Never leave without screenshots
dojo widget integration
Never leave without screenshots
What we heard today
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for AJAX
Thank you very [email protected]
For more information, see my weblog athttp://weblogs.goshaky.com/weblog/lars