CS 4720

RESTfulness and AJAX

CS 4720 – Web & Mobile Systems

CS 4720

A Bright New Day with AJAX• Rich, responsive interfaces!• Interactive pages!• Fewer (if any) page refreshes!• Able to withstand server issues!

2

CS 4720

AJAX: Official Definition• From Ajax: A New Approach to Web

Applications by Jesse James Garrett• Standards-based presentation with XHTML and

CSS• Dynamic display and interaction with DOM• Data exchange and manipulation with XML• Asynchronous data retrieval with

XMLHttpRequest• JavaScript holding it all together

3

CS 4720

How does it work?• Relies on two main principles:• 1. Ability to modify the current page and have

the changes show• 2. Ability to send/receive requests without

blocking the thread

4

CS 4720

Dynamic Display• The DOM: Document Object Model• In 1997, support for Dynamic HTML (DHTML)

was added to major browsers• Allowed for the dynamic changing and

redisplaying of the HTML element hierarchy• CSS (cascading style sheets) are a form of this

too• Javascript can see the DOM and alter it on-the-

fly

5

CS 4720

How do we not block?• Javascript is the main reason we can do this.• Javascript has no support for threads at all! It’s

completely event driven. Events like:– A button press– A mouse over– A click– Or, most importantly, an HTTP request

6

CS 4720

XMLHttpRequest• An XMLHttpRequest encapsulates an HTTP

request.• XMLHttpRequest support asynchronous

invocation.• In other words, it just adds itself to the list of

operations, but doesn’t lock resources.• Thus, the main thread is not blocked by the

call, and the UI (or other system operations) can keep running in concert.

7

CS 4720

XMLHttpRequest

8

CS 4720

So… what do we send?• The name AJAX (Asynchronous Javascript and

XML) would suggest that XML would be sent• But really, all you are doing is changing the

DOM… so it could be anything– HTML (which is, of course, a form of XML)– Plain text (but that’s kinda boring)– Another formatted protocol (like SOAP)– Maybe even more Javascript

9

CS 4720

Here comes a pattern…• How does this jive with the observer pattern?• Who is observing? Who is publishing?

10

CS 4720

Example Code

11

CS 4720

Available Toolkits• You don’t still use normal arrays in Java do you?

So why do that with AJAX?– Prototype– Script.aculo.us– Dojo– DWR– Moo.fx– jQuery– Etc.

12

CS 4720

Thanks• Many thanks to Ken Anderson @ Colorodo for

some of this information• Some info also from the fine folks at Wikipedia• This slide deck brought to you by the letter “M”

and the number “blue.”

13