1. CS 4720 RESTfulness and AJAX CS 4720 – Web & Mobile Systems

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

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

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

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

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

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

8. CS 4720 XMLHttpRequest 8

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

10. CS 4720 Here comes a pattern… How does this jive with the observer pattern? Who is observing? Who is publishing? 10

11. CS 4720 Example Code 11

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

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