Lars Trieloff's presentation on REST and AJAX held at AJAX World East 2008 in New York.

1. REST and AJAX
reconciled
Lars Trieloff at AJAX World East 2008

2. What is REST?

3. What is REST?
• Buzzword

4. What is REST?
• Buzzword
• Alternative to SOAP

5. What is REST?
• Buzzword
• Alternative to SOAP
• Representational State Transfer

6. What is REST?
• Buzzword
• Alternative to SOAP
• Representational State Transfer
• Architecture of the World Wide Web

7. What is REST?
• Buzzword
• Alternative to SOAP
• Representational State Transfer
• Architecture of the World Wide Web
• Architecture for Scalable Network Applications

8. How do we start?
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for AJAX

9. Things are Resources
Resource
Resources can be items of information (a blog entry) or or
informational descriptions of real things (a blog author)

10. 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

11. Resources have Representations
Representation Resource Representation
URI
Representations can have different formats (HTML, XML,
JSON) or show different aspects of a resource.

12. 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

13. 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

14. 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.

15. 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.

16. 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.

17. 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.

18. 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.

19. How do we go on?
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for AJAX

20. What are REST Clients
• Libwww • Microsoft Internet
Explorer
• Apache Commons
HTTPClient • Mozilla Firefox
• Python httplib • Apple Safari
• Ruby Net::HTTP • Opera

21. HTTP Client Libraries
+ Full HTTP Support
+ Desktop Applications
+Server-side mashups
- Not in the web browser

22. Web Browsers as HTTP Clients
+ No client needed
+Everywhere installed
- Weak HTTP Support
- Web Forms 1.0
- Browser Bugs

23. Web Forms 1.0
<form
action=quot;/blogquot;
method=quot;POSTquot; >
enctype=quot;application/x-www-form-urlencodedquot;
label>
<label for=quot;titlequot;>Title</
>
<input type=quot;textquot; name=quot;titlequot;
<label for=quot;textquot;>Entry</label>
<textarea name=quot;textquot;>
</textarea>
<input type=quot;submitquot;>
</form>

24. Web Forms 1.0
w do I e
But ho chang
<foally
icrmction=g/bt ogquot;
dynam ioan (tarquot; e l
the act me) hofdthPe STquot;ication/x-www-form-urlencodedquot;>
t =quot; O
rcee coype=quot;appl
resou n t?
foabm for=quot;titlequot;>Title</label>
<l
r el
>
<input type=quot;textquot; name=quot;titlequot;
<label for=quot;textquot;>Entry</label>
<textarea name=quot;textquot;>
</textarea>
<input type=quot;submitquot;>
</form>

25. Web Forms 1.0
Why
w do I e
But ho chang and P do only
<foally work OST m GET
icrmction=g/bt ogquot;
dynam ioan (tarquot; e l and P ethods
DELET
the act me) hofdthPe STquot;ication/x-www-formEuarencoUeda>nd
t =quot; O
oype=quot;appl Tquot;
sourcee ct ignore
- rle d
re n
d?
fo rm? quot;titlequot;>Title</label>
<label for=
>
<input type=quot;textquot; name=quot;titlequot;
<label for=quot;textquot;>Entry</label>
<textarea name=quot;textquot;>
</textarea>
<input type=quot;submitquot;>
</form>

26. Web Forms 1.0
Why
w do I e
But ho chang and P do only
<foally work OST m GET
icrmction=g/bt ogquot;
dynam ioan (tarquot; e l and P ethods
DELET
the act me) hofdthPe STquot;ication/x-www-formEuarencoUeda>nd
t =quot; O
oype=quot;appl Tquot;
sourcee ct ignore
- rle d
re n
d?
fo rm? quot;titlequot;>Title</label>
<label for=
>
type=quot;textquot; name=quot;titlequot;
<input
<label
How do I specify a
for=quot;textquot;>Entry</label>
different
<textarea name=quot;textquot;>
</textarea> encoding, for
<input type=quot;submitquot;>
</form> example XML or
JSON?

27. 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/

28. Solution for now:
making browsers better HTTP clients using
AJAX

29. Where are we now?
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for AJAX

30. 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

31. Getting alternate
Representations
<head>
tle>
<title>REST and AJAX</ti =quot;text/jsonquot;>
<link rel=quot;alterna tequot; href=quot;this.jsonquot; type
criptquot;>
<script type=quot;text/javas
function initRest() {
TagName(quot;linkquot;);
var links = document.getElementsBy
ntriesquot;);
var entries = do cument.getElementById(quot;e
for (link in links) {
natequot;) {
if (links[link].rel==quot;alter
list of entries
//pull data and populate entries with a
}
}
}
</script>
</head>
quot;>
<body onload=quot;initRest()
<ul id=quot;entriesquot;>
</ul>
</body>

32. Overloading Forms
quot;
<form a ction=quot;/blog
method=quot;PUTquot;
enctype= quot;text/jsonquot; urn false;quot;>
orm(this);ret
ons ubmit=quot;RESTF Title</title>
<label for=quot;titlequot;>
it le</label>
<label f or=quot;titlequot;>T
n ame=quot;titlequot;>
<input type=quot;textquot; >
> Entry</label
<labe l for=quot;textquot;
<textarea name=quot;textquot;>
</textarea>
<input typ e=quot;submitquot;>
</form>

33. Data-only requests
function RESTForm(fo
rm) {
var json = quot;{quot; +
quot;title: quot; + form.tit
le.value +quot;, quot; +
quot;text: quot; + form.text
.value +
quot;}quot;;
var xmlhttp = (windo
w.XMLHttpRequest) ?
new XMLHttpRequest()
:
ActiveXObject(quot;Micro
soft.XMLHTTPquot;);
xmlhttp.open(form.me
thod, form.action);
xmlhttp.send(json);
}

34. 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

35. 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

36. 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

37. What is next?
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for AJAX

38. 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

39. 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

40. How do we go on?
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for AJAX

41. 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

42. µ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

43. µ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

44. µ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

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

46. Never leave without
screenshots
dojo widget integration

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

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