Transcript AJAX - DOC SERVE

AJAX
Yulin Zhao, Farah Charania
April 12, 2006
Copyright © 2006 Accenture. All rights reserved.
Accenture, its logo, and Accenture High Performance Delivered are trademarks of Accenture.
AGENDA
– Introduction and background
– AJAX deep dive
– AJAX patterns
– AJAX frameworks & tools
– Summary
– Q&A
© 2006 Accenture. All rights reserved.
1
INTRODUCTION AND BACKGROUND
• The Classic Web Application:
• A call and response interaction model of the Web
• User clicks  browser waits for a response from the server 
browser receives the response and displays the response  User can
view the information. And so on and so forth.
Meanwhile…
• The Classic Web application’s light weighted and simple solution,
makes to create a GAP between experiences the web can provide vs.
a more rich desktop application.
• This gives rise to technologies such as AJAX where the USER
EXPERIENCE drives the functionality.
© 2006 Accenture. All rights reserved.
2
INTRODUCTION AND BACKGROUND
• AJAX – Asynchronous JavaScript + XML
• Concept of a rich client – better user experience
• i.e. the flexibility of the web and the richness of a desktop
application.
• Principles of AJAX
• The browser hosts an application, not content
• The server delivers data, not content
• User interaction with the application can be fluid and continuous
• AJAX essentially leads us to look at web pages and applications in a
whole new way.
© 2006 Accenture. All rights reserved.
3
INTRODUCTION AND BACKGROUND
• Let’s compare:
© 2006 Accenture. All rights reserved.
4
INTRODUCTION AND BACKGROUND
• Other Alternatives to AJAX
• Macromedia Flash-based solutions:
• Grounded in playing interactive movies
• Flash movies are streamed and played while downloading
• Programmed via ActionScript
• Though generally used for interactive games, Flash applications
can also be used for business purposes with some support for
input form widgets.
• The Flash web browser plug-in must be installed for its
applications to work.
© 2006 Accenture. All rights reserved.
5
INTRODUCTION AND BACKGROUND
• Who is Using AJAX
• Major Google Products
• Google Suggest
• Gmail
• Google Maps
• Flickr
• A9.com (Amazon’s search engine)
© 2006 Accenture. All rights reserved.
6
AGENDA
– Introduction and background
– AJAX deep dive
– AJAX patterns
– AJAX frameworks & tools
– Summary
– Q&A
© 2006 Accenture. All rights reserved.
7
AJAX DEEP DIVE
• AJAX deep dive
• Paradigm Shift
• Basic AJAX programming flow
• Live demo & code analysis – validation (via web conference)
• Key AJAX elements
• AJAX and Web Services
• Live demo & code analysis – AJAX/REST
• Security Constraint
• Other Constraints and Workarounds
• Constraints without Workarounds
• Performance Considerations
© 2006 Accenture. All rights reserved.
8
AJAX DEEP DIVE
• Paradigm Shift
• Old paradigm: whole page reload needed for partial change
• Not efficient
• UI level coupling
• Slow
© 2006 Accenture. All rights reserved.
9
AJAX DEEP DIVE
• Paradigm Shift
• New paradigm: only the changing part is loaded (extreme: “One Page
Interface”)
• Efficient
• UI level decoupled
• Faster
© 2006 Accenture. All rights reserved.
10
AJAX DEEP DIVE
• Basic AJAX programming flow
1. Event triggers XMLHttpRequest
to be created and callback
function registered.
3. User continues
to proceed
© 2006 Accenture. All rights reserved.
2. The request is sent to
server asynchronously
4. The response is received and callback
function is executed to process response
and manipulate HTML contents (generate,
delete or modify etc.)
11
AJAX DEEP DIVE
• Live demo & code analysis – validation (via web conference)
• Event: Onkeyup
• A validation request / key stroke
• DIV – innerHTML
• Convenience element to show/hide text
• What does ‘asynchronous’ imply in the sample code?
• Anything suspicious?
© 2006 Accenture. All rights reserved.
12
AJAX DEEP DIVE
• Key AJAX elements
• XMLHttpRequest
• DOM
• XML
• CSS
© 2006 Accenture. All rights reserved.
13
AJAX DEEP DIVE
• Key AJAX elements
• XMLHttpRequest (ActiveXObject for IE)
• Key attributes
•
onreadystatechange = <callback function>
• readystate
• 0: uninitialized before calling open(); 1: set up, not sent, before calling sent();
• 2: sent, in progress, can get header; 3: :sent, data partially available
• 4: response ready to use
• responseText – String (usually used with innerHTML)
• responseXML – XML document object
• Key methods
• open (“<METHOD>”, “URL”, <async?> )
• <METHOD> :Get / Put / Head etc.
• Send(“contents”)
© 2006 Accenture. All rights reserved.
14
AJAX DEEP DIVE
• Key AJAX elements
• DOM
• Processing XML response
• responseXML.getElementsByTagName(name)
• Content manipulation
• document.getElementById(id)
• document.createElement(tagName)
• <element>.appendChild(childNode)
• <element>.removeChild(childNode)
• <element>.hasChildnodes()
• <element>.style.cssText
© 2006 Accenture. All rights reserved.
15
AJAX DEEP DIVE
• Live demo & code – validation (review)
• What does ‘asynchronous’ imply in this sample?
• Anything suspicious?
© 2006 Accenture. All rights reserved.
16
AJAX DEEP DIVE
• AJAX and Web Services
• REST (Representational State Transfer)
• Underlying architectural model of the Internet
• Enables a simplified web services architecture using HTTP
• Using Ajax and REST implies the following:
• Requested resource is defined as a URL
• Response data is transferred via XML.
• The data is retrieved from the HTTP server using HTTP GET
• Web Services Gateway
• Used to walk around JavaScript security constraint
© 2006 Accenture. All rights reserved.
17
AJAX DEEP DIVE
• Live demo & code analysis – AJAX/REST
• Web search using Yahoo! Web Services
• Delegate to Web Services Gateway to walk around security constraint
• Have the gateway request the service and pass the response back
• Use JavaScript DOM methods to generate contents
© 2006 Accenture. All rights reserved.
18
AJAX DEEP DIVE
• Security Constraints
• AJAX gives rise to huge amounts of “mobile code” running on a
user’s machine -> security risk
• How to address this issue:
• AJAX applications cannot read or write to the local file system.
• Usage of “server of origin” policy:
• an AJAX application cannot connect to any web domains other
than the one from which it originated (mostly)
• It is possible to connect to other domains and execute code,
however the scripts from the two domains cannot interact with each
other.
• If there is a legitimate need to invoke a remote service on another
server, a Proxy on the “server of origin” should be used to gain access to
the other server.
© 2006 Accenture. All rights reserved.
19
AJAX DEEP DIVE
• Security Constraints - Restricting Access to Private Data
• HTTPS – recommended industry standard, but may be too
expensive.
• Filter HTTP requests
• Use HTTP sessions – create a token when the user logs in and
check for this token with each subsequent request.
• Use encrypted HTTP headers – add an additional header to the
HTTP request and check for its presence and an encrypted value
within the header to a key on the server.
• The key could initially be sent over HTTPS from the server.
© 2006 Accenture. All rights reserved.
20
AJAX DEEP DIVE
• Other Constraints and Workarounds
• Browser behavior – AJAX applications may break the expected
behavior of a browser’s back button.
• User expectation – to return to some previous state when the back
button is used.
• Workaround – IFRAMEs – populates the history when the back button is
pressed (ex. Google Maps).
• User expectation – to be able to bookmark a certain state in an
application which may be difficult.
• Workaround – URL fragmented identifiers to keep track of state with
JavaScript
© 2006 Accenture. All rights reserved.
21
AJAX DEEP DIVE
• Constraints without Workarounds
• JavaScript must be enabled on a user’s browser.
• JavaScript functionality must be rigorously tested in multiple
browsers to work out all the quirks.
• Accessibility Constraints for screen-reader based browsers.
© 2006 Accenture. All rights reserved.
22
AJAX DEEP DIVE
• Performance Considerations
• Initial performance hit when
user accesses the
application for the first time.
• Subsequent user
interactions are a lot faster
• Understand the kind of
audience, i.e. the browser
your user will be using and
tune the AJAX application for
those browsers.
• Asynchronous calls to the
server could result in more
hung threads.
© 2006 Accenture. All rights reserved.
23
AGENDA
– Introduction and background
– AJAX deep dive
– AJAX patterns
– AJAX frameworks & tools
– Summary
– Q&A
© 2006 Accenture. All rights reserved.
24
AJAX PATTERNS
• Architectural Patterns
• Local Event-Handling – The application should ensure that most
events are handled locally in keeping with a responsive user
experience.
• Local caching – Since many events require updated data from the
server, maintain a local cache of information.
• Predictive Download – goes hand in hand with local caching. Here
we should anticipate what the user is “likely” to do, and pre-load the
required data into the local cache.
• Submission throttling – instead of submitting each JavaScript event,
store events in a buffer and frequently evaluate if anything should be
submitted.
• Distinct URL – In order to let users bookmark state, write distinct
URLs whenever the input will cause a fresh new browser state:
• Ex. Google Maps has a “Link to this Page” link.
© 2006 Accenture. All rights reserved.
25
AJAX PATTERNS
• Display Patterns
• Rich CSS – to minimize download size, use CSS to give a graphical
experience without having to download images.
• Embedded Text – ensure that the user is able to cut-and-paste text
by using Rich CSS to integrate text into graphics.
• Age Display – Since much of the information stays on the client side,
it is imperative for the user to see an indication of stale information.
Indicate the age of any critical information.
• Synchronization status – When using Submission Throttling, provide
a way for the user to indicate what’s synchronized and what is
pending.
© 2006 Accenture. All rights reserved.
26
AGENDA
– Introduction and background
– AJAX deep dive
– AJAX patterns
– AJAX frameworks & tools
– Summary
– Q&A
© 2006 Accenture. All rights reserved.
27
AJAX FRAMEWORKS & TOOLS
• Frameworks
• Why need frameworks (specifically for AJAX)?
• Browser incompatibilities
• Maintaining large pieces of common JavaScript code
• Lack of standard (reusable) component
• Lack of development tools
• Many AJAX frameworks available
• Atlas
• AjaxFaces (commercial*) • Backbase (commercial)
• “Flash/JavaScript
Integration Kit”
• Google AJAXSLT
• Java Studio Creator 2
• Dojo
• Rico
• SACK
© 2006 Accenture. All rights reserved.
28
AJAX FRAMEWORKS & TOOLS
• Frameworks
• Backbase
• Features:
• Formalized UI declaration language: BXML
• Single page interface (no page flipping)
• Cross browser / cross platform
• Based on W3C
• Plug-ins available to Eclipse, Visual Studio & Dreamweaver
•…
• Expensive $1000s/CPU
• Other: listed Accenture as Consulting Partner
© 2006 Accenture. All rights reserved.
29
AJAX FRAMEWORKS & TOOLS
• Frameworks
• Backbase
• How it works:
• Backbase presentation client (BPC) loaded at page start up (boot.js)
• BPC interprets BXML tags and transforms them into DOM structure
© 2006 Accenture. All rights reserved.
30
AJAX FRAMEWORKS & TOOLS
• Frameworks
• Java Studio Creator 2
• BluePrints AJAX Components
• Auto-Complete • Progress Bar
Text Field
• Map Viewer
• Select Value
Text Field
AJAX & J2EE’s solution for auto complete
© 2006 Accenture. All rights reserved.
31
AJAX FRAMEWORKS & TOOLS
• Frameworks
• Atlas (Microsoft)
• Integrated with ASP .NET 2.0
• Not restricted to .NET – client centric
• Showcase: http://www.squeet.com/
• Free
• Google AJAXSLT
• Implementation of XSL-T in JavaScript
• Fetch XMLs from server and transfer them into HTML
• Flash/JavaScript Integration Kit
• Access Flash using Ajax
© 2006 Accenture. All rights reserved.
32
AJAX FRAMEWORKS & TOOLS
• Frameworks
• Dojo - Small, stable, and deals with back and forward button issue
• Rico – drag & drop
• SACK – small wrapper / very light-weight
• many more…
© 2006 Accenture. All rights reserved.
33
AJAX FRAMEWORKS & TOOLS
• Tools
• JSDoc
• a tool written in Perl that generates javadoc-like documents from JavaScript with
javadoc-like comments
• Firefox 1.5:
• HTML Validator, CSS Validator, DOM Inspector and more…
• JSLint
• JavaScript validator: www.jslint.com
• Obfuscation / compression tools
• Make JavaScript hard to copy
• Reduce network traffic
• MemTronic's HTML/JavaScript Cruncher-Compressor
http://hometown.aol.de/_ht_a/memtronic/
© 2006 Accenture. All rights reserved.
34
AGENDA
– Introduction and background
– AJAX deep dive
– AJAX patterns
– AJAX frameworks & Tools
– Summary
– Q&A
© 2006 Accenture. All rights reserved.
35
AGENDA
– Introduction and background
– AJAX deep dive
– AJAX patterns
– AJAX frameworks & Tools
– Summary
– Q&A
© 2006 Accenture. All rights reserved.
36
REFERENCES
•
•
•
•
•
•
•
•
Foundations of Ajax – Asleson, Schutta
Ajax in Action - Dave Crane, Eric Pascarello with Darren James
Ajax Patterns and Best Practices - Christian Gross
Backbase Ajax Framework – Backbase
Java One 2005 Web Conference - Sun
“Why Ajax Matters Now” – Jesse James Garrett
“Ajax: A new Approach to Web Applications” – Jesse James Garrett
www.adaptivepath.com
© 2006 Accenture. All rights reserved.
37