Recommending a Strategy

Ajax 101 for CF Programmers Randy Brown – Michigan State Universitybrownra@coldfusion.org

What is AJAX? Asynchronous JavaScript And XML 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

www.devguru.com

AJAX Simple Example using CFMX & JavaScript This simple application will use AJAX to

communicate with a CFM file to determine if a username (example@widgets.com) is already taken.

In this example I will be using DreamWeaver 8 and serviceCapture to explain what’s going on.

Examples of AJAX websites Google Suggest (www.google.com/webhp?

complete=1&hl=en) Google Maps (maps.google.com) Netfix top 100 (www.netflix.com/Top100) Instant Domain Name Search

(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 http://www.robgonda.com/blog/projects/ajaxcfc/

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 Summaryfrom 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 http://getahead.ltd.uk/dwr/index

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

(http://www.bizwerk.net/ajaxcfc/examples/zipcode/indexw.cfm)

Simple State Suggest (http://www.robgonda.com/blog/projects/ajaxcfc/examples/suggest/)

Fidelity Project (http://homesold.fidelitylabs.com/) Car Finder using Google earth

(http://www.dudewheresmyusedcar.com/ )

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 -

http://www.robgonda.com/blog/index.cfm/ajaxCFC Cameron Adams - Jumping on the AJAX

bandwagon presentation CFAjax – www.indiankey.com/cfajax