Your SlideShare is downloading. ×
0
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
Recommending a Strategy
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

Recommending a Strategy

293

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
293
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
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 101 for CF Programmers Randy Brown – Michigan State University [email_address]
  • 2. What is AJAX? <ul><li>A synchronous J avaScript A nd X ML </li></ul><ul><li>A nice way to create a state-full like connection in a stateless environment. </li></ul><ul><li>A good way to keep application logic on the server side without using JSP. </li></ul><ul><li>In regards to a UI it makes the webpage more usable and interaction more responsive. </li></ul>
  • 3. AJAX Definition Summary <ul><li>AJAX is a Web development technique for creating interactive web applications that use the DOM (Document Object Model) to interact with various backend server technologies without refreshing the browser . </li></ul>
  • 4. How does AJAX work? <ul><li>Before AJAX can be invoked you must make your traditional HTML page request. </li></ul><ul><li>AJAX uses xmlHttpRequest to make what I call a SIDEWAYS request to the server. </li></ul><ul><li>The sideways request can be done via JavaScript or VBScript. </li></ul>
  • 5. How does AJAX work? Step 1 – HTML Browser Request Basically this is showing the user typing in a web address and pressing ENTER or GO.
  • 6. How does AJAX work? Step 2 – HTML Server to Browser Response The web server sends web-page to client; this happens on all web server platforms.
  • 7. How does AJAX work? Step 3 – SIDEWAYS Request to Server Note earlier I coined the term SIDEWAYS request to mean an xmlHttpRequest
  • 8. How does AJAX work? Step 4 – Server responds to my SIDEWAYS request Note how small the data response is. I’m displaying how the server only sends a piece of data back and not an entire web page with header and etc…
  • 9. How does AJAX work? Step 5 –SIDEWAYS request data is added and displayed in the client browser. This is a complete AJAX request. Programmers will have to use JavaScript and CSS to control display and or how you present the data returned if at all.
  • 10. How does AJAX work? Step 6 – SUMMARY Complete AJAX Request Graphically this is easy to understand. Please download serviceCapture to get a full view of what really happened. Lets build a CRUDE and simple example using CF as our server technology.
  • 11. Tools needed to make AJAX <ul><li>A TCP/IP port 80 sniffer like serviceCapture ( kevinlangdon.com/serviceCapture / ) </li></ul><ul><li>HTML Editor like DreamWeaver 8 </li></ul><ul><li>Javascript Editor – DreamWeaver 8 </li></ul><ul><li>A good Javascript Reference like www.devguru.com </li></ul>
  • 12. AJAX Simple Example using CFMX & JavaScript <ul><li>This simple application will use AJAX to communicate with a CFM file to determine if a username ( [email_address] ) is already taken. </li></ul><ul><li>In this example I will be using DreamWeaver 8 and serviceCapture to explain what’s going on. </li></ul>
  • 13. Examples of AJAX websites <ul><li>Google Suggest ( www.google.com/webhp?complete=1&hl=en ) </li></ul><ul><li>Google Maps ( maps.google.com ) </li></ul><ul><li>Netfix top 100 ( www.netflix.com/Top100 ) </li></ul><ul><li>Instant Domain Name Search ( instantdomainsearch.com ) </li></ul>
  • 14. What is ajaxCFC <ul><li>AJAX model/framework implementation based upon the CFMX language and components to promote the RAD (Rapid Application Development) philosophy. </li></ul><ul><li>Downloaded from http://www.robgonda.com/blog/projects/ajaxcfc/ </li></ul><ul><li>Developed by Rob Gonda </li></ul><ul><li>Licensed under the Apache License Version 2.0 </li></ul><ul><li>Works with ColdFusion MX 6.0, 6,1, 7.0 and Blue Dragon </li></ul>
  • 15. ajaxCFC Definition Summary from Rob Gonda <ul><li>“ ajaxCFC is a ColdFusion 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.” </li></ul>
  • 16. How does ajaxCFC work? Step 0 – Do Once or as needed <ul><li>PREPARE your server environment </li></ul><ul><li>Step 1 download and install the libraries on the server </li></ul><ul><li>Step 2 Fix your mappings to the files </li></ul><ul><li>Step 3 extend your components </li></ul>
  • 17. How does ajaxCFC work? Step 1 – HTML Browser Request for CFM page Basically this is showing the user typing in a web address and pressing ENTER or GO.
  • 18. How does ajaxCFC work? Step 2 – HTML Server to Browser Response The web server send web-page to client; this happens on all web server platforms. However in the CFMX world the request would get routed to the CFMX application server before the page is returned to the client.
  • 19. How does ajaxCFC work? Step 3 – SIDEWAYS Request to Server In the case of ajaxCFC request are made via JavaScript using the infamous utils.js and it’s DWR (Direct Web Remoting) commands. Read more about DWR at http://getahead.ltd.uk/dwr/index
  • 20. How does ajaxCFC work? Step 4 – Server responds to my SIDEWAYS request In the case of ajaxCFC the request is returned as pure JavaScript code to the callback handler (instead of XML or JSON) to vastly improve performance
  • 21. How does ajaxCFC work? Step 5 –SIDEWAYS request data is added/displayed in the browser This is a complete ajaxCFC request. CF programmers will still have to use JavaScript and CSS to control display and or how you present the data returned if at all.
  • 22. How does ajaxCFC work? Step 6 – SUMMARY Complete ajaxCFC Request Graphically the ajaxCFC model resembles the AJAX model. Please download serviceCapture to get a full view of what really happened. Lets build a CRUDE example
  • 23. ajaxCFC Simple Example <ul><li>This simple example will use ajaxCFC to request a variable from a server component and return it back to the client without refreshing the browser </li></ul><ul><li>In this example I will be using DreamWeaver 8 and serviceCapture to explain what’s going on. </li></ul>
  • 24. ajaxCFC Examples <ul><li>Weather example ( http://www.bizwerk.net/ajaxcfc/examples/zipcode/indexw.cfm ) </li></ul><ul><li>Simple State Suggest ( http://www.robgonda.com/blog/projects/ajaxcfc/examples/suggest/ ) </li></ul><ul><li>Fidelity Project ( http:// homesold.fidelitylabs.com/ ) </li></ul><ul><li>Car Finder using Google earth ( http:// www.dudewheresmyusedcar.com/ ) </li></ul>
  • 25. AJAX vs. ajaxCFC? <ul><li>AJAX is like straight HTML or the base to web development. </li></ul><ul><li>In comparison CFML is like an abstraction of HTML because CF developers write in CFMX but their applications deliver HTML to browsers. </li></ul><ul><li>Therefore ajaxCFC is a model/framework/abstraction that works on with principles of AJAX. </li></ul>
  • 26. Why Did I pick ajaxCFC <ul><li>RAD (Rapid Application Development) </li></ul><ul><li>I’m a CF Programmer who likes to use webServices and components </li></ul><ul><li>I feel this is a simpler approach than all of the other abstractions and pure AJAX. </li></ul>
  • 27. QUESTIONS
  • 28. Credits <ul><li>Rob Gonda – ajaxCFC - http://www.robgonda.com/blog/index.cfm/ajaxCFC </li></ul><ul><li>Cameron Adams - Jumping on the AJAX bandwagon presentation </li></ul><ul><li>CFAjax – www.indiankey.com/cfajax </li></ul>

×