ajax for coldfusion developers
TRANSCRIPT
![Page 1: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/1.jpg)
Ajax Intensive for ColdFusion Developers
![Page 2: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/2.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 2
TOCIntro
What is AjaxAjax Vs. Classic WebThe Characteristics of an Ajax AppAlternatives to Ajax
FlashFlexLaszlo
HistoryBasics
DefinitionElementsJavaScriptXMLHttpRequestXML / JSON / WDDX / SOAPJSON and CFDevelopers OversightsTestingDebugging
HTTP Sniffing: Firebug, Fiddler, Ethereal, ServiceCapture
![Page 3: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/3.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 3
TOCLibraries
JavaScriptPrototypeDWRDojoSpryPush for Dojo
Potential Problems and Security RulesBusiness Logic ImportanceData Transport Vs. Instructions TransportDesign Patterns :: MVCDegradable SitesExtending Ajax with Flash / Flex
![Page 4: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/4.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 4
TOCCF Frameworks
Model Glue 1.1 / 2.0Mach II
CF Ajax LibrariesajaxCFCCFAjax
Potential Problems ConcurrencyBack buttonBook-marking
Tips and tricksExamples
Simple Ajax EchoModel Glue Ajax EchoModel Glue Contact ManagerModel Glue Ajax / XMLSockets Contact ManagerMach II Ajax Contact ManagerMVC Ajax RSS ReaderSpry RSS Reader
![Page 5: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/5.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 5
!TOC
!(CF || JS)XML || XPathDOMAccessibilityCommercial FrameworksVenkman JavaScript DebuggerMicrosoft JavaScript Debugger
![Page 6: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/6.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 6
INTRO
![Page 7: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/7.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 7
What is Ajax?
![Page 8: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/8.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 8
What is Ajax?
AJAX != DHTML
![Page 9: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/9.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 9
Coined
Ajax: A New Approach to Web Applicationsby Jesse James Garrett February 18, 2005
“Google Suggest and Google Maps aretwo examples of a new approach to webapplications that we at Adaptive Path havebeen calling Ajax. The name is shorthandfor Asynchronous JavaScript + XML, and itrepresents a fundamental shift in what’spossible on the Web.”
![Page 10: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/10.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 10
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
![Page 11: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/11.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 11
Other remote scripting
Hidden IFrame<img> src<script> src hackCSS href hackJS to faceless Java appletsJS to faceless FlashNO CONTENT ResponseCookies
![Page 12: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/12.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 12
AJAX Sites
Google Mail, Maps, Reader, Suggest, Personalized Homepage, Writely37signal’s Basecamp / BackpackBackbaseZimbra Collaboration SuiteBindowsopenlaszlo.org
![Page 13: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/13.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 13
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
![Page 14: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/14.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 14
How can Ajax help me?
Form Validation move business rule validation to the server while still enforcing them in real time. Check usernames, passwords, emails, etc.
"pushing data" - update scores, stock quotes, weather, etc. Rating, votingInput suggest: i.e. Google suggestEdit in placeActive SearchFiltering large recordsets of dataPre-fetch data sets to improve speedChat: Ajax Vs. Comet
![Page 15: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/15.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 15
Ajax Real Barriers to Entry
Not technologyDesign ElementsApplication design / architecture is not procedural or sequentialThink beyond the clickDo not expose your code
![Page 16: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/16.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 16
Design Elements
User InterfaceProvide the user with immediate feedbackUsers are used to the click and page reload flow; make new experience as intuitive as possible
ApplicationDesign for error, not only successAsynchronous implies concurrency, packets may not arrive in the same order they were requestedClient application should ignore timed out responsesKeep state in the server
![Page 17: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/17.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 17
Principles for Ajax Design
1. Keep it direct2. Provide live feedback3. Offer an invitation4. Cross borders reluctantly5. Leave a light footprint6. Show transitions7. Think in objects
![Page 18: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/18.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 18
Two Types
Ajax On The EdgesAjax WidgetsEnhance your current siteAdd usabilityDegradable
RIASingle-page applicationsReplacement for Desktop Applications
![Page 19: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/19.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 19
The Ajax Buzz
![Page 20: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/20.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 20
Classic request flow
![Page 21: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/21.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 21
Partial UI Updates
![Page 22: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/22.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 22
Classic Vs. Ajax Web
No more single request / response restrictions
Dat
a
HTM
L U
I
![Page 23: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/23.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 23
Rich / Thin Client
![Page 24: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/24.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 24
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
![Page 25: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/25.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 25
Ajax / Flash / Java
Strengths Weaknesses
Ajax(JS)
Most compatible with existing HTML infrastructure and content;
Built-in support in most browsers – easy to try without the need for additional software;
JavaScript/DHTML code is difficult to maintain;JavaScript/DHTML code is difficult to develop;Not designed for team developmentPerformance and functionality limitations
Java Large and broad industry support for Java Large Java developer community;Widely adopted in the enterpriseRobust performance, scalability and reliabilityRobust OOPDesigned for team developmentMaintainable and manageable code
Requires higher programming skill set than scripting
Requires a Java Virtual Machine to run the application
Flash Supports rich UI features like animation and video
Flash engine is small and widely availableLarge Flash designer community
ActionScript code is difficult to maintain;Not designed for team developmentPerformance and functionality limitationsFlash designers are not developers – lack of
enterprise developer mindshare
![Page 26: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/26.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 26
Flash Vs. Ajax
Feature Flash Ajax
Audio Native Support Needs plug-ins
Browser Integration Plug-in required Native Support
Compatibility Issues Minor variations between versions of Flash.
Major compatibility differences between browser versions.
CSS Limited support. Full Support (depending on browser).
Dynamic Content Difficult. SWF is a pre-compiled closed format.
HTML can be written out using just about any kind of Server technology.
Programming Model ActionScript 2.0 provides robust, java-like framework.
JavaScript 2.0 not yet supported by any major browser. JS 1.5 not recommended for large OOP applications.
![Page 27: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/27.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 27
Flash Vs. Ajax
Feature Flash Ajax
(Bitmap) Graphics Bitmap manipulation. Load static images dynamically.
Regular Expressions
Not supported natively by AS 2.0
Full support.
Server Integration Web Services, XML, Flash Remoting
IFRAME trick or XMLHttpRequest
Text Text API mimics some HTML functionality.
Powerful layout capabilities.
Vector Graphics Full Support. None.
Video Dynamically load FLV video files or playback embedded videos.
Supported only through external plug-ins
XML Full support. Limited Support
![Page 28: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/28.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 28
Ajax Vs. Desktop Apps
![Page 29: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/29.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 29
UI Richness
![Page 30: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/30.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 30
One Size Doesn’t Fit All
RIA Approaches and Application Profile Map
Application Scale, Complexity and User Responsiveness
Application Business Criticality
Scripting:Ajax (JS)Flash
OOP:Java.NET
![Page 31: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/31.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 31
One Size Doesn’t Fit All
Suitable Application Profile Developer Fit
Ajax(JS)
HTML-centric or web content oriented applicationsCasual usage pattern applicationsFast application loading and startup is importantLimited client side logic (lower maintenance
requirement)
JavaScript developers (CSS, DHTML, JavaScript, cross browser skills)
Java Transaction oriented applicationsResponsive user interaction and runtime
performance are importantExpert usage pattern applications (frequent usage,
long duration usage)Performance, scalability and reliability can not be
sacrificed. Applications that must be maintained for many
years.
Java developers
![Page 32: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/32.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 32
One Size Doesn’t Fit All
Suitable Application Profile Developer Fit
Flash Casual usage pattern Limited client side logic (lower maintenance
requirement)Rich media oriented applications
Flash developers
.NET Transaction oriented applicationsResponsive user interaction and runtime
performance are importantExpert usage pattern applications (frequent usage,
long duration usage)Performance, scalability and reliability can not be
sacrificed. Applications that must be maintained for many
years.
.NET developers (C#, XAML, etc).
![Page 33: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/33.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 33
History
1/1/1993 12/31/2006
1/1/1994 1/1/1995 1/1/1996 1/1/1997 1/1/1998 1/1/1999 1/1/2000 1/1/2001 1/1/2002 1/1/2003 1/1/2004 1/1/2005 1/1/2006
1996Introduction of the iframe
1998Microsoft Remote Scripting
2002XMLHttpRequest 2/18/2005
AJAX Term Coined
6/27/2006CFUnited
10/2001The End of theBrowser Wars
4/30/1993WWW Became Public
![Page 34: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/34.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 34
History
April 30, 1993, CERN announced that the World Wide Web would become public and free for anyone to use.Browser asynchronous hacks have been possible since 1996, when Internet Explorer introduced the IFRAME tag.Microsoft’s Remoting Scripting or MSRS was introduced in 1998. This technique was more elaborated than all previous hack attempts.
![Page 35: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/35.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 35
History
In 2002, Microsoft chose to replace Remoting Scripting with the XMLHttpRequest object, which shortly after all major browsers copied.The term was coined February 18, 2005, by Jesse James Garret in a short essay, coincidently, days after Google released their Maps application.When Google launched their AJAX services, it gave it awareness, trust, and credibility.
![Page 36: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/36.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 36
BASICS
![Page 37: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/37.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 37
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
![Page 38: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/38.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 38
XHR Methods
![Page 39: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/39.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 39
XHR Properties
![Page 40: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/40.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 40
Cross-browser: IE
new ActiveXOjbect("Microsoft.XMLHTTP"); You can't totally blame them because they invented it Native XMLHttpRequest support should be in IE7
![Page 41: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/41.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 41
Cross-browser XHR Req.
See Listing 1
![Page 42: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/42.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 42
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
![Page 43: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/43.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 43
JSON
A Data Interchange Format.Text-based.Light-weight.Easy to parse.Language Independent.A Subset of ECMA-262 Third Edition (akaJavaScript).
![Page 44: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/44.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 44
JSON is not
JSON is not a document format.JSON is not a markup language.JSON is not a general serialization format.
No recursive/recurring structures.No invisible structures.No functions.
![Page 45: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/45.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 45
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>
![Page 46: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/46.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 46
JSON is not XML
elementattributeattribute stringcontent<![CDATA[ ]]>
entitiesdeclarationsschemastylesheetscommentsversionnamespace
objectsarraysstringsnumbersbooleansnull
![Page 47: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/47.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 47
JSON supplant
var template = '<table border="{border}">' +'<tr><th>Last</th><td>{last}</td></tr>' +'<tr><th>First</th><td>{first}</td></tr>' +'</table>';
var data = {"first": "Carl", "last": "Hollywood", "border": 2
};
mydiv.innerHTML = template.supplant(data);
See Listing 3
![Page 48: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/48.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 48
String.prototype.supplant = function (o) { return this.replace(/{([^{}]*)}/g,
function (a, b) { var r = o[b];return typeof r === 'string' ?
r : a; }
); };
Supplant prototype
![Page 49: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/49.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 49
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.
Listings 4 and 5
![Page 50: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/50.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 50
Developer Oversights
Are you verifying your data?How are you handling server errors?Are you using a session?Any ClientSide errors?Did you test your application in every browser?
![Page 51: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/51.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 51
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!
![Page 52: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/52.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 52
Debugging
window.onerror = function(message, url, lineNum) { alert("Error: '" + message + "'. At " + url + ", Line " +
lineNum);} Use onerror and a simple Ajax call to store it in the serverHTTP Traffic Sniffers
Live HTTP HeadersFireBugFiddlerEthereal
![Page 53: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/53.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 53
Sending Error to the server
Ajax RequestGreat if error does not effect page functionality and user supports XHR!
Hidden IframeGreat if error does not effect page functionality and user has problems with XHR
Redirect PageFunctionality is hosed, nothing to do but run!
Set Image SourceGreat if you are sending small amounts of data. Very X-Browser Friendly!
![Page 54: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/54.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 54
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
![Page 55: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/55.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 55
Weight and Performance
Minification Vs. ObfuscationA minifier removes the comments and unnecessary white space from a program.An obfuscator also minifies, but it will also make modifications to the programAny transformation carries the risk of introducing a bug.Easier to minify dynamically generated code than obfuscate it
GZIP15% of original file. Makes Minication and Obfuscation file size modification almost irrelevant.
![Page 56: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/56.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 56
Libraries
![Page 57: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/57.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 57
AJAX Libraries
Many people opt for AJAX libraries. Provides many advantages
Development timeSync / AsyncSerializationMultithread / batchesError handlingLoggingSecurity, encryption, obfuscation
Disadvantages : NONE!Weight?
![Page 58: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/58.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 58
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
![Page 59: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/59.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 59
JavaScript AJAX Libraries
LibrariesPrototype (the most popular, used by RoR)Dojo (used by Open Ajax, XAP, Kabuki)DWR (integrate with Java Struts and JSF)Adobe Spry
ToolkitsMicrosoft Altas (commercial)Open Ajax (IBM, Zimbra, Dojo | open source)Open Laszlo (Flash and Ajax)Tibco GIBackbase
![Page 60: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/60.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 60
JavaScript Libraries
Prototype (http://prototype.conio.net/)Used by RoR, script.aculo.us, Rico, Behaviuor
DWR (http://getahead.ltd.uk/dwr)Commonly used with Java, implements Comet (Reverse Ajax)
Dojo (http://dojotoolkit.org/)The most complete JavaScript toolkit
Spry (http://labs.adobe.com/technologies/spry/)Simple, limited, lightweight, targeting designers
![Page 61: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/61.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 61
Prototype Ajax e.g.
Listing 6Listing 7Listing 8
![Page 62: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/62.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 62
DWR Ajax e.g.
We’ll cover enough of DWR laterCFAjaxajaxCFC
![Page 63: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/63.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 63
Dojo Ajax e.g.
Listing 9Note to self: keep an eye on ATF -- AJAX Toolkit Framework http://www.eclipse.org/atf/
![Page 64: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/64.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 64
Spry Ajax e.g.
Listing 10Listing 11http://www.robgonda.com/dev/spry/blog.cfmhttp://www.robgonda.com/dev/spry/blog2.cfmhttp://www.robgonda.com/dev/spry/blog3.cfm
![Page 65: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/65.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 65
Push for Dojo
Dojo is a Set OfLayered Libraries
![Page 66: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/66.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 66
Dojo UI Utilities
Dojo.ioDojo.htmlDojo.styleDojo.dnd Drag and dropDojo.lfx effects: fade, wipe, explode, highlight, …Dojo.dom
![Page 67: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/67.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 67
Dojo Widgets
What’s A Widget?Encapsulated, reusable rendering andbehaviorHTML+CSS bound by JavaScriptCan be built from markupSubclass of dojo.widget.WidgetUsually derives from dojo.widet.HtmlWidget
![Page 68: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/68.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 68
Dojo Widgets
Rich Text EditorContent PaneSplit PanelTabsFisheye ListSorting TableGoogle/Yahoo MapsTreeDialog/Wizard
![Page 69: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/69.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 69
Dojo Widgets
<script>dojo.require(”dojo.widget.Editor2”);
</script>
<textarea dojoType=”Editor2”minHeight=”40em”relativeImageUrls=”true”toolbarAlwaysVisible=”true”htmlEditing=”true”>...
</textarea>
![Page 70: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/70.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 70
Dojo Ajax Slide
dojo.io.bind() packs a big punchHandles text encodingsAuto-encodes URL componentsSubmits formsSync or asyncCoerces return data
Pluggable back-ends
![Page 71: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/71.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 71
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()
![Page 72: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/72.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 72
Problems
![Page 73: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/73.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 73
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
![Page 74: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/74.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 74
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
![Page 75: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/75.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 75
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
![Page 76: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/76.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 76
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
![Page 77: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/77.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 77
Ajax Request Header
Treat it just like a regular requestValidate:
User-Agent (IE, Mozilla, Gecko)Referer: make sure it was posted from your siteCookie: validate valid sessionVerbs: require post vs. get
![Page 78: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/78.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 78
Ajax Request Header
![Page 79: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/79.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 79
Cross-site restrictions
Impediment to communicate with other domains is good. Cross-domain requests are a security holeThere is no real need for it, Web Services should be consumed by server side scriptingIf really needed, use iframes technique instead
![Page 80: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/80.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 80
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
![Page 81: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/81.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 81
Main Architectures
![Page 82: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/82.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 82
What to transport
DataXMLWDDXSOAPJSON (JavaScript Object Notation)JavaScript Native Objects (one way)
InstructionsJavaScript instructions to be dynamically evaluated using eval()
![Page 83: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/83.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 83
The Magic Functions
Traditionally you would use DOMCross browser hellcreateNode is a pain
innerHTMLFor modifying content
eval()Dynamic expression evaluation
![Page 84: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/84.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 84
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);
![Page 85: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/85.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 85
Design Patterns
![Page 86: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/86.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 86
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
![Page 87: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/87.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 87
MVC Diagram
![Page 88: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/88.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 88
MVC Data Flow
![Page 89: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/89.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 89
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
![Page 90: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/90.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 90
Browser history
iframe techniqueFirefox
Frame in html Changes are storedFrame in DOM Changes are not stored
IEAll Changes are stored
SafariNo Changes are stored
![Page 91: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/91.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 91
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
![Page 92: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/92.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 92
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.
![Page 93: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/93.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 93
Degradable Sites
What if JavaScript is disabled?Href’s + onClicksReuse the same logic, just change the views.Model Glue Example
![Page 94: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/94.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 94
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
![Page 95: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/95.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 95
Futures Extensions
Flash SVGCanvasJITOff-line
![Page 96: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/96.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 96
Do’s and Don’ts
Do’sUse Ajax!Plan your application, more thought than standard web sitesKeep your business logic in the serverGZIP data transmissionProvide progress indicator and visual feedback. The user is used to page refreshesDesign for error, not only for success
![Page 97: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/97.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 97
Do’s and Don’ts
Dont’sUse Ajax for the sake of Ajax.Assume DOM or JavaScript calls are universal. Every browser is different, furthermore in different OS.Modify elements unexpectedly. Users are used to trigger changes.Break the back button and direct linksFetch important content that has to be indexed by search enginesPerform some server action without a proper visual representationOveruse XML. XML is heavy and JavaScript objects or JSON improve performance.
![Page 98: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/98.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 98
ColdFusion
![Page 99: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/99.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 99
ColdFusion Frameworks
Mach II (Ben Edwards and Hal Helms)Model Glue 1.1 / 2.0 (Joe Rinehart)Fusebox (Steve Nelson and GabeRoffman)SAM (Simon Horwith)ColdBox (Luis Majano)
![Page 100: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/100.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 100
ColdFusion AJAX Libraries
ajaxCFCOOP, CF extends objects, Design PatternsBuilt-in error handling, security, debuggingIntegrates with Model Glue 1.1 / 2.0, Mach II
CFAjaxFirst Ajax CF Library
JSMXClient side library only
Simple Remote Scripting (SRS)Uses iframes
WddxAjax
![Page 101: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/101.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 101
Model Glue
An Implicit Invocation framework simplifying use of the Model View Controller design pattern in ColdFusion applications.
A framework encouraging clear separation of Model, View, and Controller
Written by Joe Rinehart
Released under the Lesser GPL, meaning that it's free to download, use, and alter.
![Page 102: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/102.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 102
ajaxCFCAjaxCFC is a Coldfusion/JavaScript framework meant to speed up ajax application development and deployment by providing developers seamless integration between JavaScript and ColdFusion, and providing built-in functions, such as security and debugging, to quickly adapt to any type of environment and helping to overcome cross-browser compatibility problems.
Programming with ajaxCFC involves extending components and creating your own ajax façades.
Intergration with Model-Glue and MachII, two of the most popular MVC frameworks widely used by the ColdFusion community.
Works with ColdFusion MX 6.0, 6,1, 7.0, 7.1 and Blue Dragon.
Automatically handles complex object transmitted from the client to the server and vice versa.
Licensed under the Apache License Version 2.0, by Rob Gonda.
![Page 103: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/103.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 103
Switch to Live Demos
Simple Echo / Traditional AjaxModel Glue Ajax EchoModel Glue Ajax Contact ManagerModel Glue Ajax / XMLSockets Contact ManagerMach II Contact ManagerMVC AJAX RSS ReaderSpry AJAX RSS Reader
![Page 104: Ajax for ColdFusion Developers](https://reader038.vdocument.in/reader038/viewer/2022102901/555c25e7d8b42a0b418b4cca/html5/thumbnails/104.jpg)
6/27/2006 Rob Gonda :: www.robgonda.com 104
Thank You
Questions / Comments?Blog: http://www.robgonda.comCorp: http://www.ichameleongroup.comemail: [email protected]