Ajax for-coldfusion-developers

Ajax for ColdFusion Developers

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

INTRO


What is Ajax?


What is Ajax?

AJAX != DHTMLAJAX 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 togetherFlash Remoting for JavaScript? Not really, but close


Other remote scripting

Hidden IFrame<img> src<script> src hackCSS href hackJS to faceless Java appletsJS to faceless FlashNO CONTENT ResponseCookies


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 EdgesAjax WidgetsEnhance your current siteAdd usabilityDegradable

RIASingle-page applicationsReplacement for Desktop Applications


Classic request flow


Partial UI Updates


Rich / Thin Client


Alternatives

FlashFeatures support for vector and raster graphics, a scripting language called ActionScript and bidirectional streaming of audio and video

FlexDeclarative RIA development to build RIA’s using the Flash Platform

LaszloDeclarative 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 backgroundA 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 Exchangeis structured XML, native for ColdFusion

JSON: JavaScript Object Notationlightweight 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 (akaJavaScript).


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/UDFSerializes and de-serializes objectsMissing de-serializing a recordset

json-serializer: http://cfopen.org/projects/json-serializer/

CFCOnline serializes.

http://jehiah.com/projects/cfjson/

http://cfopen.org/projects/json-serializer/


Testing JavaScript is Not Easy

BrowsersFirefox, Mozilla, Internet Explorer, Opera, Safari, etcMultiple Versions (Main releases, betas, etc)Different Security SettingsDifferent Browser Plug-ins

Different Operating Systems and PatchesDifferent CPUs, RAM, Memory, Multiple Programs running, Multiple browsers open, etc!


Debugging

HTTP Traffic SniffersLive HTTP HeadersFireBugFiddlerEtherealService 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 errorsUse MochiKit logging and interpreterUse Venkman or Microsoft Script Debugger to troubleshoot behaviorial problems


Libraries


AJAX Libraries

Many people / everyone opt for AJAX libraries. Provides many advantages

Development timeSync / AsyncSerializationMultithread / batchesError handlingLoggingSecurity, encryption, obfuscation

Disadvantages : NONE!


Use a Framework

Browsers are different across key areas: Event registration and event handlingHTTP request object implementationDocument Object Model (DOM) API.

Multithreading, handle request queue or batchSerializationError handlingLoggingSecurity, encryption, obfuscation


JavaScript AJAX Libraries

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

ToolkitsMicrosoft Altas (commercial)Open Ajax (IBM, Zimbra, Dojo | open source)Open Laszlo (Flash and Ajax)Tibco GIBackbase


JavaScript Libraries

Dojo (http://dojotoolkit.org/)used by Open Ajax, XAP, KabukiLack 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

http://dojotoolkit.org/

http://getahead.ltd.uk/dwr

http://prototype.conio.net/

http://labs.adobe.com/technologies/spry/


JavaScript Libraries

jQuery (http://jquery.com/)light-weight, extensible, community involvement

YUI (http://developer.yahoo.com/yui/)Yahoo User Interface LibraryWell documentedWell supported(wink wink)

http://jquery.com/

http://developer.yahoo.com/yui/


Dojo Ajax Slide

dojo.io.bind() packs a big punchHandles text encodingsAuto-encodes URL componentsSubmits formsSync or asyncCoerces 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 IndexingCross Browser Issues can be a pain Cross-domain requests (SOA, WS)Viewable Source CodeClient side business logicServer Load if not properly codedConcurrency


Security Concerns (I)

JavaScript applications are easily decoded and reengineeredOn-demand (server side) loading will not help if you load your entire application; keep business logic on serverObfuscation makes it more difficult, but can also generate bugs


Security Concerns (II)

XMLHttpRequest is nothing more than a normal form submission

Authentication elementsSession cookiesBlank Referrer by default You should manually set this header in your API

Get / Post Verbs are sent in plain textConsider encrypting requests and obfuscating responses

Developers forget to send sensitive data over SSL


Security Rules

Don't trust user inputDo not trust client side validationDo not trust server side AJAX validation

Will improve user experienceWill not reduce code, only increase it.You still need to re-validate in the server side

Do not assume every Ajax request is realKeep you business logic in the serverNo framework is yet encrypting transmitted data


Do not expose your business logic

Most important aspect for Enterprise ApplicationsAjax uses JavaScript, but it does not have to reside in the clientUse remote calls only as a transport layerTransport state and commands, not raw dataMVC

Model must remain on the severView or presentation layer is managed with DOMController layer simply requests commands and dynamically evaluates them


Main Architectures


What to transport

DataXMLWDDXSOAPJSON (JavaScript Object Notation)JavaScript Native Objects (one way)

InstructionsJavaScript instructions to be dynamically evaluated using eval()


The Magic Functions

Traditionally you would use DOMCross browser hellcreateNode is a pain

innerHTMLFor modifying content

eval()Dynamic expression evaluation


The eval() function

Dynamic evaluationONLY in the clientNEVER in the server

Evaluation in the server could cause xml or sqlinjection.

Evaluate innerHTML instructioni.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 - MVCStore data that spans pages or sessions on the serverConsider an AJAX centric controller Use Facades to provide generalized access to data or servicesUse care with fined grained access to model/services


Browser history

iframe techniqueFirefox

Frame in html Changes are storedFrame in DOM Changes are not stored

IEAll Changes are stored

SafariNo Changes are stored


The back button

Not needed for Ajax snippets or widgets, but imperative for Ajax applicationsThe problem is not new; Flash applications always faced the sameNo history means no bookmarks, no sharing, no back buttonUse 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 + onClicksReuse the same logic, just change the views.jQuery Example


Extending Ajax

Flash plays friendly with AjaxThe Flash Platform does not have the browser limitationsDojo uses Flash for persistent storageFlash 8’s IO classes have been used for file transfersRob uses Flash for XML Sockets messaging services


Futures Extensions

Flash SVGCanvasJITOff-line


ColdFusion


ColdFusion AJAX Libraries

AjaxCFCOOP, CF extends objects, Design PatternsBuilt-in error handling, security, debugging, loggingIntegrates with Model Glue 1.1 / 2.0, Mach II

CFAjaxFirst Ajax CF Library

JSMXClient side library only

Simple Remote Scripting (SRS)Uses iframes

WddxAjax


Now Let’s code

AjaxcfcEcho, complexObjects, formValidation1, modelglue, machii

dojo.0.4.1IO, widgets

JqueryContactmanager, formPost, history, tool tips, rating, thickbox

PrototypeSpryXHR


Thank You

Questions / Comments?Blog: http://www.robgonda.comCorp: http://www.ichameleongroup.comemail: [email protected]

Ajax for-coldfusion-developers

Technology

Transcript of Ajax for-coldfusion-developers