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\" >
enctype=\"application/x-www-form-urlencoded\"
label>
<label for=\"title\">Title</
>
<input type=\"text\" name=\"title\"
<label for=\"text\">Entry</label>
<textarea name=\"text\">
</textarea>
<input type=\"submit\">
</form>

Web Forms 1.0
w do I e
But ho chang
<foally
icrmction=g/bt og\"
dynam ioan (tar\" e l
the act me) hofdthPe ST\"ication/x-www-form-urlencoded\">
t =\" O
rcee coype=\"appl
resou n t?
foabm for=\"title\">Title</label>
<l
r el
>
<input type=\"text\" name=\"title\"
<label for=\"text\">Entry</label>
<textarea name=\"text\">
</textarea>
<input type=\"submit\">
</form>

Web Forms 1.0
Why
w do I e
But ho chang and P do only
<foally work OST m GET
icrmction=g/bt og\"
dynam ioan (tar\" e l and P ethods
DELET
the act me) hofdthPe ST\"ication/x-www-formEuarencoUeda>nd
t =\" O
oype=\"appl T\"
sourcee ct ignore
- rle d
re n
d?
fo rm? \"title\">Title</label>
<label for=
>
<input type=\"text\" name=\"title\"
<label for=\"text\">Entry</label>
<textarea name=\"text\">
</textarea>
<input type=\"submit\">
</form>

Web Forms 1.0
Why
w do I e
But ho chang and P do only
<foally work OST m GET
icrmction=g/bt og\"
dynam ioan (tar\" e l and P ethods
DELET
the act me) hofdthPe ST\"ication/x-www-formEuarencoUeda>nd
t =\" O
oype=\"appl T\"
sourcee ct ignore
- rle d
re n
d?
fo rm? \"title\">Title</label>
<label for=
>
type=\"text\" name=\"title\"
<input
<label
How do I specify a
for=\"text\">Entry</label>
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 =\"text/json\">
<link rel=\"alterna te\" href=\"this.json\" type
cript\">
<script type=\"text/javas
function initRest() {
TagName(\"link\");
var links = document.getElementsBy
ntries\");
var entries = do cument.getElementById(\"e
for (link in links) {
nate\") {
if (links[link].rel==\"alter
list of entries
//pull data and populate entries with a
}
}
}
</script>
</head>
\">
<body onload=\"initRest()
<ul id=\"entries\">
</ul>
</body>

Overloading Forms
\"
<form a ction=\"/blog
method=\"PUT\"
enctype= \"text/json\" urn false;\">
orm(this);ret
ons ubmit=\"RESTF Title</title>
<label for=\"title\">
it le</label>
<label f or=\"title\">T
n ame=\"title\">
<input type=\"text\" >
> Entry</label
<labe l for=\"text\"
<textarea name=\"text\">
</textarea>
<input typ e=\"submit\">
</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-POST & GET
s s
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-POST & GET
s s
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-POST & GET
s s
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 integration
dojo widget
ocalhost
:7402/my
data/ent
ries.lis
t.html

Never leave without
screenshots
dojo widget integration

What we heard today
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for AJAX

Thank you very much
lars.trieloff@day.com
For more information, see my weblog at
http://weblogs.goshaky.com/weblog/lars