4. What is Ajax?
AJAX != DHTML
AJAX Vs. Ajax
12/07/2006 Rob Gonda :: www.robgonda.com 4
5. What is AJAX? (tech view)
Asynchronous data retrieval using
XMLHttpRequest (or not)
Data interchange and manipulation using
XML (or not)
Dynamic display and interaction using
Document Object Model - DOM (or not)
JavaScript binding everything together
Flash Remoting for JavaScript? Not really,
but close
12/07/2006 Rob Gonda :: www.robgonda.com 5
6. Other remote scripting
Hidden IFrame
<img> src
<script> src hack
CSS href hack
JS to faceless Java applets
JS to faceless Flash
NO CONTENT Response
Cookies
12/07/2006 Rob Gonda :: www.robgonda.com 6
7. What does it do for us?
Make server hits without full
request/response cycle
Why?
Reduce server load
Dramatic improvement in user experience
Reduced load on browser/script
12/07/2006 Rob Gonda :: www.robgonda.com 7
8. Two Types
Ajax On The Edges
Ajax Widgets
Enhance your current site
Add usability
Degradable
RIA
Single-page applications
Replacement for Desktop Applications
12/07/2006 Rob Gonda :: www.robgonda.com 8
12. Alternatives
Flash
Features support for vector and raster graphics, a
scripting language called ActionScript and
bidirectional streaming of audio and video
Flex
Declarative RIA development to build RIA’s using the
Flash Platform
Laszlo
Declarative RIA development to build RIA’s using the
Flash Platform or Ajax/DHTML output
12/07/2006 Rob Gonda :: www.robgonda.com 12
14. XMLHttpRequest (XHR)
A JavaScript Class that lets you make
asynchronous HTTP requests from
JavaScript
Allows to kick off HTTP requests in the
background
A call back JavaScript function is invoked
at each state of the HTTP request and
response
12/07/2006 Rob Gonda :: www.robgonda.com 14
17. Xml, wddx, json, soap
XML: Extensible Markup Language
is heavy
WDDX: Web Distributed Data Exchange
is structured XML, native for ColdFusion
JSON: JavaScript Object Notation
lightweight computer data interchange format
SOAP: Service-Oriented architectural
pattern
successor of XML RPC
12/07/2006 Rob Gonda :: www.robgonda.com 17
18. JSON
A Data Interchange Format.
Text-based.
Light-weight.
Easy to parse.
Language Independent.
A Subset of ECMA-262 Third Edition (aka
JavaScript).
12/07/2006 Rob Gonda :: www.robgonda.com 18
20. JSON and CF
Cfjson: http://jehiah.com/projects/cfjson/
UDF
Serializes and de-serializes objects
Missing de-serializing a recordset
json-serializer:
http://cfopen.org/projects/json-serializer/
CFC
Online serializes.
12/07/2006 Rob Gonda :: www.robgonda.com 20
21. Testing JavaScript is Not Easy
Browsers
Firefox, Mozilla, Internet Explorer, Opera, Safari, etc
Multiple Versions (Main releases, betas, etc)
Different Security Settings
Different Browser Plug-ins
Different Operating Systems and Patches
Different CPUs, RAM, Memory, Multiple
Programs running, Multiple browsers open, etc!
12/07/2006 Rob Gonda :: www.robgonda.com 21
22. Debugging
HTTP Traffic Sniffers
Live HTTP Headers
FireBug
Fiddler
Ethereal
Service Capture
12/07/2006 Rob Gonda :: www.robgonda.com 22
23. More on Debugging
Use the DOM Inspector to observe the current
state of your page
Use MODI for easier live inspection and DOM
manipulation
Use the JavaScript console / firebug to check for
errors
Use MochiKit logging and interpreter
Use Venkman or Microsoft Script Debugger to
troubleshoot behaviorial problems
12/07/2006 Rob Gonda :: www.robgonda.com 23
25. AJAX Libraries
Many people / everyone opt for AJAX libraries.
Provides many advantages
Development time
Sync / Async
Serialization
Multithread / batches
Error handling
Logging
Security, encryption, obfuscation
Disadvantages : NONE!
12/07/2006 Rob Gonda :: www.robgonda.com 25
26. Use a Framework
Browsers are different across key areas:
Event registration and event handling
HTTP request object implementation
Document Object Model (DOM) API.
Multithreading, handle request queue or batch
Serialization
Error handling
Logging
Security, encryption, obfuscation
12/07/2006 Rob Gonda :: www.robgonda.com 26
27. JavaScript AJAX Libraries
Libraries
Adobe Spry
Dojo (used by Open Ajax, XAP, Kabuki)
DWR (integrate with Java Struts and JSF)
jQuery (light-weight, extensible, community involvement)
Prototype (the most popular, used by RoR)
YUI (Yahoo User Interface Library)
Toolkits
Microsoft Altas (commercial)
Open Ajax (IBM, Zimbra, Dojo | open source)
Open Laszlo (Flash and Ajax)
Tibco GI
Backbase
12/07/2006 Rob Gonda :: www.robgonda.com 27
28. JavaScript Libraries
Dojo (http://dojotoolkit.org/)
used by Open Ajax, XAP, Kabuki
Lack of documentation
DWR (http://getahead.ltd.uk/dwr)
Commonly used with Java, implements Comet
(Reverse Ajax)
Prototype (http://prototype.conio.net/)
Used by RoR, script.aculo.us, Rico, Behaviuor
Spry (http://labs.adobe.com/technologies/spry/)
Simple, limited, lightweight, targeting designers
12/07/2006 Rob Gonda :: www.robgonda.com 28
29. JavaScript Libraries
jQuery (http://jquery.com/)
light-weight, extensible, community
involvement
YUI (http://developer.yahoo.com/yui/)
Yahoo User Interface Library
Well documented
Well supported
(wink wink)
12/07/2006 Rob Gonda :: www.robgonda.com 29
30. Dojo Ajax Slide
dojo.io.bind() packs a big punch
Handles text encodings
Auto-encodes URL components
Submits forms
Sync or async
Coerces return data
Pluggable back-ends
12/07/2006 Rob Gonda :: www.robgonda.com 30
31. Dojo other IO
dojo.require(”dojo.io.ScriptSrcIO”);
Cross-domain and JSON-P
dojo.require(”dojo.io.IframeIO”)
Background uploads, plugs right into bind()!
dojo.io.updateNode()
dojo.io.encodeForm()
12/07/2006 Rob Gonda :: www.robgonda.com 31
33. Potential Problems
Breaks back button support
URL's don't change as state changes
SEO / Search Engine Indexing
Cross Browser Issues can be a pain
Cross-domain requests (SOA, WS)
Viewable Source Code
Client side business logic
Server Load if not properly coded
Concurrency
12/07/2006 Rob Gonda :: www.robgonda.com 33
34. Security Concerns (I)
JavaScript applications are easily decoded
and reengineered
On-demand (server side) loading will not
help if you load your entire application;
keep business logic on server
Obfuscation makes it more difficult, but
can also generate bugs
12/07/2006 Rob Gonda :: www.robgonda.com 34
35. Security Concerns (II)
XMLHttpRequest is nothing more than a normal
form submission
Authentication elements
Session cookies
Blank Referrer by default You should manually set
this header in your API
Get / Post Verbs are sent in plain text
Consider encrypting requests and obfuscating
responses
Developers forget to send sensitive data over
SSL
12/07/2006 Rob Gonda :: www.robgonda.com 35
36. Security Rules
Don't trust user input
Do not trust client side validation
Do not trust server side AJAX validation
Will improve user experience
Will not reduce code, only increase it.
You still need to re-validate in the server side
Do not assume every Ajax request is real
Keep you business logic in the server
No framework is yet encrypting transmitted data
12/07/2006 Rob Gonda :: www.robgonda.com 36
37. Do not expose your business logic
Most important aspect for Enterprise
Applications
Ajax uses JavaScript, but it does not have to
reside in the client
Use remote calls only as a transport layer
Transport state and commands, not raw data
MVC
Model must remain on the sever
View or presentation layer is managed with DOM
Controller layer simply requests commands and
dynamically evaluates them
12/07/2006 Rob Gonda :: www.robgonda.com 37
39. What to transport
Data
XML
WDDX
SOAP
JSON (JavaScript Object Notation)
JavaScript Native Objects (one way)
Instructions
JavaScript instructions to be dynamically
evaluated using eval()
12/07/2006 Rob Gonda :: www.robgonda.com 39
40. The Magic Functions
Traditionally you would use DOM
Cross browser hell
createNode is a pain
innerHTML
For modifying content
eval()
Dynamic expression evaluation
12/07/2006 Rob Gonda :: www.robgonda.com 40
41. The eval() function
Dynamic evaluation
ONLY in the client
NEVER in the server
Evaluation in the server could cause xml or sql
injection.
Evaluate innerHTML instruction
i.e. result = “ $(‘div1’).innerHTML = ‘text’ ”;
eval(result);
12/07/2006 Rob Gonda :: www.robgonda.com 41
43. MVC
Model-view-controller (MVC) is a software
architecture that separates an application's
data model, user interface, and control
logic into three distinct components.
Clear distinction between the presentation
layer and business logic
12/07/2006 Rob Gonda :: www.robgonda.com 43
46. Architecture Recommendations
Clearly separate content from code - MVC
Store data that spans pages or sessions
on the server
Consider an AJAX centric controller
Use Facades to provide generalized
access to data or services
Use care with fined grained access to
model/services
12/07/2006 Rob Gonda :: www.robgonda.com 46
47. Browser history
iframe technique
Firefox
Frame in html Changes are stored
Frame in DOM Changes are not stored
IE
All Changes are stored
Safari
No Changes are stored
12/07/2006 Rob Gonda :: www.robgonda.com 47
48. The back button
Not needed for Ajax snippets or widgets,
but imperative for Ajax applications
The problem is not new; Flash applications
always faced the same
No history means no bookmarks, no
sharing, no back button
Use frameworks
12/07/2006 Rob Gonda :: www.robgonda.com 48
49. Fixing the back button
When a user hits the back button, the
browser typically returns a cached version
of the previous page. If the HTTP
response headers have marked the page
as not cacheable, a new request is made.
In most browsers, if a fragment identifier
exists (#) and the user clicks the back
button, history pulls the previous page
from the browser’s cache.
12/07/2006 Rob Gonda :: www.robgonda.com 49
50. Degradable Sites
What if JavaScript is disabled?
Href’s + onClicks
Reuse the same logic, just change the
views.
jQuery Example
12/07/2006 Rob Gonda :: www.robgonda.com 50
51. Extending Ajax
Flash plays friendly with Ajax
The Flash Platform does not have the
browser limitations
Dojo uses Flash for persistent storage
Flash 8’s IO classes have been used for
file transfers
Rob uses Flash for XML Sockets
messaging services
12/07/2006 Rob Gonda :: www.robgonda.com 51