Ajax for-coldfusion-developers

Ajax for ColdFusion
Developers

INTRO

12/07/2006 Rob Gonda :: www.robgonda.com 2

What is Ajax?


What is Ajax?

AJAX != DHTML
AJAX Vs. Ajax


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


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


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


Two Types

Ajax On The Edges
Ajax Widgets
Enhance your current site
Add usability
Degradable
RIA
Single-page applications
Replacement for Desktop Applications


Classic request flow


Partial UI Updates


Rich / Thin Client


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


BASICS


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


XHR Methods


XHR Properties


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


JSON

A Data Interchange Format.
Text-based.
Light-weight.
Easy to parse.
Language Independent.
A Subset of ECMA-262 Third Edition (aka
JavaScript).


XML Vs. JSON
{"menu": {
"id": "file",
"value": "File:",
"popup": {
"menuitem": [
{"value": "New", "onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}
]
}
}}

<menu id="file" value="File" >
<popup>
<menuitem value="New" onclick="CreateNewDoc()" />
<menuitem value="Open" onclick="OpenDoc()" />
<menuitem value="Close" onclick="CloseDoc()" />
</popup>
</menu>


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.


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!


Debugging

HTTP Traffic Sniffers
Live HTTP Headers
FireBug
Fiddler
Ethereal
Service Capture


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


Libraries


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!


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


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


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


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)


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


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()


Problems


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


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


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


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


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


Main Architectures


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()


The Magic Functions

Traditionally you would use DOM
Cross browser hell
createNode is a pain

innerHTML
For modifying content
eval()
Dynamic expression evaluation


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);


Design Patterns


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


MVC Diagram


MVC Data Flow


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


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


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


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.


Degradable Sites

What if JavaScript is disabled?
Href’s + onClicks
Reuse the same logic, just change the
views.
jQuery Example


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


Futures Extensions

Flash
SVG
Canvas
JIT
Off-line


ColdFusion


ColdFusion AJAX Libraries

AjaxCFC
OOP, CF extends objects, Design Patterns
Built-in error handling, security, debugging, logging
Integrates with Model Glue 1.1 / 2.0, Mach II
CFAjax
First Ajax CF Library
JSMX
Client side library only
Simple Remote Scripting (SRS)
Uses iframes
WddxAjax


Now Let’s code
Ajaxcfc
Echo, complexObjects, formValidation1, modelglue,
machii
dojo.0.4.1
IO, widgets
Jquery
Contactmanager, formPost, history, tool tips, rating,
thickbox
Prototype
Spry
XHR


Thank You

Questions / Comments?
Blog: http://www.robgonda.com
Corp: http://www.ichameleongroup.com
email: rob@robgonda.com


Ajax for-coldfusion-developers

More Related Content

Similar to Ajax for-coldfusion-developers (20)

Recently uploaded (20)

Ajax for-coldfusion-developers