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

URI

Uniform Resource Identifier are unique ids for resources, just

like ISBN for a book or a driver’s license for a person
Resources have Representations

Representation Resource Representation

URI

Representations can have different formats (HTML, XML,

JSON) or show different aspects of a resource.
Representations have URLs
URL URL

Representation Resource Representation

URI

Uniform Resource Locators describe how to get to a

representation of a resource, they include protocol,
hostname, path and extra information
 Clients interact via Verbs
GET URL POST PUT URL DELETE

Representation Resource Representation

URI

Uniform Resource Locators describe how to get to a

representation of a resource, they include protocol,
hostname, path and extra information
 GET is for reading
GET

Representation Representation

Resource Resource

Before After
GET is a “safe” method. There are no side-effects, and the
requested resource stays unmodified.
 PUT is for replacing
PUT

Representation Representation

Resource Resource

Before After
PUT is a “idempotent” method. Issuing the same PUT
request multiple times yields the same result.
 DELETE is for deleting
DELETE

Representation

Resource

Before After
DELETE is also “idempotent”. Deleting a resource twice
yields the same result - the resource is gone.
 POST is for action
POST

Representation Representation Representation

Resource Resource Resource

Before After
POST is neither safe nor idempotent. It is used for updating,
creating and executing resources.
 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 • Microsoft Internet

Explorer
• Apache Commons
HTTPClient • Mozilla Firefox
• Python httplib • Apple Safari
• Ruby Net::HTTP • 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"
n / x - w w w - f o r m - u r l e n c o d e d ">
enctype="applicatio

ab el f o r= " t i t le " > T i t l e < /label>

<l
t y p e = "t e x t " n a m e = " t i t l e">
<input
f o r = " t ex t " > E nt r y < / l a b e l>
<label
<textarea name="text">
</textarea>
<input type="submit">
</form>
 Web Forms 1.0
w d o I
But ho change
oa
<fic rmlly
dynam ioanct(itoanr=g"/ebtlog"
th e ac t method="POST"
e
o u r c e ) o f t h f o r m - u r l e n c o d e d ">
res e n c t
?
y p e= " application / x - w w w -

o r m
f<label for="title">Title</label>
t yp e = "t e xt " n a m e = " t i t l e">
<input
f o r= " t ex t " > E nt r y < / l a b e l>
<label
<textarea name="text">
</textarea>
<input type="submit">
</form>
 Web Forms 1.0
Why
o w d o I an do
d POS only GE
But h change w T T
oa
<fic rmlly o m
dy na m r g e t D r k an e t h o
c tioact(i
n toa
n = " /b lo g "
ELE d PU d s
the a mee)thoofdt=h"P"eOaSpplication/x-www-forTmE-uarrleencodeTda">nd
T "

res o u r ce n c type= ignore

f o r m ? d ?
<label for= "title">Title</label>
t yp e = "t e xt " n a m e = " t i t l e">
<input
f o r= " t ex t " > E nt r y < / l a b e l>
<label
<textarea name="text">
</textarea>
<input type="submit">
</form>
 Web Forms 1.0
Why
o w d o I an do
d POS only GE
But h change w T T
oa
<fic rmlly o m
dy na m r g e t D r k an e t h o
c tioact(i
n toa
n = " /b lo g "
ELE d PU d s
the a mee)thoofdt=h"P"eOaSpplication/x-www-forTmE-uarrleencodeTda">nd
T "

res o u r ce n c type= ignore

f o r m ? d ?
<label for= "title">Title</label>
t yp e = "t e xt " n a m e = " t i t l e">
<input
<label f o r= " How do I specify a
t ex t " > E nt r y < / l a b e l>
different
<textarea name="text">
</textarea> encoding, for
<input type="submit">
</form> 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:
making browsers better HTTP clients using

AJAX
 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>
tle>
<title>REST and AJAX</ti
te " hr ef =" th is .j son" ty pe="text/json">
<link rel="alterna
cript">
<script type="text/javas
function initRest() {
= do cu me nt .g et El em en ts ByTagName("link");
var links
cu me nt .g et El em en tB yI d( "entries");
var entries = do
for (link in links) {
(l in ks [l in k] .r el == "a lt ernate") {
if
po pu la te en tr ie s wi th a list of entries
//pull data and
}
}
}
</script>
</head>
">
<body onload="initRest()
<ul id="entries">
</ul>
</body>
 Overloading Forms
c t i o n = "/ b l o g"
<form a
method="PUT"
" t e x t / j s o n " >
enctype= h i s ); r e tu r n f a l s e ; "
= "R E S T Fo r m ( t
ons u b m i t e < / t i t le >
"t i t l e " >T i t l
<label f o r = l >
> Tit l e < / l a b e
o r = " t it l e "
<label f a m e = " t i t l e " >
t y p e = " t e xt " n
<input t ry < / l a b e l>
or = " t e x t "> E n
<labe l f
n a me = " t e x t ">
<textarea
</textarea> >
e = " s u b m i t "
<input typ
</form>
 Data-only requests
function RESTForm(fo
rm) {
var json = "{" +
"title: " + form.tit
le.value +", " +
"text: " + form.text
.value +
"}";
var xmlhttp = (windo
w.XMLHttpRequest) ?
new XMLHttpRequest()
:
ActiveXObject("Micro
soft.XMLHTTP");
xmlhttp.open(form.me
thod, 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!
common pitfalls and how to cope with them

• 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
 Watch out!
common pitfalls and how to cope with them

• 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
 What is next?
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for AJAX
Framework Checklist
frameworks can help getting the job done

• 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
Framework Examples
frameworks that can help getting the job done

• 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
 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
I browser & ujax.js
reading: json & resource GET’s
writing: form-POSTs & GETs
J2EE Web
Server
3
2
Browser I
2 UjaxServlet.java
translating requests
to JCR calls
3 JCR Compliant
Content Repository
 µjax Core Principles
I browser & ujax.js
reading: json & resource GET’s
writing: form-POSTs & GETs
J2EE Web
Server
3
2
Browser I
very simple js A 2 UjaxServlet.java
translating requests
read content, FoPI to to JCR calls
r
to write contenms
t 3 JCR Compliant
Content Repository
 µjax Core Principles
I browser & ujax.js
reading: json & resource GET’s
writing: form-POSTs & GETs
J2EE Web
Server
3
2 handles all the h
particularly se
eavy lifting,
curity
Browser I 16 t
ons

very simple js A 2 UjaxServlet.java

translating requests
read content, FoPI to to JCR calls
r
to write contenms
t 3 JCR Compliant
Content Repository
 Never leave without
screenshots

resource or
http://l iented urls inte grat ion
dojo widget
ocalhost
:7402/my
data/ent
ries.lis
t.html
Never leave without
screenshots

inte grat ion

dojo widget
What we heard today
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for AJAX
Thank you very much
[email protected]

For more information, see my weblog at

http://weblogs.goshaky.com/weblog/lars