Your SlideShare is downloading. ×
Ajax for ColdFusion Developers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Ajax for ColdFusion Developers

848
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
848
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Ajax for ColdFusion Developers
  • 2. INTRO 12/07/2006 Rob Gonda :: www.robgonda.com 2
  • 3. What is Ajax? 12/07/2006 Rob Gonda :: www.robgonda.com 3
  • 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
  • 9. Classic request flow 12/07/2006 Rob Gonda :: www.robgonda.com 9
  • 10. Partial UI Updates 12/07/2006 Rob Gonda :: www.robgonda.com 10
  • 11. Rich / Thin Client 12/07/2006 Rob Gonda :: www.robgonda.com 11
  • 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
  • 13. BASICS 12/07/2006 Rob Gonda :: www.robgonda.com 13
  • 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
  • 15. XHR Methods 12/07/2006 Rob Gonda :: www.robgonda.com 15
  • 16. XHR Properties 12/07/2006 Rob Gonda :: www.robgonda.com 16
  • 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
  • 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 19
  • 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
  • 24. Libraries 12/07/2006 Rob Gonda :: www.robgonda.com 24
  • 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
  • 32. Problems 12/07/2006 Rob Gonda :: www.robgonda.com 32
  • 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
  • 38. Main Architectures 12/07/2006 Rob Gonda :: www.robgonda.com 38
  • 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
  • 42. Design Patterns 12/07/2006 Rob Gonda :: www.robgonda.com 42
  • 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
  • 44. MVC Diagram 12/07/2006 Rob Gonda :: www.robgonda.com 44
  • 45. MVC Data Flow 12/07/2006 Rob Gonda :: www.robgonda.com 45
  • 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
  • 52. Futures Extensions Flash SVG Canvas JIT Off-line 12/07/2006 Rob Gonda :: www.robgonda.com 52
  • 53. ColdFusion 12/07/2006 Rob Gonda :: www.robgonda.com 53
  • 54. 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 12/07/2006 Rob Gonda :: www.robgonda.com 54
  • 55. 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 12/07/2006 Rob Gonda :: www.robgonda.com 55
  • 56. Thank You Questions / Comments? Blog: http://www.robgonda.com Corp: http://www.ichameleongroup.com email: rob@robgonda.com 12/07/2006 Rob Gonda :: www.robgonda.com 56