Ajax tutorial

ion ’s
n an d D Ajax
Be
Tutorial
ajaxians@ajaxian.com

Ben Galbraith Kevin Lynch
Chief Software Architect Dion Almaer
Co-founder, Ajaxian.com Adobe Co-founder, Ajaxian.com
Independent Consultant Google Shill
Conservative Liberal

Ajax: A New Approach to Web Applications
by 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 Applications
by Jesse James Garrett February 18, 2005

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

Current state of XHR; one of:
0 = uninitialized
1 = loading
readyState
2 = loaded
3 = interactive
4= 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 HTML
Return Data Return JavaScript
(responseText +
(JSON / XML) (eval)
innerHTML)

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)

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.gfx
var 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
RAD High-level Tools
(TIBCO, Backbase)

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

UI Toolkits JavaScript
(Dojo, Script.aculo.us, Moo.fx)
Tools
and
Remoting Toolkits Utilities
(Prototype, Dojo, Mochikit)

XMLHttpRequest IFrame ...

Ajaxian Frameworks
RAD High-level Tools
(TIBCO, Backbase)

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

JavaScript
Client-side Frameworks Tools
(Effects + Remoting) and
(Dojo, Prototype + Script.aculo.us, jQuery, Moo.fx + other Moo tools)
Utilities

XMLHttpRequest IFrame ...

Ajaxian Client-side
Frameworks
Prototype Script.aculo.us Dojo

DWR GWT jQuery moo tools

Behaviour MochiKit Rico qooxdoo Yahoo! UI

and a thousand other frameworks...

Prototype
• 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 Contents
• 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

Basic Utilities
• 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

More Basic Utilities
• Try.these() function - takes functions as
arguments and returns the return value of the
ﬁrst 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;

Ajax Helpers

• 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 speciﬁes XHR
conﬁguration 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.Request Example
var request = new Ajax.Request(
‘/someUrl’,
{ method: get, onComplete; myCallBack }
);

function myCallBack(xhr) {
$(‘someElementId’).innerHTML = xhr.responseText;
}

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

• Executes XHR and displays response as
contents (innerHTML) of speciﬁed 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.Updater Example

var request = new Ajax.Updater(
‘someElementId’,
‘/someUrl’,
{ method: ‘get’,
parameters: ‘value=foo’ }
);

Ajax Helpers
• 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

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

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

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

Custom Objects
• 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

And Much More...

• Prototype also contains utilities for
inserting values into existing HTML
content, event handling, JavaScript object
deﬁnition, HTML element positioning, and
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 conﬁguration ﬁle
• 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

DWR “Reverse Ajax”

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 messages
Util utilAll = new Util(sessions);
utilAll.removeAllOptions("chatlog");
utilAll.addOptions("chatlog", messages, "text");

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

Off-line Today

• Google Gears
• Firefox
• Safari

Ofﬂine 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 ﬁnd a connection
• You are ofﬂine more than you think!

What is the philosophy?

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

What is the philosophy?
Do for ofﬂine what XMLHttpRequest did for web apps

Ajax Libraries Gears Libraries
Dojo, jQuery, Prototype, GWT Dojo Ofﬂine, GWT

XMLHttpRequest Gears

Open Web Open Web

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

Database
Embedded 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');

Mouse Moved

Mouse Pressed

Mouse Released

Key Pressed
Operating System Key Released

Event Queue

User Code Painting, etc.

“UI Thread”

Mouse Moved

Mouse Pressed

Mouse Released

Key Pressed
Operating System Key Released

Event Queue

Web
JavaScript
Browsing

Browser

Jakob Nielsen
Noted Usability Expert
Proliﬁc Author

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

1

“UI Thread”

User Interface

2

Background
Thread

1

Browser

User Interface

X
2

Background
Thread

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

Off-line Flash is coming
in 3Q ’07

Fast Ajax is Coming
T amarin

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>

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

Goals:
Keep the HTML Increase Reusable
clean Accessibility Components
(JS out of it) (Degrade) (Tie with CSS)

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 need
3) 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 Builder
var RelatedSearchFinder = {
ﬁnd: function() {
var count = 0;
$$('.searchterm').each(function(node) {
new RelatedSearch(node, ++count);
});
}
};

Event.observe(window, 'load',
RelatedSearchFinder.ﬁnd, 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

Ajax tutorial

Recommended

More Related Content

What's hot (18)

Viewers also liked (12)

Similar to Ajax tutorial (20)

Recently uploaded (20)

Ajax tutorial