Foundations of Ajax

Ryan Asleson and Nathaniel T. Schutta

Who Are We?

Ryan Asleson Nathaniel T. Schutta www.ntschutta.com/jat/ First Ajax book!

The Plan

Where have we been? Where are we now? Where are we going?

Howd we get here?

Its all about the desktop

Very rich applications Upgrades a pain (new hardware anyone?) Simplied maintenance, low barrier of entry Less functional apps, browser issues

The Web takes center stage

All about trade offs

Sorry, thats not how it works

We conditioned users with thick apps Then we took that all away Convinced our users to accept thin apps The browser pushed us towards plain vanilla Applets, Flash, XUL/XAML/XAMJ Fundamental Issue - Web is based on a synchronous request/response paradigm

What is Ajax?

A cleaner? A Greek hero? A soccer club?

http://www.v-bal.nl/logos/ajax.jpg http://movies.yahoo.com/shop?d=hv&id=1808444810&cf=pg&photoid=521827&intl=us http://www.cleansweepsupply.com/pages/skugroup1068.html

Give me an A

Ajax is a catch-phrase - several technologies Asynchronous, JavaScript, XML, XHTML, CSS, DOM, XMLHttpRequest object More of a technique than a specic thing Communicate with XHR, manipulate the Document Object Model on the browser Dont repaint the entire page! We gain exibility

http://www.adaptivepath.com/publications/essays/archives/000385.php

Whats old is new again

XHR was created by Microsoft in IE5 Of course it only worked in IE Early use of JavaScript resulted in pain Many developers shunned the language XHR was recently adopted by Mozilla 1.0 and Safari 1.2 And a new generation of web apps was born

Google Suggest

Google Maps

XHR Methods
Method
open(method, url [, asynch [, username [, password]]]) send(content)

Description
Sets the stage for the call - note asynch ag. Sends the request to the server.

abort()

Stops the request.

getAllResponseHeaders()

Returns all the response headers for the HTTP request as key/value pairs. Returns the string value of the specied header.

getResponseHeader(header)

setRequestHeader(header, value)

Sets the specied header to the supplied value.

XHR Properties
Property
onreadystatechange

Description
The event handler that res at every state change.

readyState

The state of the request: 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete The response from the server as a string.

responseText

responseXML

The response from the server as XML.

status

The HTTP status code from the server.

statusText

The text version of the HTTP status code.

Typical Interaction
Ajax Enabled Web Application 3 XHR 2 1 Event 6
function callback() { //do something }

Web Container Server Resource

4 Data store

Client

Server

Hows this work?

Start a request in the background Callback invokes a JavaScript function - yes prepare yourself for JavaScript Can return: a) XML - responseXML, b) HTML innerHTML c) JavaScript - eval Typically results in modifying the DOM We are no longer captive to the request/response paradigm! But Ive done this before... IFRAME can accomplish the same concept

Sample Code
Unfortunately - some browser checking
function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } elseif(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function startRequest() { createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", "simpleResponse.xml"); xmlHttp.send(null); } function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { alert("The server replied with: " + xmlHttp.responseText); } } }

Spare me the pain

Yes, JavaScript can hurt Tools are coming, for now check out these JSDoc (http://jsdoc.sourceforge.net/) Greasemonkey (http://greasemonkey.mozdev.org/) Firefox JavaScript Debugger Microsoft Script Debugger Venkman JavaScript Debugger (http://www.mozilla.org/projects/venkman/) Firefox Extensions

Web Developer Extension (http://chrispederick.com/work/webdeveloper/)

HTML Validator

http://users.skynet.be/mgueury/mozilla/
http://users.skynet.be/mgueury/mozilla/screenshot.html

Checky

http://checky.sourceforge.net/extension.html

http://sourceforge.net/project/screenshots.php?group_id=69729

DOM Inspector

http://www.mozilla.org/projects/inspector/

JSLint

http://www.crockford.com/jslint/lint.html

JsUnit

http://www.edwardh.com/jsunit/

What about libraries?

There are dozens Maturing space Most are very new - proceed with caution DWR, Dojo, Rico, Microsofts Atlas, Ruby on Rails, Prototype, etc. Taconite

Whats next?

Better tool support - just a matter of time Suns Creator 2 Library/toolkit space will consolidate User expectation will increase More sites will implement

Now what?

Start small Validation is a good rst step Auto complete More dynamic tool tips Partial page updates Recalculate Its all about the user!

Proceed with caution

Unlinkable pages - Link to this page option Broken back button Code bloat Graceful fallback - older browsers, screen readers Breaking established UI conventions Lack of visual clues - Loading cues

Fade Anything

Asynchronous changes - Fade Anything Technique

Give me more!

www.ajaxian.com www.ajaxpatterns.org www.ajaxmatters.com/r/welcome www.ajaxblog.com/ http://labs.google.com/ www.adaptivepath.com/

To sum up

Ajax changes the request/response paradigm Its not rocket science, its not a cure all Test it with your users Start slow Embrace change!

Questions?!? Thanks!