Ajax Tutorial
-
Upload
sampetruda -
Category
Documents
-
view
1.177 -
download
1
description
Transcript of Ajax Tutorial
![Page 2: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/2.jpg)
Ben GalbraithCo-founder, Ajaxian.comIndependent Consultant
Conservative
Dion AlmaerCo-founder, Ajaxian.com
Google ShillLiberal
Kevin LynchChief Software Architect
Adobe
![Page 3: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/3.jpg)
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.”
![Page 4: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/4.jpg)
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.”
![Page 5: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/5.jpg)
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.”
![Page 6: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/6.jpg)
Ajax: A New Approach to Web Applicationsby Jesse James Garrett February 18, 2005
![Page 7: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/7.jpg)
Demo
![Page 8: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/8.jpg)
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
![Page 9: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/9.jpg)
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)
![Page 10: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/10.jpg)
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
![Page 11: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/11.jpg)
Three Main Ajaxian Architectures
Return Data(JSON / XML)
Return HTML(responseText +
innerHTML)
Return JavaScript(eval)
![Page 12: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/12.jpg)
The Ajax Innovators
![Page 13: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/13.jpg)
The Ajax Innovators
![Page 14: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/14.jpg)
The Ajax Innovators
![Page 15: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/15.jpg)
The Ajax Innovators
![Page 16: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/16.jpg)
Ajax is the victory of the pragmatists over the
purists*
* they want a rematch
![Page 17: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/17.jpg)
Ajax is about more than sending data back
and forth
![Page 18: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/18.jpg)
Ajax has become a catch-all buzzword for
highly interactive websites
(get over it)
![Page 19: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/19.jpg)
And the biggest surprise?
![Page 20: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/20.jpg)
JavaScript doesn’t suck, after all
(but still don’t hire people who call it ‘Java’ on their CV)
![Page 21: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/21.jpg)
What about Flash?Is Flash Ajax?
![Page 22: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/22.jpg)
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
![Page 23: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/23.jpg)
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
![Page 24: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/24.jpg)
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);
![Page 25: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/25.jpg)
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)
![Page 26: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/26.jpg)
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
![Page 27: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/27.jpg)
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
![Page 28: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/28.jpg)
Ajaxian Client-side Frameworks
Prototype Script.aculo.us Dojo
DWR jQuery moo tools
Behaviour
GWT
MochiKit qooxdooRico Yahoo! UI
and a thousand other frameworks...
![Page 29: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/29.jpg)
• 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
![Page 30: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/30.jpg)
• 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
![Page 31: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/31.jpg)
• 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
![Page 32: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/32.jpg)
• 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
![Page 33: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/33.jpg)
• 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
![Page 34: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/34.jpg)
• 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
![Page 35: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/35.jpg)
• 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
![Page 36: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/36.jpg)
• 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
![Page 37: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/37.jpg)
var request = new Ajax.Request(
‘/someUrl’,
{ method: get, onComplete; myCallBack }
);
function myCallBack(xhr) {
$(‘someElementId’).innerHTML = xhr.responseText;
}
Ajax.Request Example
![Page 38: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/38.jpg)
• 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
![Page 39: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/39.jpg)
var request = new Ajax.Updater(
‘someElementId’,
‘/someUrl’,
{ method: ‘get’,
parameters: ‘value=foo’ }
);
Ajax.Updater Example
![Page 40: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/40.jpg)
• 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
![Page 41: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/41.jpg)
• Number.toColorPart() function - converts decimal to hex
• String.stripTags() function - removes any tags from the string
• String.escapeHTML(), String.unescapeHTML()
• Document.getElementsByClassName()
JavaScript Extensions
![Page 42: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/42.jpg)
• 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
![Page 43: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/43.jpg)
• 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
![Page 44: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/44.jpg)
• 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
![Page 45: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/45.jpg)
• Prototype also contains utilities for inserting values into existing HTML content, event handling, JavaScript object definition, HTML element positioning, and more
And Much More...
![Page 46: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/46.jpg)
http://archive.dojotoolkit.org/nightly/core/tests/data/test_ManyStores.html
![Page 47: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/47.jpg)
http://app.lightstreamer.com/DojoDemo/
![Page 48: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/48.jpg)
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
![Page 49: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/49.jpg)
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)
![Page 50: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/50.jpg)
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
![Page 51: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/51.jpg)
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;}
![Page 52: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/52.jpg)
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
![Page 53: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/53.jpg)
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”
![Page 54: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/54.jpg)
TIBCO GI:The I-Can’t-Believe-Its-Free Department
![Page 55: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/55.jpg)
Tools
![Page 56: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/56.jpg)
Off-line Two Years Ago
![Page 57: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/57.jpg)
Off-line One Year Ago
![Page 58: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/58.jpg)
Off-line Today
• Google Gears
• Firefox
• Safari
![Page 59: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/59.jpg)
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
![Page 60: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/60.jpg)
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!
![Page 61: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/61.jpg)
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
![Page 62: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/62.jpg)
What is the philosophy?
![Page 63: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/63.jpg)
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
![Page 64: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/64.jpg)
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
![Page 65: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/65.jpg)
What are the pieces?
![Page 66: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/66.jpg)
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');
![Page 67: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/67.jpg)
Operating System
Event Queue
Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Key Released
“UI Thread”
User Code Painting, etc.
![Page 68: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/68.jpg)
Operating System
Event Queue
Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Key Released
JavaScript Web Browsing
Browser
![Page 69: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/69.jpg)
“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
![Page 70: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/70.jpg)
“UI Thread”
User Interface
1
BackgroundThread
2
![Page 71: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/71.jpg)
User Interface
BackgroundThread
2
X
Browser
1
![Page 72: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/72.jpg)
Firefox 3
• Off-line support consists of:
• Off-line cache
• Off-line events
• DOMStorage
• Driving WHATWG spec.
![Page 73: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/73.jpg)
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
![Page 74: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/74.jpg)
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); } }
![Page 75: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/75.jpg)
Off-line Flash is coming in 3Q ’07
![Page 76: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/76.jpg)
Ajax is slow
![Page 77: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/77.jpg)
![Page 78: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/78.jpg)
Fast Ajax is Coming
Tamarin
![Page 79: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/79.jpg)
Fast Flash is here today
![Page 80: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/80.jpg)
![Page 81: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/81.jpg)
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
![Page 82: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/82.jpg)
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>
![Page 83: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/83.jpg)
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>
![Page 84: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/84.jpg)
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
![Page 85: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/85.jpg)
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>
![Page 86: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/86.jpg)
We used to hate when people asked us about
accessibility...
![Page 87: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/87.jpg)
Enter Unobtrusive JavaScript
Keep the HTML clean
(JS out of it)
Increase Accessibility(Degrade)
Reusable Components
(Tie with CSS)
Goals:
![Page 88: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/88.jpg)
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>
![Page 89: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/89.jpg)
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
![Page 90: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/90.jpg)
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
![Page 91: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/91.jpg)
Step 2: JavaScript Component
var RelatedSearch = Class.create();
RelatedSearch.prototype = { initialize: function(e, id) { },
show: function() { }}
• RelatedSearch encapsulates the popup•Multiple objects == multiple popups
![Page 92: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/92.jpg)
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')
![Page 93: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/93.jpg)
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>
![Page 94: Ajax Tutorial](https://reader038.fdocuments.in/reader038/viewer/2022102922/54771b40b4af9f0a4f8b4670/html5/thumbnails/94.jpg)
The Future?• Apollo as the Web+ Platform?
• Off-line Ajax Abundant
• Abundant custom rendering
• Microformats?
• Fast JavaScript interpreters
• “Wow” versus the Web
• HTML 5