Transcript Recommending a Strategy

Ajax 101 for CF Programmers
Randy Brown – Michigan State University
[email protected]
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 ([email protected]) 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 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 crossbrowser 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.c
fm)
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