Bulletproof
Ajax

Bulletproof
progressive
enhancement

behaviour JavaScript
presentation CSS
structureHTML
content

<p>
This is the introduction
</p>
<p style=\"font-weight:bold\">
This is the introduction
</p>
<p class=\"intro\">
This is the introduction
</p>
.intro { font-weight:bold; }

<a href=\"help.html\">
Need help?
</a>
<a href=\"help.html\"
onclick=\"window.open
(this.href); return false;\">
Need help?
</a>
<a href=\"help.html\"
class=\"help\">
Need help?
</a>

window.onload = function() {
// get links with class help
// loop through links
link.onclick = function(){
window.open(this.href);
return false;
};
};

beware
<a href=\"javascript:...\">
<a href=\"#\" onclick= \"...\">

communicating with the
server without refreshing
the whole page.
Ajax

communicating with the
server without refreshing
frames the whole page.
iframe
Flash
XMLHttpRequest

Microsoft IE5
Mozilla Safari Opera
W3C
XMLHttpRequest

send responseText
open status
browser XHR server
XMLHttpRequest

speed

thin client

thin client
browser server
displaying data
processing

fat client

fat client
browser XHR server
displaying data
processing

dumb
waiter

progressive
enhancement
using
XMLHttpRequest

progressive
enhancement
Hijax

browser server
displaying data
processing

deceptively
fat client
browser XHR server
displaying data
processing

{
navigation
search
main content
browser server on form
log
shopping cart
footer

navigation
search
main content
browser XHR log on form
shopping cart
footer

paradox?
plan for Ajax from the start
implement Ajax at the end

pattern recognition
add a comment
log on
add to cart
rate this
search results?
pagination?

documents
applications

design challenges

WTF?
what is happening?
what just happened?

beyond the browser
the back button
bookmarking

user testing

Accessibility
Just
Ain’t
eXciting

“Unless a way can
be found to notify
screen readers of
updated content,
Ajax techniques
cannot be
considered
accessible.”

“This Ajax
application is
usable by screen-
reader users some
of the time. They
aren’t totally shut
out, but it isn’t
totally easy for
them, either.”

“The power of the
Web is in its
universality.
Access by
everyone
regardless of
disability is an
essential aspect.”

k thx bai
adactio.com
http://flickr.com/photos/flydown/42047131/
http://flickr.com/photos/bizzygirl/291918549/
http://flickr.com/photos/benchan/150094224/
http://flickr.com/photos/rogerjones/121736518/
http://flickr.com/photos/chuckbiscuito/161971512/