ajax · asynchronous javascript + xml” asynchronous javascript and xml html json. asynchronous...

55
Ajax clear :left Jeremy Keith

Upload: others

Post on 31-Jul-2020

45 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

Ajaxclear:left

Jeremy Keith

Page 2: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

wordbuzz

Αἴας

Page 3: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

wordbuzz 2 . 0

APIs

RSS

folksonomyopen data

participationlong tail

mashupsAjax

Page 4: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

Sapir–Whorf hypothesis

word

Page 5: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

“It’s really several technologies, each flourishing in its own right, coming together in powerful new ways.”

Page 6: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

technology trigger

peak of inflated expectations

trough of disillusionment

slope of enlightenment

plateau of productivity

Page 7: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

“The name is shorthand for Asynchronous JavaScript + XML”

Page 8: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

AsynchronousJavaScriptAndXML HTML

JSON

Page 9: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

AsynchronousJavaScriptAndXML DHTML

DOM Scripting

Page 10: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

Asynchronous

“Not at the same time”JavaScriptAndXML

Page 11: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

Asynchronous

Page 12: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

Asynchronous

Page 13: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

speed

Page 14: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

“If the traditional web was letter writing, Ajax is instant messaging.”

Page 15: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

“Ajax is like roller skates for the Web.”

Page 16: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

“Ajax is a way of communicating with the server without refreshing the whole page.”

Page 17: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

framesiframeFlashXMLHttpRequest

Page 18: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

XMLHttpRequest

MicrosoftMozillaSafariOpera

IE5

W3C

Page 19: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

Ajaxin action

Page 20: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript
Page 21: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript
Page 22: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript
Page 23: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript
Page 24: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript
Page 25: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

documents

applications

Page 26: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

browser serverdata

processing

thin client

displaying

Page 27: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

browser serverXHRdata

processing

fat client

displaying

Page 28: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript
Page 29: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript
Page 30: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

dumbwaiter

Page 31: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

Hijax

progressiveenhancement

Page 32: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

XMLHttpRequestusing

progressiveenhancement

Page 33: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

structurepresentationbehaviour

contentHTML

CSSJavaScript

Page 34: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

browser serverdata

processingdisplaying

Page 35: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

browser serverXHRdata

processing

deceptivelyfat client

displaying

Page 37: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript
Page 38: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

navigationsearch

main contentlog on form

shopping cartfooter

{browser server

Page 39: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

XHR

navigationsearch

main contentlog on form

shopping cartfooter

browser

Page 40: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

implement Ajax at the end

plan for Ajax from the start

paradox?

Page 41: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

pattern recognition

log onadd to cart

rate this

add a comment

search results?

MozillaMozillapagination?

Page 42: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

<a href="javascript:...">

<a href="#" onclick= "...">

beware

Page 43: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

design challenges

Page 44: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

“Don’t be too proud of this technological terror you have created.”

Page 45: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

what’s happening?

Page 46: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

what just happened?

Page 47: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

beyond the browserthe back buttonbookmarking

Page 48: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

user testing

Page 49: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

AccessibilityJustAin’t

eXciting

Page 50: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

“It must still be accessible. It must be usable. If not, it is a cool useless piece of rubbish for some or many people.”

Page 51: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript
Page 52: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

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

Page 53: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

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

Page 54: Ajax · Asynchronous JavaScript + XML” Asynchronous JavaScript And XML HTML JSON. Asynchronous JavaScript And XML DHTML DOM Scripting. Asynchronous “Not at the same time” JavaScript

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