Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;};...

36
Bulletproof Ajax

Transcript of Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;};...

Page 1: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

Bulletproof

Ajax

Page 2: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

progressiveenhancement

Bulletproof

Page 3: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

structurepresentationbehaviour

contentHTML

CSSJavaScript

Page 4: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

<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; }

Page 5: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

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

Page 6: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

link.onclick = function(){ window.open(this.href); return false;};

window.onload = function() {

};

// get links with class help// loop through links

Page 7: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

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

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

beware

Page 8: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

Ajaxcommunicating with the server without refreshing

the whole page.

Page 9: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

framesiframeFlashXMLHttpRequest

communicating with the server without refreshing

the whole page.

Page 10: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

XMLHttpRequest

MicrosoftMozillaSafariOpera

IE5

W3C

Page 11: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

browser serverXHRopensend

statusresponseText

XMLHttpRequest

Page 12: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

speed

Page 13: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

thin client

Page 14: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

browser serverdata

processingdisplaying

thin client

Page 15: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

fat client

Page 16: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

browser serverXHRdata

processingdisplaying

fat client

Page 17: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

dumbwaiter

Page 18: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

XMLHttpRequestusing

progressiveenhancement

Page 19: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

Hijax

progressiveenhancement

Page 20: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

browser serverdata

processingdisplaying

Page 21: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

browser serverXHRdata

processingdisplaying

deceptivelyfat client

Page 22: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links
Page 23: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

navigationsearch

main contentlog on form

shopping cartfooter

{browser server

Page 24: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

XHR

navigationsearch

main contentlog on form

shopping cartfooter

browser

Page 25: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

implement Ajax at the end

plan for Ajax from the start

paradox?

Page 26: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

pattern recognition

log onadd to cart

rate this

add a comment

search results?

MozillaMozillapagination?

Page 27: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

documents

applications

Page 28: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

design challenges

Page 29: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

WTF?what is happening?what just happened?

Page 30: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

beyond the browserthe back buttonbookmarking

Page 31: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

user testing

Page 32: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

AccessibilityJustAin’t

eXciting

Page 33: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

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

Page 34: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

“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 35: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

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

Page 36: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links

k thx baiadactio.com

http://flickr.com/photos/chuckbiscuito/161971512/

http://flickr.com/photos/bizzygirl/291918549/http://flickr.com/photos/benchan/150094224/

http://flickr.com/photos/flydown/42047131/

http://flickr.com/photos/rogerjones/121736518/

http://flickr.com/photos/veeliam/243306535/
http://flickr.com/photos/veeliam/243306535/
http://flickr.com/photos/veeliam/243306535/
http://flickr.com/photos/bizzygirl/291918549/
http://flickr.com/photos/bizzygirl/291918549/
http://flickr.com/photos/bizzygirl/291918549/
http://flickr.com/photos/bizzygirl/291918549/
http://flickr.com/photos/bizzygirl/291918549/
http://flickr.com/photos/bizzygirl/291918549/
http://flickr.com/photos/bizzygirl/291918549/
http://flickr.com/photos/bizzygirl/291918549/
http://flickr.com/photos/bizzygirl/291918549/

OPIATES (Select Slide Show on the PowerPoint toolbar and then select Start Slide Show From the Beginning. Otherwise the links will not function.)

OPIATES (Select Slide Show on the PowerPoint toolbar and then select Start Slide Show From the Beginning. Otherwise the links will not function.)

LINKS Marketing Tactics Simulation - LINKS Simulations

LINKS Marketing Tactics Simulation - LINKS Simulations

Two tools for finding what function links the dependent ...rogers.com/Pubs/ICTCT97TwoTools.pdf · dependent variable to the explanatory variables. ... is linear (additive) in form

Two tools for finding what function links the dependent ...rogers.com/Pubs/ICTCT97TwoTools.pdf · dependent variable to the explanatory variables. ... is linear (additive) in form

Design and Function - VAG Links The self-study programme shows the design and function of new developments. The contents will not be updated. For current testing, adjustment and repair

Design and Function - VAG Links The self-study programme shows the design and function of new developments. The contents will not be updated. For current testing, adjustment and repair

Hair-Bundle Links: Genetics as the Gateway to Functionperspectivesinmedicine.cshlp.org/content/early/2019/01/... · 2019. 1. 7. · Hair-Bundle Links: Genetics as the Gateway to Function

Hair-Bundle Links: Genetics as the Gateway to Functionperspectivesinmedicine.cshlp.org/content/early/2019/01/... · 2019. 1. 7. · Hair-Bundle Links: Genetics as the Gateway to Function

Function-Process Links and Intermediary Metabolism* We start with the big picture.... * or How I Learned to Live with OBO-EDIT2.

Function-Process Links and Intermediary Metabolism* We start with the big picture.... * or How I Learned to Live with OBO-EDIT2.

LINKS Positioning Strategy Simulation - LINKS Simulations

LINKS Positioning Strategy Simulation - LINKS Simulations

University of Wisconsin–Madisonimages.library.wisc.edu/.../NAPC16/reference/econatres.napc16.gfri… · and their pollinators form critical links in the structure and function of

University of Wisconsin–Madisonimages.library.wisc.edu/.../NAPC16/reference/econatres.napc16.gfri… · and their pollinators form critical links in the structure and function of

BARBITURATES (Select Slide Show on the PowerPoint toolbar and then select Start Slide Show From the Beginning. Otherwise the links will not function.)

BARBITURATES (Select Slide Show on the PowerPoint toolbar and then select Start Slide Show From the Beginning. Otherwise the links will not function.)

Apostrophe Quiz Curriculum links Adult Literacy Rs/L1.2 Use punctuation to help their understanding (a) understand the function of the omissive apostrophe.

Apostrophe Quiz Curriculum links Adult Literacy Rs/L1.2 Use punctuation to help their understanding (a) understand the function of the omissive apostrophe.

Links between social protection and forestry policies ... · 4.1 The function of social protection in sustainable forest management 11 4.2 The social protection function of major

Links between social protection and forestry policies ... · 4.1 The function of social protection in sustainable forest management 11 4.2 The social protection function of major

GCSE Physical Education Information/Discussion Practical Application Links Diagram/Table Activity Revision MAIN MENU The Function Of The Muscular System.

GCSE Physical Education Information/Discussion Practical Application Links Diagram/Table Activity Revision MAIN MENU The Function Of The Muscular System.

Lecture6:’ ServoCommands;’ Matlab“ eval”function,’ switch ... · Some’MatLab: Open a serial connection (done only once). s=instrfind; %Find any serial links (we can have

Lecture6:’ ServoCommands;’ Matlab“ eval”function,’ switch ... · Some’MatLab: Open a serial connection (done only once). s=instrfind; %Find any serial links (we can have

CHAPTER 4 LINKS Creating links between pages Linking to other sites Email links.

CHAPTER 4 LINKS Creating links between pages Linking to other sites Email links.

System to Identify and Elide Superfluous JavaScript Code ... … · Promises, attached to the window.onLoad event have fin-ished executing [14]. At window.loadEventEnd, the array

System to Identify and Elide Superfluous JavaScript Code ... … · Promises, attached to the window.onLoad event have fin-ished executing [14]. At window.loadEventEnd, the array

TENTATIVE LINKS & SUB LINKS OF IRRIGATION ... - idup.gov.in

TENTATIVE LINKS & SUB LINKS OF IRRIGATION ... - idup.gov.in

What is Key Links Writing? - Scholastic Australia€¦ · What is Key Links Writing? Key Links Writing •Key Links Writing is designed for beginning ... Key Links Writing Approaches

What is Key Links Writing? - Scholastic Australia€¦ · What is Key Links Writing? Key Links Writing •Key Links Writing is designed for beginning ... Key Links Writing Approaches

Design and Function - - Links to VW & Audi Stuff

Design and Function - - Links to VW & Audi Stuff

LIFT LINKS - Lift Systems | Home · LIFT LINKS For Hydraulic Gantry Systems STANDARD LIFT LINKS ADJUSTABLE LIFT LINKS Adjustable lift links provide site specific flexibility in one

LIFT LINKS - Lift Systems | Home · LIFT LINKS For Hydraulic Gantry Systems STANDARD LIFT LINKS ADJUSTABLE LIFT LINKS Adjustable lift links provide site specific flexibility in one

A Kinase-Independent Function of CDK6 Links the Cell Cycle to Tumor Angiogenesis Karoline Kollmann, Gerwin Heller, Christine Schneckenleithner, Wolfgang.

A Kinase-Independent Function of CDK6 Links the Cell Cycle to Tumor Angiogenesis Karoline Kollmann, Gerwin Heller, Christine Schneckenleithner, Wolfgang.