AjaxTutorial

ajaxians@ajaxian.com

Ben and Dion’s

Ben GalbraithCo-founder, Ajaxian.comIndependent Consultant

Conservative

Dion AlmaerCo-founder, Ajaxian.com

Google ShillLiberal

Kevin LynchChief Software Architect

Adobe

Ajax: A New Approach to Web Applicationsby Jesse James Garrett February 18, 2005

“Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.”

Ajax: A New Approach to Web Applicationsby Jesse James Garrett February 18, 2005

“Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.”

Ajax: A New Approach to Web Applicationsby Jesse James Garrett February 18, 2005

“Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.”

Ajax: A New Approach to Web Applicationsby Jesse James Garrett February 18, 2005

Demo

Ajax == DHTML

• Key Ajax ingredient:

• XMLHttpRequest (a.k.a. XMLHTTP)

• Introduced by MS in 1997

• Copied by Mozilla 1.0 in 2002

• innerHTML helps a great deal

• DOM API snobs notwithstanding

XMLHttpRequest

Method Description

open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) Setup the request (note the asyncFlag parameter)

send(content) Send the request; “content” is request body (i.e. POST data)

abort() Stop a request in process

getAllResponseHeaders() Return a hash of header/value pairs

getResponseHeader(”header”) Retrieve a response header value

setRequestHeader(”label”, “value”) Set header (overriding browser headers allowed)

XMLHttpRequest

Property Description

onreadystatechange Reference to callback function

readyState

Current state of XHR; one of:0 = uninitialized

1 = loading2 = loaded

3 = interactive4= complete

responseText Text value of response body

responseXML DOM tree of response body

status Numeric status code (e.g., 200, 404)

statusText Text status message corresponding to status code

Three Main Ajaxian Architectures

Return Data(JSON / XML)

Return HTML(responseText +

innerHTML)

Return JavaScript(eval)

The Ajax Innovators

The Ajax Innovators

The Ajax Innovators

The Ajax Innovators

Ajax is the victory of the pragmatists over the

purists*

* they want a rematch

Ajax is about more than sending data back

and forth

Ajax has become a catch-all buzzword for

highly interactive websites

(get over it)

And the biggest surprise?

JavaScript doesn’t suck, after all

(but still don’t hire people who call it ‘Java’ on their CV)

What about Flash?Is Flash Ajax?

Web / Ajax Myths

• Ajax is hard

• Cross-browser differences are painful

• Rich effects (and widgets) are best left to desktop applications

• Off-line mode isn’t possible

• Client-side validation is a pain

dojo.gfx

• A graphics library built on top of SVG and VML

• Think portable SVG subset for IE

• Like SVG, exposes a DOM for accessing and manipulating paths

dojo.gfxvar node = document.createElement("div");document.body.appendChild(node);var surfaceWidth = 120;var surfaceHeight = 220;var surface = dojo.gfx.createSurface(node,surfaceWidth,

surfaceHeight);var rect = { x: 100, y: 0, width: 100, height: 100 };var circle = { cx: 150, cy: 160, r: 50 };var group = surface.createGroup();var blueRect = group.createRect(rect)

.setFill([0, 0, 255, 0.5]) .applyTransform(dojo.gfx.matrix.identity);

var greenCircle = group.createCircle(circle) .setFill([0, 255, 0, 1.0]) .setStroke({color: "black", width: 4, cap: "butt",

join: 4}) .applyTransform(dojo.gfx.matrix.identity);

Ajax vs. Desktop Apps

Ajax Advantages Desktop Advantages

Ease of development model Much faster than JavaScript

Ease of deployment Advanced graphical capabilities

Mash-ups Tight integration with OS

Separation of concerns Mature UI toolkits

Hackability (e.g., Greasemonkey) Lack of hackability (e.g., security)

Ajaxian Frameworks

XMLHttpRequest IFrame ...

Remoting Toolkits(Prototype, Dojo, Mochikit)

UI Toolkits(Dojo, Script.aculo.us, Moo.fx)

Server-side Web Frameworks(ASP.NET, JSF + ICEfaces, Tapestry, Rails)

RAD High-level Tools(TIBCO, Backbase)

JavaScriptToolsand

Utilities

Client-side Frameworks(Effects + Remoting)

(Dojo, Prototype + Script.aculo.us, jQuery, Moo.fx + other Moo tools)

Ajaxian Frameworks

XMLHttpRequest IFrame ...

Server-side Web Frameworks(ASP.NET, JSF + ICEfaces, Tapestry, Rails)

RAD High-level Tools(TIBCO, Backbase)

JavaScriptToolsand

Utilities

Ajaxian Client-side Frameworks

Prototype Script.aculo.us Dojo

DWR jQuery moo tools

Behaviour

GWT

MochiKit qooxdooRico Yahoo! UI

and a thousand other frameworks...

• Prototype takes the pain out of common Ajax tasks

• Tightly integrated with Ruby-on-Rails

• Can be used with any backend

• Now documented! (by the community)

• Reclusive maintainer

Prototype

• Prototype provides three levels of functionality:

• Utility functions (globally scoped)

• Custom objects

• Extended properties on JavaScript native and hosted objects

• Some folks consider this a no-no

Prototype Contents

• Prototype contains a number of tools that take the pain out of DOM manipulation:

• $() function - shortcut for Document.getElementById

• Can take multiple arguments and will return all matching elements

• $F() function - returns the value of any form control

• Pass it either the element id or the element object

• $$() function - select elements based on CSS selectors

• Pass it a CSS selector expression

Basic Utilities

• Try.these() function - takes functions as arguments and returns the return value of the first function that doesn’t throw an exception.

var returnValue;

for (var i = 0; i < arguments.length; i++) { var lambda = arguments[i]; try { returnValue = lambda(); break; } catch (e) {} }

return returnValue;

More Basic Utilities

• The Ajax object provides a number of helpful Ajax-related functionality

• At its simplest, can be used to obtain XHR in a cross-browser way:

var xhr = Ajax.getTransport()

Ajax Helpers

• Implementation of Ajax.getTransport():var Ajax = { getTransport: function() { return Try.these( function() {return new XMLHttpRequest()}, function() {return new ActiveXObject('Msxml2.XMLHTTP')}, function() {return new ActiveXObject('Microsoft.XMLHTTP')} ) || false; }}

Ajax Helpers

• Provides higher-level functionality for performing Ajax operations:

• Ajax.Request() object - takes a url and an “options” object as arguments

• Performs an XHR request

• Options argument specifies XHR configuration parameters and one or more callbacks

Ajax Helpers

• Options object:

• Created using anonymous object creation syntax:{ method: ‘get’, onComplete: callBackRef }

• Supported properties:

• method, asynchronous (true/false), parameters, postBody, requestHeaders (hash), onLoading, onLoaded, onInteractive, onComplete

Ajax Helpers

var request = new Ajax.Request(

‘/someUrl’,

{ method: get, onComplete; myCallBack }

);

function myCallBack(xhr) {

$(‘someElementId’).innerHTML = xhr.responseText;

}

Ajax.Request Example

• Ajax.Updater() object - takes an element id, a url and an “options” object as arguments

• Executes XHR and displays response as contents (innerHTML) of specified element

• First argument can be an anonymous object with a success property and a failure property set to the ids of elements

• Executes JavaScripts contained in response HTML

Ajax Helpers

var request = new Ajax.Updater(

‘someElementId’,

‘/someUrl’,

{ method: ‘get’,

parameters: ‘value=foo’ }

);

Ajax.Updater Example

• Ajax.PeriodicalUpdater() object - takes an element id, a url and an “options” object as arguments

• Same behavior as Ajax.Updater() but continuously performs request every 2 seconds

• frequency property on options object controls the update frequency in seconds

• stop() function halts the updating; start() function can restart it

Ajax Helpers

• Number.toColorPart() function - converts decimal to hex

• String.stripTags() function - removes any tags from the string

• String.escapeHTML(), String.unescapeHTML()

• Document.getElementsByClassName()

JavaScript Extensions

• Element object makes manipulating elements much easier:

• Element.show(), Element.hide(), Element.toggle() - take an unlimited number of element id or references

• Show/hide based on CSS display attribute

• Element.remove() - nukes element by id or reference from the DOM

Custom Objects

• Element.addClassName(), Element.hasClassName(), Element.removeClassName() - take two arguments: element id (or reference) and the class name

• Field.clear() - takes an unlimited number of form element ids or references and clears their values

• Field.present() - takes form elements ids or references; returns true if all are non-blank

• Field.focus(), Field.select(), Field.activate() - takes an element id/ref, and focuses, selects, or focuses/selects

Custom Objects

• Form.serialize() - takes form element id/ref; returns the HTTP query string

• Form.getElements() - takes form element id/ref; returns array with all form elements

• Form.disable(), Form.enable(), Form.focusFirstElement(), Form.reset() - take form element id/ref

Custom Objects

• Prototype also contains utilities for inserting values into existing HTML content, event handling, JavaScript object definition, HTML element positioning, and more

And Much More...

http://archive.dojotoolkit.org/nightly/core/tests/data/test_ManyStores.html

http://app.lightstreamer.com/DojoDemo/

Comet

• Server-push for the Web

• Not really, but a close approximation: a persistent XHR connection

• Overkill for most “push” applications (i.e., just do polling)

• Dojo’s Comet implementation is cometd

• Jetty supports cometd

DWR

• DWR (Direct Web Remoting) provides tight integration with Java

• DWR provides two major functions:

• A dynamic Java→JavaScript proxy generation library (engine.js)

• Utility library of miscellaneous JavaScript functionality (util.js)

Using DWR

• Step 1: Add the DWR servlet to your project

• Step 2: Create a DWR configuration file

• Step 3: Add DWR JavaScript to your HTML

JavaScript Example

<script type="text/javascript" src="/dwr/engine.js"></script><script type="text/javascript" src="/dwr/Validator.js"></script>

<script type=”text/javascript”> Validator.echoMethod(‘Hello, world!’, callback);

function callback(data) { alert(data); }</script>

public String echoMethod(String arg) { return arg;}

Additional Features

• Worried about latency? DWR allows you to batch opereations:

• DWREngine.beginBatch()

• DWREngine.endBatch()

• Race conditions caused by asynchronicity got you down?

• DWREngine.setOrdered(true) forces serial FIFO execution of DWR requests

WebContext wctx = WebContextFactory.get();String chatPage = wctx.getCurrentPage();

// Find all the browser on window open on the chat page:Collection sessions = wctx.getScriptSessionsByPage(chatPage);

// Use the Javascript Proxy API to empty the chatlog// <ul> element and re-fill it with new messagesUtil utilAll = new Util(sessions);utilAll.removeAllOptions("chatlog");utilAll.addOptions("chatlog", messages, "text");

DWR “Reverse Ajax”

TIBCO GI:The I-Can’t-Believe-Its-Free Department

Tools

Off-line Two Years Ago

Off-line One Year Ago

Off-line Today

• Google Gears

• Firefox

• Safari

Offline Web via Open Web

• Why just solve this problem for Google?• Why not solve it for others?

• Solution: Make it open source with a liberal license• New BSD

Why?“How often are you on a plane?”

• Reliability• 1% of downtime can hurt at the wrong time

• Performance• Local acceleration

• Convenience• Not having to find a connection

• You are offline more than you think!

What is the philosophy?

• One application, one URL• Seamless transitions between online and offline• Ability to use local data, even when online• Available to all users on all platforms• ... and a pony

What is the philosophy?

What is the philosophy?Do for offline what XMLHttpRequest did for web apps

Open Web

XMLHttpRequest

Ajax LibrariesDojo, jQuery, Prototype, GWT

Open Web

Gears

Gears LibrariesDojo Offline, GWT

Gears Architecture

• Read and write using local store• Changes are queued for later synchronization• Server communication is completely decoupled from UI actions, happens

periodically whenever there is a connection

What are the pieces?

DatabaseEmbedded using SQLite

Contributed Full Text Search

var db = google.gears.factory.create('beta.database', '1.0');db.open('database-demo');db.execute('create table if not exists Demo (Phrase varchar(255), Timestamp int)');db.execute('insert into Demo values (?, ?)', [phrase, currTime]);var rs = db.execute('select * from Demo order by Timestamp desc');

Operating System

Event Queue

Mouse Moved

Mouse Pressed

Mouse Released

Key Pressed

Key Released

“UI Thread”

User Code Painting, etc.

Operating System

Event Queue

Mouse Moved

Mouse Pressed

Mouse Released

Key Pressed

Key Released

JavaScript Web Browsing

Browser

“The basic advice regarding response times has been about the same for thirty years:

“0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.

“1.0 second is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data.”

Jakob NielsenNoted Usability ExpertProlific Author

“UI Thread”

User Interface

1

BackgroundThread

2

User Interface

BackgroundThread

2

X

Browser

1

Firefox 3

• Off-line support consists of:

• Off-line cache

• Off-line events

• DOMStorage

• Driving WHATWG spec.

Firefox Off-line Details

• <link rel="offline-resource"> to put resources into the browser's off-line cache

• Entire applications can live in a JAR bundle, which can then be cached off-line

• Off-line mode driven by browser-generated off-line / online events

  function loaded() {      updateOnlineStatus("load", false);       document.body.addEventListener ("offline", function () { updateOnlineStatus("offline", true) }, false);

      document.body.addEventListener("online", function () { updateOnlineStatus("online", true) }, false);

      if (typeof globalStorage != "undefined") {        var storage = globalStorage[storageDomain];        if (storage && storage.taskStorage) {          taskStorage = storage.taskStorage ;        }      }

      fetchList();  }

  function fetchList() {      if (navigator.onLine ) {        httpRequest("GET", null, loadList);      } else {        loadList(4, 200, taskStorage);       }  }

Off-line Flash is coming in 3Q ’07

Ajax is slow

Fast Ajax is Coming

Tamarin

Fast Flash is here today

Fancy-pants browser graphics are here today

• SVG was widely anticipated but hasn’t made an impact

• Canvas has started to appear

• Google’s ExplorerCanvas project brings it to IE

Sound!http://ajaxian.com/downloads/sound/

<script type="text/javascript" src="soundmanager2.js"></script><script type="text/javascript">

soundManager.onload = function() { soundManager.createSound('circle', 'circleoflife.mp3');}

function play() { soundManager.play('circle');}

function pause() { soundManager.pause('circle');}

function stop() { soundManager.stop('circle');}

</script>

Sound!http://ajaxian.com/downloads/sound/

<script type="text/javascript" src="soundmanager2.js"></script><script type="text/javascript">

soundManager.onload = function() { soundManager.createSound('circle', 'circleoflife.mp3');}

function play() { soundManager.play('circle');}

function pause() { soundManager.pause('circle');}

function stop() { soundManager.stop('circle');}

</script>

The Server-less Ajax Application

• Amazon S3 provides storage

• Amazon EC2 provides hosting

• Local persistent storage is here

• And more options around the corner...

• Growing popularity of web services

Imagine the Power of Client-side SQL!

<script language="javascript"> // First we precompile the query language object with the schema... var queryLang = TrimPath.makeQueryLang(columnDefs);

// Next, we do a SELECT statement. var statement = queryLang.parseSQL( "SELECT Customer.id, Customer.acctBalance, Invoice.total " + "FROM Customer, Invoice " + "WHERE Customer.id = Invoice.custId " + "ORDER BY Customer.id ASC");

// Here we run the query... var results = statement.filter(tableData);

// Tada! That's it -- the results now holds the joined, // filtered, and sorted output of our first query.

// Also, we can convert the statement back to a SQL string... statement.toString() == "SELECT Customer.id, Customer.acctBalance, Invoice.total " + "FROM Customer, Invoice " + "WHERE Customer.id = Invoice.custId " + "ORDER BY Customer.id ASC"</script>

We used to hate when people asked us about

accessibility...

Enter Unobtrusive JavaScript

Keep the HTML clean

(JS out of it)

Increase Accessibility(Degrade)

Reusable Components

(Tie with CSS)

Goals:

Unobtrusive Examples

<abbr class="searchterm using:news" title="ajax">Ajax</abbr>

<ul class="feedbillboard access:randomly"> <li><a href="http://code.google.com/">Google Code</a> (<a href="http://code.google.com/feeds/updates.xml">RSS</a>)</li> <li><a href="http://ajaxian.com/">Ajaxian</a> (<a href="http://ajaxian.com/feed">RSS</a>)</li> <li><a href="http://almaer.com/blog">techno.blog(Dion)</a> (<a href="http://almaer.com/blog/index.xml">RSS</a>)</li> </ul>

Creating an Unobtrusive Component

<abbr class="searchterm using:news" title="ajax">Ajax</abbr>

Steps for creating nice unobtrusive code:

1) What would look good in HTML (create the microformat)2) Create a JavaScript component that can create what you need3) Have a builder that bridges the HTML and the Components

Step 1: Microformat<abbr class="searchterm using:blog withstyle:expanded orderby:relevance" title="search for ajax">Ajax</abbr>

• abbr plays nice in browsers• although a better title. You do the work in the JS• options to tweak the component directly from HTML

Step 2: JavaScript Component

var RelatedSearch = Class.create();

RelatedSearch.prototype = { initialize: function(e, id) { },

show: function() { }}

• RelatedSearch encapsulates the popup•Multiple objects == multiple popups

Step 3: Bridge Buildervar RelatedSearchFinder = { find: function() { var count = 0; $$('.searchterm').each(function(node) { new RelatedSearch(node, ++count); }); }};

Event.observe(window, 'load', RelatedSearchFinder.find, false);

• Selectors are the future (Dom.minimize!)•Also add functionality via: $('comments').addClassName('active')

Accessibility• W3C Accessible Rich Internet Applications (WAI-ARIA)

• IBM is leading the charge• A lot of their work is donated to the Dojo Toolkit• We overload HTML elements with meaning that

readers and other devices don’t understand

• WAI-ARIA defines Roles• A role helps define WHAT something is• <div role="wairole:slider">• progressbar, slider, button, tree, textfield, checkbox,

alert, and dialog

• WAI-ARIA defines Stats• A state helps add meaning• <input type="text" name="email" aaa:required="true" />• <div role="wairole:button" aaa:controls="price">• <h2 id="price" aaa:sort="descending">price</h2>

The Future?• Apollo as the Web+ Platform?

• Off-line Ajax Abundant

• Abundant custom rendering

• Microformats?

• Fast JavaScript interpreters

• “Wow” versus the Web

• HTML 5