REST and AJAX Reconciled

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


• Representational State Transfer

What is REST?

• Buzzword



• Architecture of the World Wide Web

What is REST?

• Buzzword



• 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


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


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


• REST Frameworks


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


rlencoded">





But how do I dynamically change

the action (target resource) of the

form?

Web Forms 1.0


rlencoded">







form?

Why do only GET and POST methods work and PUT and

DELETE are ignored?

Web Forms 1.0


rlencoded">







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


• REST Frameworks


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>




<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


• REST Frameworks


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


• REST Frameworks


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


I2

3

Browser

J2EE WebServer



I

2

3very simple js API to read content, Forms to write content


I2

3

Browser

J2EE WebServer



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

http://localhost:7402/crx/rjax/firststeps/1_write.html












dojo widget integration

Never leave without screenshots

What we heard today

• Introduction

• Core Concepts

• REST Clients


• REST Frameworks


Thank you very [email protected]

For more information, see my weblog athttp://weblogs.goshaky.com/weblog/lars

mailto:[email protected]




Technology

REST and AJAX Reconciled