Your SlideShare is downloading. ×
0
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
Ajax for-coldfusion-developers
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

911

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
911
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
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. INTRO12/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. Ajax12/07/2006 Rob Gonda :: www.robgonda.com 4
  • 5. What is AJAX? (tech view)Asynchronous data retrieval usingXMLHttpRequest (or not)Data interchange and manipulation usingXML (or not)Dynamic display and interaction usingDocument Object Model - DOM (or not)JavaScript binding everything togetherFlash Remoting for JavaScript? Not really,but close 12/07/2006 Rob Gonda :: www.robgonda.com 5
  • 6. Other remote scriptingHidden 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 6
  • 7. What does it do for us?Make server hits without fullrequest/response cycleWhy? Reduce server load Dramatic improvement in user experience Reduced load on browser/script 12/07/2006 Rob Gonda :: www.robgonda.com 7
  • 8. Two TypesAjax On The Edges Ajax Widgets Enhance your current site Add usability DegradableRIA Single-page applications Replacement for Desktop Applications 12/07/2006 Rob Gonda :: www.robgonda.com 8
  • 9. Classic request flow12/07/2006 Rob Gonda :: www.robgonda.com 9
  • 10. Partial UI Updates12/07/2006 Rob Gonda :: www.robgonda.com 10
  • 11. Rich / Thin Client12/07/2006 Rob Gonda :: www.robgonda.com 11
  • 12. AlternativesFlash Features support for vector and raster graphics, a scripting language called ActionScript and bidirectional streaming of audio and videoFlex Declarative RIA development to build RIA’s using the Flash PlatformLaszlo 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. BASICS12/07/2006 Rob Gonda :: www.robgonda.com 13
  • 14. XMLHttpRequest (XHR)A JavaScript Class that lets you makeasynchronous HTTP requests fromJavaScriptAllows to kick off HTTP requests in thebackgroundA call back JavaScript function is invokedat each state of the HTTP request andresponse 12/07/2006 Rob Gonda :: www.robgonda.com 14
  • 15. XHR Methods12/07/2006 Rob Gonda :: www.robgonda.com 15
  • 16. XHR Properties12/07/2006 Rob Gonda :: www.robgonda.com 16
  • 17. Xml, wddx, json, soapXML: Extensible Markup Language is heavyWDDX: Web Distributed Data Exchange is structured XML, native for ColdFusionJSON: JavaScript Object Notation lightweight computer data interchange formatSOAP: Service-Oriented architecturalpattern successor of XML RPC 12/07/2006 Rob Gonda :: www.robgonda.com 17
  • 18. JSONA 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 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 CFCfjson: http://jehiah.com/projects/cfjson/ UDF Serializes and de-serializes objects Missing de-serializing a recordsetjson-serializer:http://cfopen.org/projects/json-serializer/ CFC Online serializes. 12/07/2006 Rob Gonda :: www.robgonda.com 20
  • 21. Testing JavaScript is Not EasyBrowsers Firefox, Mozilla, Internet Explorer, Opera, Safari, etc Multiple Versions (Main releases, betas, etc) Different Security Settings Different Browser Plug-insDifferent Operating Systems and PatchesDifferent CPUs, RAM, Memory, MultiplePrograms running, Multiple browsers open, etc! 12/07/2006 Rob Gonda :: www.robgonda.com 21
  • 22. DebuggingHTTP Traffic Sniffers Live HTTP Headers FireBug Fiddler Ethereal Service Capture 12/07/2006 Rob Gonda :: www.robgonda.com 22
  • 23. More on DebuggingUse the DOM Inspector to observe the currentstate of your page Use MODI for easier live inspection and DOM manipulationUse the JavaScript console / firebug to check forerrorsUse MochiKit logging and interpreterUse Venkman or Microsoft Script Debugger totroubleshoot behaviorial problems 12/07/2006 Rob Gonda :: www.robgonda.com 23
  • 24. Libraries12/07/2006 Rob Gonda :: www.robgonda.com 24
  • 25. AJAX LibrariesMany people / everyone opt for AJAX libraries.Provides many advantages Development time Sync / Async Serialization Multithread / batches Error handling Logging Security, encryption, obfuscationDisadvantages : NONE! 12/07/2006 Rob Gonda :: www.robgonda.com 25
  • 26. Use a FrameworkBrowsers are different across key areas: Event registration and event handling HTTP request object implementation Document Object Model (DOM) API.Multithreading, handle request queue or batchSerializationError handlingLoggingSecurity, 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 LibrariesDojo (http://dojotoolkit.org/) used by Open Ajax, XAP, Kabuki Lack of documentationDWR (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, BehaviuorSpry (http://labs.adobe.com/technologies/spry/) Simple, limited, lightweight, targeting designers 12/07/2006 Rob Gonda :: www.robgonda.com 28
  • 29. JavaScript LibrariesjQuery (http://jquery.com/) light-weight, extensible, community involvementYUI (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 Slidedojo.io.bind() packs a big punch Handles text encodings Auto-encodes URL components Submits forms Sync or async Coerces return dataPluggable back-ends 12/07/2006 Rob Gonda :: www.robgonda.com 30
  • 31. Dojo other IOdojo.require(”dojo.io.ScriptSrcIO”); Cross-domain and JSON-Pdojo.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. Problems12/07/2006 Rob Gonda :: www.robgonda.com 32
  • 33. Potential ProblemsBreaks back button supportURLs dont change as state changesSEO / Search Engine IndexingCross Browser Issues can be a painCross-domain requests (SOA, WS)Viewable Source CodeClient side business logicServer Load if not properly codedConcurrency 12/07/2006 Rob Gonda :: www.robgonda.com 33
  • 34. Security Concerns (I)JavaScript applications are easily decodedand reengineeredOn-demand (server side) loading will nothelp if you load your entire application;keep business logic on serverObfuscation makes it more difficult, butcan also generate bugs 12/07/2006 Rob Gonda :: www.robgonda.com 34
  • 35. Security Concerns (II)XMLHttpRequest is nothing more than a normalform submission Authentication elements Session cookies Blank Referrer by default You should manually set this header in your APIGet / Post Verbs are sent in plain text Consider encrypting requests and obfuscating responsesDevelopers forget to send sensitive data overSSL 12/07/2006 Rob Gonda :: www.robgonda.com 35
  • 36. Security RulesDont trust user inputDo not trust client side validationDo 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 sideDo 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 36
  • 37. Do not expose your business logicMost important aspect for EnterpriseApplicationsAjax uses JavaScript, but it does not have toreside in the clientUse remote calls only as a transport layerTransport state and commands, not raw dataMVC 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 Architectures12/07/2006 Rob Gonda :: www.robgonda.com 38
  • 39. What to transportData 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 FunctionsTraditionally you would use DOM Cross browser hell createNode is a paininnerHTML For modifying contenteval() Dynamic expression evaluation 12/07/2006 Rob Gonda :: www.robgonda.com 40
  • 41. The eval() functionDynamic 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 Patterns12/07/2006 Rob Gonda :: www.robgonda.com 42
  • 43. MVCModel-view-controller (MVC) is a softwarearchitecture that separates an applicationsdata model, user interface, and controllogic into three distinct components.Clear distinction between the presentationlayer and business logic 12/07/2006 Rob Gonda :: www.robgonda.com 43
  • 44. MVC Diagram12/07/2006 Rob Gonda :: www.robgonda.com 44
  • 45. MVC Data Flow12/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 historyiframe 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 buttonNot needed for Ajax snippets or widgets,but imperative for Ajax applicationsThe problem is not new; Flash applicationsalways faced the sameNo history means no bookmarks, nosharing, no back buttonUse frameworks 12/07/2006 Rob Gonda :: www.robgonda.com 48
  • 49. Fixing the back buttonWhen a user hits the back button, thebrowser typically returns a cached versionof the previous page. If the HTTPresponse headers have marked the pageas not cacheable, a new request is made.In most browsers, if a fragment identifierexists (#) and the user clicks the backbutton, history pulls the previous pagefrom the browser’s cache. 12/07/2006 Rob Gonda :: www.robgonda.com 49
  • 50. Degradable SitesWhat if JavaScript is disabled?Href’s + onClicksReuse the same logic, just change theviews.jQuery Example 12/07/2006 Rob Gonda :: www.robgonda.com 50
  • 51. Extending AjaxFlash plays friendly with AjaxThe Flash Platform does not have thebrowser limitationsDojo uses Flash for persistent storageFlash 8’s IO classes have been used forfile transfersRob uses Flash for XML Socketsmessaging services 12/07/2006 Rob Gonda :: www.robgonda.com 51
  • 52. Futures ExtensionsFlashSVGCanvasJITOff-line 12/07/2006 Rob Gonda :: www.robgonda.com 52
  • 53. ColdFusion12/07/2006 Rob Gonda :: www.robgonda.com 53
  • 54. ColdFusion AJAX LibrariesAjaxCFC OOP, CF extends objects, Design Patterns Built-in error handling, security, debugging, logging Integrates with Model Glue 1.1 / 2.0, Mach IICFAjax First Ajax CF LibraryJSMX Client side library onlySimple Remote Scripting (SRS) Uses iframesWddxAjax 12/07/2006 Rob Gonda :: www.robgonda.com 54
  • 55. Now Let’s codeAjaxcfc Echo, complexObjects, formValidation1, modelglue, machiidojo.0.4.1 IO, widgetsJquery Contactmanager, formPost, history, tool tips, rating, thickboxPrototypeSpryXHR 12/07/2006 Rob Gonda :: www.robgonda.com 55
  • 56. Thank YouQuestions / Comments?Blog: http://www.robgonda.comCorp: http://www.ichameleongroup.comemail: rob@robgonda.com 12/07/2006 Rob Gonda :: www.robgonda.com 56

×