Ajax 101 for CF Programmers Randy Brown – Michigan State University

What is AJAX? A synchronous J avaScript A nd X ML A nice way to create a state-full like connection in a stateless environment. A good way to keep application logic on the server side without using JSP. In regards to a UI it makes the webpage more usable and interaction more responsive.

AJAX Definition Summary 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.

How does AJAX work? Before AJAX can be invoked you must make your traditional HTML page request. AJAX uses xmlHttpRequest to make what I call a SIDEWAYS request to the server. The sideways request can be done via JavaScript or VBScript.

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.

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.

How does AJAX work? Step 3 – SIDEWAYS Request to Server Note earlier I coined the term SIDEWAYS request to mean an xmlHttpRequest

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…

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.

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.

Tools needed to make AJAX A TCP/IP port 80 sniffer like serviceCapture (kevinlangdon.com/serviceCapture/ ) HTML Editor like DreamWeaver 8 Javascript Editor – DreamWeaver 8 A good Javascript Reference like

AJAX Simple Example using CFMX & JavaScript This simple application will use AJAX to communicate with a CFM file to determine if a username is already In this example I will be using DreamWeaver 8 and serviceCapture to explain what’s going on.

Examples of AJAX websites Google Suggest ( ) Google Maps ( maps.google.com ) maps.google.com Netfix top 100 ( Instant Domain Name Search (instantdomainsearch.com)instantdomainsearch.com

What is ajaxCFC AJAX model/framework implementation based upon the CFMX language and components to promote the RAD (Rapid Application Development) philosophy. Downloaded from Developed by Rob Gonda Licensed under the Apache License Version 2.0 Works with ColdFusion MX 6.0, 6,1, 7.0 and Blue Dragon

ajaxCFC Definition Summary from Rob Gonda “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.”

How does ajaxCFC work? Step 0 – Do Once or as needed PREPARE your server environment Step 1 download and install the libraries on the server Step 2 Fix your mappings to the files Step 3 extend your components

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.

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.

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

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

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.

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

ajaxCFC Simple Example 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 In this example I will be using DreamWeaver 8 and serviceCapture to explain what’s going on.

ajaxCFC Examples Weather example ( cfm) cfm Simple State Suggest ( suggest/) suggest/ Fidelity Project ( homesold.fidelitylabs.com/ ) homesold.fidelitylabs.com/ Car Finder using Google earth ( )

AJAX vs. ajaxCFC? AJAX is like straight HTML or the base to web development. In comparison CFML is like an abstraction of HTML because CF developers write in CFMX but their applications deliver HTML to browsers. Therefore ajaxCFC is a model/framework/abstraction that works on with principles of AJAX.

Why Did I pick ajaxCFC RAD (Rapid Application Development) I’m a CF Programmer who likes to use webServices and components I feel this is a simpler approach than all of the other abstractions and pure AJAX.

QUESTIONS

Credits Rob Gonda – ajaxCFC Cameron Adams - Jumping on the AJAX bandwagon presentation CFAjax –