Step Outside the Box

1
Step Outside the Box Part II

• ColdFusion and Ajax

2
Theo Rushin Jr

• I am an avid snowboarder in the winter and
  paintball player during the other seasons. During
  the week I work as an independent consultant for
  hire.
• I have spent the past 6 years establishing
  myself as an expert Coldfusion and Flash Rich
  Internet Application Developer and Trainer.
  During my 6 years of web application development
  I have created and supported many enterprise-wide
  web-based applications I have worked on various
  development efforts using technologies such as
  ColdFusion, Flash Actionscript, and Ajax.

I can be reached at rushint_at_yahoo.com or on the
snow
3
ColdFusion and Ajax

• What Is AJAX?

Asynchronous JavaScript and XML
AJAX itself is not a technology but a collection
of existing technologies used in such a way to
provide a more responsive, interactive, and Rich
Internet Application-like experience. The key
technology used in AJAX is the XMLHttpRequest
object. It provides the capability to transmit
data to and from the server without refreshing
the entire page. The page then communicates with
the browsers Document Object Model (DOM) to
update the page.
4
ColdFusion and Ajax

• What Is AJAX? (continued)

• Here are the basic technologies involved in Ajax
  applications
• HTML is used to build Web forms and identify
  fields for use in the rest of your application.
• JavaScript code is the core code running Ajax
  applications and it helps facilitate
  communication with server applications using the
  XMLHTTPRequest object.
• DHTML, or Dynamic HTML, helps you update your
  forms dynamically. You'll use div, span, and
  other dynamic HTML elements to mark up your HTML.
  
• DOM, the Document Object Model, will be used
  (through JavaScript code) to work with both the
  structure of your HTML and (in some cases) XML
  returned from the server.

5
ColdFusion and Ajax

• Is Ajax a Web 2.0 technology?

Well Yes and No
6
ColdFusion and Ajax

• Is Ajax a Web 2.0 technology?

No because
Ajax is nothing new and has been around for
years. The XMLHttpRequest object was introduced
in the Internet Explorer browser back in 1999.
Companies such as Google, Netflix, and Yahoo have
recently re-ignited the interest in using these
technologies. Take a look at these
sites http//maps.google.com/ http//www.netflix
.com/Default
7
ColdFusion and Ajax

• Is Ajax a Web 2.0 technology?

Yes because
The technologies that makeup Ajax play an
integral part in delivering sites that are very
interactive, responsive, and deliver a Rich
Internet Application-like experience. Check out
these sites http//web2.wsj2.com/the_best_web_20
_software_of_2005.htm
8
(No Transcript)
9
ColdFusion and Ajax

• Q What are Mashups?

A
A mashup is a website or web application that
seamlessly combines content from more than one
source into an integrated experience. Content
used in mashups is typically sourced from a third
party via a public interface or API. Other
methods of sourcing content for mashups include
Web feeds (e.g. RSS or Atom) and JavaScript.
Excerpt from http//en.wikipedia.org/wiki/Mashu
p_(web_application_hybrid)
10
ColdFusion and Ajax

• Q How can I integrate AJAX into my ColdFusion
  apps?

A Use CFAJAX.
CFAjax is an AJAX implementation for ColdFusion
applications. It allows your ColdFusion pages to
communicate with ColdFusion methods using
JavaScript. CFAjax comes with easy to use
JavaScript and ColdFusion API methods that help
marshal the response between your CF methods and
client page. CFAjax is an open source product,
you are free to use and distribute CFAjax with
your applications. The home for this tools
is http//www.indiankey.com/cfajax/
11
ColdFusion and Ajax

• Q What browsers support CFAJAX?

A CFAJAX works on the following browsers
CFAJAX currently works on the following
browsers Firefox 1.0 I.E. 5.0 Mozilla 1.0
Netscape 7.0 Safari 1.2
12
ColdFusion and Ajax

• Q So, how do I use CFAJAX?

A
After you have downloaded, installed, and
configured the tool you may begin to use the
following methods to make AJAX calls.
13
ColdFusion and Ajax
resortViewer.cfm
function getStateInfo() var stateName
DWRUtil.getValue("state") DWREngine._execute(_c
fscriptLocation, null, getStateInfo', stateName,
getStateInfo_result)

• JavaScript function called when user clicks on an
  element on the page.
• getStateInfo() Javascript function that is
  called on the onClick event.
• DWRUtil.getValue CFAJAX method that returns the
  selected value in a form element.
• DWREngine._execute CFAJAX method that calls the
  server-side function passing the state variable.
• _cfscriptLocation A pointer to the location of
  the server-side ColdFusion template page.
• null Default value
• getStateInfo CF function that will be executed
• stateName Parameter being passed to CF function
• getStateInfo_result JavaScript callback function

14
ColdFusion and Ajax
resortViewer.cfm
function getStateInfo_result(result) var
divText for(i 0 I lt result.length
i) divText divText resulti.resortName
ltBR /gt document.getElementById(resortLi
sting").innerHTML divText
JavaScript callback function called after the
server-side function returns its results. You use
this function to process the data that was
returned from the CF function.
15
ColdFusion and Ajax
resorts.cfm
ltcffunction namegetStateInfo"gt ltcfargument
name"stateName" required"yes"
type"string"gt ltcfquery nameqryResult
datasourceskiresorts"gt SELECT FROM
Resort WHERE state stateName lt/cfquerygt
ltcfreturn qryResult gt lt/cffunctiongt
ColdFusion function used to retrieve all records
containing the passed in stateName.
16
ColdFusion and Ajax

• Q What other data types can I return?

A
CFAJAX will allow you to return a variety of data
types including Strings Numerics Booleans Arrays
Structures CFCs
17
ColdFusion and Ajax
StringThe return for a ColdFusion string is a
JavaScript string.
CF ltreturn HELLOgt JS alert(result THEO)
18
ColdFusion and Ajax
NumericNumerics returned from ColdFusion become
JavaScript strings. If you return a numeric and
then use the operator in JavaScript to try to
add something to it, JavaScript will join the
two. You must first convert the returned value in
JavaScript to a number first (e.g. var myCalc
return 23)
CF ltreturn 1962gt JS var myAge return 2006
19
ColdFusion and Ajax
BooleanBooleans are returned as a YES or NO
(all CAPS) for true or false. You may then need
to convert to JavaScript booleans.
CF ltreturn truegt JS if(return YES)
alert(Yes it is true) else
alert(Completely false)
20
ColdFusion and Ajax
ArrayOnly single dimension arrays are supported
by CFAJAX. While ColdFusion arrays start at index
1, JavaScript arrays start at index 0.
CF ltcfset myArray ArrayNew()gt ltreturn
myArraygt JS for(i0 i lt result.length i)
alert(resulti)
21
ColdFusion and Ajax
StructureA CF struct comes back as an array of
objects. Each object has two properties, KEY and
VALUE (note the CAPS the key itself is also in
CAPS as in the example), representing the key and
value of a member in the CF struct the array
contains each of those members e.g.
CFltcfset mystruct StructNew()gtltcfset
mystruct.mynumber 1gtltcfset mystruct.mystring
"hello"gtltcfreturn mystructgt JStheStructNumberKey
return0.KEY // returns "MYNUMBER"theStructNu
mberValue return0.VALUE // returns
"1"theStructStringKey return1.KEY // returns
"MYSTRING"theStructStringValue return1.VALUE
// returns "hello"
22
ColdFusion and Ajax
QueryThe JS object that represents a CF query is
an array of row objects, with each column as a
property of each object. E.G. a cfquery that
returns columns ID, NAME, DATE, SIZE and has 10
rows would become a JS array of length 10, with
each element an object with properties ID, NAME,
DATE, SIZE (note the CAPS - all column names are
capitalized in the JS object)
CF ltcfquery nameqryResult
datasourceskiresorts"gt SELECT FROM
Resort WHERE state stateName lt/cfquerygt
ltcfreturn qryResult gt JS myFirstRowID
result0.ID mySecondRowDate
result1.DATE etc.
23
ColdFusion and Ajax
CFCCFC properties declared in THIS return
exactly the way a struct does (including CAPS for
key names)
CFltcfset THIS.MyNumber 1gtltcfset THIS.MyString
"Whatever"gtltcfreturn THISgt JStheCFCMyNumberKey
return0.KEY // returns "MYNUMBER"theCFCMyNum
berValue return0.VALUE // returns
"1"theCFCMyStringKey return1.KEY // returns
"MYSTRING"theCFCMyStringValue return1.VALUE
// returns "whatever"
24
ColdFusion and Ajax

• Q What kind of things should I watch out for?

A
Yes, there are a few issues you need to know when
using CFAJAX. First is the fact that CFAJAX will
freeze if you attempt to return a multiline
string containing line breaks. You can easily
work around that by using the ReReplace function
to remove line breaks.
ltcfset MyReturn ReReplace(MyReturn,"CHR(10)C
HR(13)","","ALL")gt
25
ColdFusion and Ajax
Secondly should you wish to use the CFSAVECONTENT
tag in your ColdFusion function, you must enclose
your output in CFOUTPUT tags. This is because
CFAJAX contains the following tag which disables
all output except those enclosed in CFOUTPUT tags.
ltcfsetting enablecfoutputonly"yes"gt
Another solution would be to include a CFSETTING
tag before and after your block of code, setting
the enablecfoutputonly attribute off and on
respectively.
ltcfsetting enablecfoutputonly"no"gt ... Your
code here ... ltcfsetting enablecfoutputonly"yes"
gt
26
ColdFusion and Ajax
Thirdly (if thats a word) you may face
cross-domain issues when trying to access
resources on a different server from your
ColdFusion function. By default, CFAJAX uses the
HTTP POST method to pass and retrieve data. Doing
so will cause the browser to display a Security
violation popup. You can resolve the issue by
using the HTTP GET method by using the following
CFAJAX method.
DWREngine.setVerb("GET") //default is POST
27
ColdFusion and Ajax
Lastly we can handle errors by including the
following code
Add the following code to the ColdFusion page
being used by you CFAJAX code.
ltcferror template"error.cfm" type"exception"gt
Add the following code to the error page
specified above.
ltcfsetting showdebugoutput"false"gt ltcfoutputgtaler
t("JSStringFormat("Error" Error.Diagnostics)"
)lt/cfoutputgt
28
ColdFusion and Ajax

• Q Can we look at some code?

A
Yes! Its Show And Tell
29
ColdFusion and Ajax

• Q What CFAJAX resources are there?

http//www.indiankey.com/cfajax/ http//cfdj.sys-c
on.com/read/138966.htm http//www.fusionauthority.
com/Techniques/4593-Using-AJAX-with-ColdFusion-Par
t-I http//groups.yahoo.com/group/cfajax/