Year round learning for product, design and engineering professionals

Jeremy Keith – Exploring AJAX

“what is Ajax? That is what I’m going to try and answer today”

  • Introduces AJAX and the birth of the term.
  • Maybe it is just a buzzword; maybe that’s not a bad thing
  • X in AJAX adds “the X factor” – if anyone’s looking to coin the next buzzword, stick with X. Clearly we need more X words – XHTML, XSL, XML…

Two kinds of buzzword – ones where everyone knows what you’re talking about. The second type is the bad buzzword – buzzword 2.0 – ones that mean ten different things to ten different people. The second type causes backlashes; risking throwing the baby out with the bathwater. Crappy buzzwords considered harmful.

  • “AJAX is not an acronym” as an acronym, AJAX is a misleading term and could do more harm than good.
  • XML is not required, HTML and JSON are also popular
  • AJAX as a term is starting to consume JavaScript – “Nice bit of AJAX you’ve got there”. That we don’t need –DHTML, DOM Scripting etc. Already too many terms for JavaScript.
  • AJAX gives the illusion of speed. Whilst the HTTP is no quicker, loading page fragments helps give that illusion. Improved usability as a result.
  • “If the traditional web was letter writing, AJAX is instant messaging”

Jeremy says “AJAX is a way to communicate with the server without refreshing the whole page” certainly not a sexy definition, but it is accurate. Flash, frames and iframes are AJAX by Jeremy’s definition; though XMLHttpRequest is the vehicle most associate with AJAX.

Microsoft invented XMLHttpRequest in IE5 for use in webmail client. XMLHttpRequest was so useful all major browsers adopted it. This is one of the few cases of a proprietry feature being adopted and formalized by W3C.

“Am I AJAX or not?” asks room to yell out answer
– google maps: yes
– bunny hunt (game by Cameron Adams): no. Jeremy shows flickr shot of a topless Cameron Adams. Room erupts in laughter. Cameron threatens to kill Jeremy
– flickr: yes
– lightbox: yes and no – changes src attribute of img element to load new image
– amazon (rating system): yes
– meebo : yes

Suitable uses for AJAX

User account applications, especially systems where the new users first choice is rarely available. ‘Add to cart’ – let them keep shopping. ‘Rate this’, ‘add a comment’. Search results? Perhaps not.

design challenges

  • Loss of information to user; eg “loading in progress”. Commonly use animated gif to indicate loading, although indeterminate progress bars are not ideal. ‘Yellow fade’ as used by 37signals apps to indicate small changes.
  • Real danger in adopting interactions from other areas – drag and drop implemented in a half-ass manor on the web is confusing.
  • Make solutions as simple as possible, but no simpler.

beyond the browser

  • The back button – AJAX has no history stack. Lots of clever people working on this problem; Jeremy recommends avoiding the problem altogether as you may be using AJAX in the wrong way in the first place. Back button is not Undo, it is navigation.
  • AJAX must be accessible. Too many people use AJAX UI’s as an excuse to throw the accessibility rulebook out the window. James Edwards doing extensive research into notifying assistive devices of AJAX changes
  • Joe Clarke investigated 37signals apps for accessibility – “usable by screen reader users some of the time”

delivering year round learning for front end and full stack professionals

Learn more about us

Web Directions South is the must-attend event of the year for anyone serious about web development

Phil Whitehouse General Manager, DT Sydney