Ajax

Tim Topper

Yukon College

Not the cleanser...

Not the legendary warrior...

• Hero of the Trojan War, son of Telamon... In the Iliad he is represented as a gigantic man, slow of thought and speech, but quick in battle and always showing courage. He led the troops of Salamis against Troy and was one of the foremost Greek warriors, fighting both Hector and Odysseus to draws. He and Odysseus rescued the corpse of Achilles from the Trojans, but when the armor of Achilles was awarded to Odysseus, the disappointment of Ajax was so great that he went mad and committed suicide.

The abbreviation

Which stands for

• Asynchronous Javascript and XML
• which is itself short for...
• Asynchronous Javascript
• + XHTML
• + DOM
• + CSS
• + XMLHTTPRequest

Does Ajax have anything to do with usability?

• 2004: Sporadic sightings of responsive web apps
• It replaces page refresh with page update.

Pre-Ajax: Sun ONE Calendar

Post-Ajax: Flickr

Development life

2004: XMLHTTPRequest

try {
 var xhr = new XMLHttpRequest();
}
catch (error) {
 try {
   var xhr = new ActiveXObject("Microsoft.XMLHTTP");
 }
 catch (error) {
   return false;
 }
}

xhr.open("GET", "/feed.xml", true);
xhr.send(null);

function stateHandler() {
 if (xhr.readyState == 4) {
  if (xhr.status == 200) {
   success();
  }
  else {
   failure();
  }
 }
 return true;
}

2005: Hype?

2005: Loads of applications

• Gmail
• Google maps
• Flickr
• CalendarHub
• Zimbra
• Ta-Da Lists
• Basecamp
• Meebo
• Tudu
• NetVibes
• Writely
• Numsum
• TimeTracker

2005: Libraries

• Dojo
• DWR
• JSON-RPC-JAVA
• MochiKit
• Prototype
• Rico
• SAJAX
• Scriptaculous
• Xajax
• Sack

2005: Books

What is Ajax?

• A set of technologies being used together in a particular way.
• Not hypertext, i.e. static web pages.
• Not form-based applications.
• It's responsive applications that happen to run in your browser.

Why web-based applications?

• Platform independence
• Zero installation/Zero-footprint deployment
• Seamless incremental upgrades
• Automated backup of data

Other Web-app/Rich-client technologies

• Java Applets
• Flash
• XUL
• SVG
• XAML
• 

So before ...

• You needed the right browser
• on the right O/S
• with a fast enough connection
• and the right plug-in or runtime.
• But now you just open your browser.

Remind me again: What exactly is Ajax?

• Asynchronous JavaScript
• + CSS
• + XHTML
• + DOM
• + XMLHttpRequest

XHTML

• Then,

  <TD width=100 align="right">
   <P><font face="Arial" size=2 color="#800000">Due date:</font> Nov 1
   <BR>
   <P>This assignment...
  

• Now,

  <td class="logistics">
   <p><span class="label">Due date:</span> Nov 1</p>
   <p>This assignment...</p>
  

• Good for future-proofing, non-human users e.g. search engines, programmatic use of web pages, e.g. now for greasemonkey.

XHTML Summary

• The real point?
• Adding the X into XHTML provided a rigorous representation of the document via the DOM (Document Object Model).

CSS

• Zen Garden
• Let's look at a few examples...
  • http://www.csszengarden.com/
  • http://www.csszengarden.com/026
  • http://www.csszengarden.com/022
  • http://www.csszengarden.com/068
  • http://www.csszengarden.com/030
  • http://www.csszengarden.com/036
  • http://www.csszengarden.com/035
  • http://www.csszengarden.com/005
  • http://www.csszengarden.com/037
  • http://www.csszengarden.com/097
  • http://www.csszengarden.com/019

CSS: Summmary

• The point?
• CSS provides a presentation mechanism that is independent of the XHTML representation.

Javascript

• 
• Javascript didn't know it, but it was waiting for the DOM.

Javascript example: show-hide tricks

Javascript example: script.aculo.us

Javascript example: S5

• This slideshow

Javascript example: GAP

Javascript example: Tiddlywiki

Javascript: Summary

• The point?
• Javascript allows us to specify the behaviour of our DOM and to do so independently of the CSS presentation.

XMLHTTPRequest

• XHTML/DOM, CSS, Javascript. What's missing?
• Persistence.
• (Despite the XML in the name, it doesn't have to be XML. See e.g. JSON: Javascript Object Notation.)

• try {
   var xhr = new XMLHttpRequest();
  }
  catch (error) {
   try {
     var xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }
   catch (error) {
     return false;
   }
  }
  
  xhr.open("GET", "/feed.xml", true);
  xhr.send(null);
  
  function stateHandler() {
   if (xhr.readyState == 4) {
    if (xhr.status == 200) {
     success();
    }
    else {
     failure();
    }
   }
   return true;
  }
  

AJAX: The whole picture

Classic request-response cycle

Ajax request-response cycle

• 
• Update don't refresh, and do it asynchronously.

Ajax Example: Apple Store

Ajax Example: Google suggest

Ajax Example: Ta-da lists

Ajax Example: Monket Calendar

Ajax Example: Num sum spreadsheet

Ajax Example: Writely

Paul Kedrosky wants more

• What I really want from Ajax apps is for them to do stuff that it’s too hard to do with binary apps. I want them to be sensibly integrated with online resources; I want them to support realtime collaboration. I want them to do different stuff from Word/Excel/Powerpoint, not just do the same thing with a different engine under the hood.

Ajax Example: Netvibes

Ajax Example: Google maps

• 
• N.B. linking

Ajax Example: Webnote

Gotchas

• On IE Ajax requires an ActiveXControl, but IE 7 will have native XHR support.
• Remember to keep back, stop and refresh buttons working.
• Make significant views bookmarkable.
• Ajax can change the profile of traffic on server.
• Network latency
• Search engine indexing
• Accessibility: Most rely on visual cue that something on the page has changed. It's not a linear text anymore...

Ajaxian design

• Application logic instead of Document logic
• Interaction design instead of Page design
• 

• Jeff Veen has a brief piece on the difference at http://www.veen.com/jeff/archives/000739.html

Ajaxian design

• Classic interface design principles:
• Reversibility: Undo, track state.
• Predictability: consistency (Objects that act different should look different).
• Feedback: Status.
• Anticipation: Defaults.
• Efficiency.
• Learnability.

Future Ajax

• New tools will make it (even) easier for enterprise software developers to use, e.g. Morfik compiles high-level languages to Ajax engine.
• More interest from BigCos, e.g. Open Rico developers include Sabre Airline Solutions.
• More innovative software from small companies.

Resources list

• Ajaxian blog.
• Wikipedia page (obviously) Includes a good list of libraries.
• Book (online now, dead-tree later): Pragmatic Ajax .
• Book: Foundations of Ajax by Ryan Asleson and Nathaniel T. Schutta from APress.