Ajax for-coldfusion-developers
-
Upload
sudhakar-ganta -
Category
Technology
-
view
903 -
download
0
Transcript of Ajax for-coldfusion-developers
Ajax for ColdFusion Developers
12/07/2006 Rob Gonda :: www.robgonda.com 2
INTRO
12/07/2006 Rob Gonda :: www.robgonda.com 3
What is Ajax?
12/07/2006 Rob Gonda :: www.robgonda.com 4
What is Ajax?
AJAX != DHTMLAJAX Vs. Ajax
12/07/2006 Rob Gonda :: www.robgonda.com 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 togetherFlash Remoting for JavaScript? Not really, but close
12/07/2006 Rob Gonda :: www.robgonda.com 6
Other remote scripting
Hidden IFrame<img> src<script> src hackCSS href hackJS to faceless Java appletsJS to faceless FlashNO CONTENT ResponseCookies
12/07/2006 Rob Gonda :: www.robgonda.com 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 8
Two Types
Ajax On The EdgesAjax WidgetsEnhance your current siteAdd usabilityDegradable
RIASingle-page applicationsReplacement for Desktop Applications
12/07/2006 Rob Gonda :: www.robgonda.com 9
Classic request flow
12/07/2006 Rob Gonda :: www.robgonda.com 10
Partial UI Updates
12/07/2006 Rob Gonda :: www.robgonda.com 11
Rich / Thin Client
12/07/2006 Rob Gonda :: www.robgonda.com 12
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
12/07/2006 Rob Gonda :: www.robgonda.com 13
BASICS
12/07/2006 Rob Gonda :: www.robgonda.com 14
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
12/07/2006 Rob Gonda :: www.robgonda.com 15
XHR Methods
12/07/2006 Rob Gonda :: www.robgonda.com 16
XHR Properties
12/07/2006 Rob Gonda :: www.robgonda.com 17
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
12/07/2006 Rob Gonda :: www.robgonda.com 18
JSON
A Data Interchange Format.Text-based.Light-weight.Easy to parse.Language Independent.A Subset of ECMA-262 Third Edition (akaJavaScript).
12/07/2006 Rob Gonda :: www.robgonda.com 19
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>
12/07/2006 Rob Gonda :: www.robgonda.com 20
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.
12/07/2006 Rob Gonda :: www.robgonda.com 21
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!
12/07/2006 Rob Gonda :: www.robgonda.com 22
Debugging
HTTP Traffic SniffersLive HTTP HeadersFireBugFiddlerEtherealService Capture
12/07/2006 Rob Gonda :: www.robgonda.com 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 errorsUse MochiKit logging and interpreterUse Venkman or Microsoft Script Debugger to troubleshoot behaviorial problems
12/07/2006 Rob Gonda :: www.robgonda.com 24
Libraries
12/07/2006 Rob Gonda :: www.robgonda.com 25
AJAX Libraries
Many people / everyone opt for AJAX libraries. Provides many advantages
Development timeSync / AsyncSerializationMultithread / batchesError handlingLoggingSecurity, encryption, obfuscation
Disadvantages : NONE!
12/07/2006 Rob Gonda :: www.robgonda.com 26
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
12/07/2006 Rob Gonda :: www.robgonda.com 27
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
12/07/2006 Rob Gonda :: www.robgonda.com 28
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
12/07/2006 Rob Gonda :: www.robgonda.com 29
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)
12/07/2006 Rob Gonda :: www.robgonda.com 30
Dojo Ajax Slide
dojo.io.bind() packs a big punchHandles text encodingsAuto-encodes URL componentsSubmits formsSync or asyncCoerces return data
Pluggable back-ends
12/07/2006 Rob Gonda :: www.robgonda.com 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 32
Problems
12/07/2006 Rob Gonda :: www.robgonda.com 33
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
12/07/2006 Rob Gonda :: www.robgonda.com 34
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
12/07/2006 Rob Gonda :: www.robgonda.com 35
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
12/07/2006 Rob Gonda :: www.robgonda.com 36
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
12/07/2006 Rob Gonda :: www.robgonda.com 37
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
12/07/2006 Rob Gonda :: www.robgonda.com 38
Main Architectures
12/07/2006 Rob Gonda :: www.robgonda.com 39
What to transport
DataXMLWDDXSOAPJSON (JavaScript Object Notation)JavaScript Native Objects (one way)
InstructionsJavaScript instructions to be dynamically evaluated using eval()
12/07/2006 Rob Gonda :: www.robgonda.com 40
The Magic Functions
Traditionally you would use DOMCross browser hellcreateNode is a pain
innerHTMLFor modifying content
eval()Dynamic expression evaluation
12/07/2006 Rob Gonda :: www.robgonda.com 41
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);
12/07/2006 Rob Gonda :: www.robgonda.com 42
Design Patterns
12/07/2006 Rob Gonda :: www.robgonda.com 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 44
MVC Diagram
12/07/2006 Rob Gonda :: www.robgonda.com 45
MVC Data Flow
12/07/2006 Rob Gonda :: www.robgonda.com 46
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
12/07/2006 Rob Gonda :: www.robgonda.com 47
Browser history
iframe techniqueFirefox
Frame in html Changes are storedFrame in DOM Changes are not stored
IEAll Changes are stored
SafariNo Changes are stored
12/07/2006 Rob Gonda :: www.robgonda.com 48
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
12/07/2006 Rob Gonda :: www.robgonda.com 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 50
Degradable Sites
What if JavaScript is disabled?Href’s + onClicksReuse the same logic, just change the views.jQuery Example
12/07/2006 Rob Gonda :: www.robgonda.com 51
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
12/07/2006 Rob Gonda :: www.robgonda.com 52
Futures Extensions
Flash SVGCanvasJITOff-line
12/07/2006 Rob Gonda :: www.robgonda.com 53
ColdFusion
12/07/2006 Rob Gonda :: www.robgonda.com 54
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
12/07/2006 Rob Gonda :: www.robgonda.com 55
Now Let’s code
AjaxcfcEcho, complexObjects, formValidation1, modelglue, machii
dojo.0.4.1IO, widgets
JqueryContactmanager, formPost, history, tool tips, rating, thickbox
PrototypeSpryXHR
12/07/2006 Rob Gonda :: www.robgonda.com 56
Thank You
Questions / Comments?Blog: http://www.robgonda.comCorp: http://www.ichameleongroup.comemail: [email protected]