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
• Ar...
How do we start?
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for...
Things are Resources

                        Resource




Resources can be items of information (a blog entry) or or
 inf...
Resources have URIs

                         Resource



                            URI

Uniform Resource Identifier are ...
Resources have Representations


    Representation     Resource       Representation



                          URI

 R...
Representations have URLs
      URL                                   URL


 Representation       Resource         Represe...
Clients interact via Verbs
GET        URL         POST              PUT       URL          DELETE




      Representation...
GET is for reading
            GET




       Representation                Representation



         Resource           ...
PUT is for replacing
         PUT




    Representation               Representation



      Resource                   ...
DELETE is for deleting
          DELETE




     Representation



       Resource

         Before                       ...
POST is for action
            POST




       Representation           Representation     Representation



          Res...
So what?
 • There are unlimited resources
 • Every resource can be addressed
 • There are only four verbs
 • Resources hav...
How do we go on?
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for...
What are REST Clients

• Libwww         • Microsoft Internet
                   Explorer
• Apache Commons
  HTTPClient    ...
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 ...
Web Forms 1.0
<form
    action=quot;/blogquot;
    method=quot;POSTquot;                               >
    enctype=quot;...
Web Forms 1.0
           w do I e
   But ho chang
      <foally
       icrmction=g/bt ogquot;
dynam ioan (tarquot; e l
 th...
Web Forms 1.0
                                         Why
          w do I e
   But ho chang                        and P...
Web Forms 1.0
                                         Why
          w do I e
   But ho chang                        and P...
Solutions:
     • Changing the action dynamically: URI
       Templates

     • Other Methods than POST and GET: Web
     ...
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 fo...
With AJAX we can
• get data-only (JSON) representations of
  web pages in the background

• Overload Web Forms 1.0 behavio...
Getting alternate
        Representations
<head>
                            tle>
  <title>REST and AJAX</ti              ...
Overloading Forms
                      quot;
<form a ction=quot;/blog
  method=quot;PUTquot;
  enctype=  quot;text/jsonqu...
Data-only requests
 function RESTForm(fo
                      rm) {
   var json = quot;{quot; +
     quot;title: quot; + ...
Planning RESTful AJAX
       applications
1. Define the domain model
2. Define Resources, Resource Types and
   URIs
3. De...
Watch out!
 common pitfalls and how to cope with them

• Problem: Some browsers do not support
  PUT or DELETE requests, e...
Watch out!
 common pitfalls and how to cope with them

• Problem: Some browsers do not handle
  301 or 302 response codes ...
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 somethi...
Framework Examples
frameworks that can help getting the job done

•   Apache Cocoon
    •   based on XML pipelines, URL pa...
How do we go on?
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks for...
Sling with µjax
• Exposes the complete JCR repository
  (Resource Database) as JSON tree

• API for reading, creating, wri...
µjax Core Principles
 I   browser & ujax.js
     reading: json & resource GET’s
     writing: form-POST & GET
            ...
µjax Core Principles
 I   browser & ujax.js
     reading: json & resource GET’s
     writing: form-POST & GET
            ...
µjax Core Principles
 I   browser & ujax.js
     reading: json & resource GET’s
     writing: form-POST & GET
            ...
Never leave without
                        screenshots




resource or
http://l    iented urls                           ...
Never leave without
   screenshots




          dojo widget integration
What we heard today
• Introduction
• Core Concepts
• REST Clients
• AJAX REST Clients
• REST Frameworks
• REST Frameworks ...
Thank you very much
            lars.trieloff@day.com




 For more information, see my weblog at
 http://weblogs.goshaky....
Upcoming SlideShare
Loading in...5
×

REST and AJAX Reconciled

14,215

Published on

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

Published in: Technology
1 Comment
36 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,215
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
578
Comments
1
Likes
36
Embeds 0
No embeds

No notes for slide

REST and AJAX Reconciled

  1. 1. REST and AJAX reconciled Lars Trieloff at AJAX World East 2008
  2. 2. What is REST?
  3. 3. What is REST? • Buzzword
  4. 4. What is REST? • Buzzword • Alternative to SOAP
  5. 5. What is REST? • Buzzword • Alternative to SOAP • Representational State Transfer
  6. 6. What is REST? • Buzzword • Alternative to SOAP • Representational State Transfer • Architecture of the World Wide Web
  7. 7. What is REST? • Buzzword • Alternative to SOAP • Representational State Transfer • Architecture of the World Wide Web • Architecture for Scalable Network Applications
  8. 8. How do we start? • Introduction • Core Concepts • REST Clients • AJAX REST Clients • REST Frameworks • REST Frameworks for AJAX
  9. 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. 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. 11. Resources have Representations Representation Resource Representation URI Representations can have different formats (HTML, XML, JSON) or show different aspects of a resource.
  12. 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. 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. 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. 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. 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. 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. 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. 19. How do we go on? • Introduction • Core Concepts • REST Clients • AJAX REST Clients • REST Frameworks • REST Frameworks for AJAX
  20. 20. What are REST Clients • Libwww • Microsoft Internet Explorer • Apache Commons HTTPClient • Mozilla Firefox • Python httplib • Apple Safari • Ruby Net::HTTP • Opera
  21. 21. HTTP Client Libraries + Full HTTP Support + Desktop Applications +Server-side mashups - Not in the web browser
  22. 22. Web Browsers as HTTP Clients + No client needed +Everywhere installed - Weak HTTP Support - Web Forms 1.0 - Browser Bugs
  23. 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. 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. 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. 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. 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. 28. Solution for now: making browsers better HTTP clients using AJAX
  29. 29. Where are we now? • Introduction • Core Concepts • REST Clients • AJAX REST Clients • REST Frameworks • REST Frameworks for AJAX
  30. 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. 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. 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. 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. 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. 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. 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. 37. What is next? • Introduction • Core Concepts • REST Clients • AJAX REST Clients • REST Frameworks • REST Frameworks for AJAX
  38. 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. 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. 40. How do we go on? • Introduction • Core Concepts • REST Clients • AJAX REST Clients • REST Frameworks • REST Frameworks for AJAX
  41. 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. 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. 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. 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. 45. Never leave without screenshots resource or http://l iented urls integration dojo widget ocalhost :7402/my data/ent ries.lis t.html
  46. 46. Never leave without screenshots dojo widget integration
  47. 47. What we heard today • Introduction • Core Concepts • REST Clients • AJAX REST Clients • REST Frameworks • REST Frameworks for AJAX
  48. 48. Thank you very much lars.trieloff@day.com For more information, see my weblog at http://weblogs.goshaky.com/weblog/lars
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×