Download - Ajax tutorial
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