Step Outside the Box – Part II

ColdFusion and Ajax

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@yahoo.com or on the snow

ColdFusion and Ajax

What Is AJAX?

Asynchronous JavaScript and XMLAJAX 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 browser’s Document Object Model (DOM) to update the page.

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.

ColdFusion and Ajax

Is Ajax a Web 2.0 technology?

Well … Yes and No

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

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

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/Mashup_(web_application_hybrid)

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/

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+

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.

ColdFusion and Ajax

function getStateInfo() {

var stateName = DWRUtil.getValue("state");

DWREngine._execute(_cfscriptLocation, 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.

o _cfscriptLocation: A pointer to the location of the server-side ColdFusion template page.o null: Default valueo getStateInfo: CF function that will be executedo stateName: Parameter being passed to CF functiono getStateInfo_result: JavaScript callback function

resortViewer.cfm

ColdFusion and Ajax

function getStateInfo_result(result) {

var divText = “”;

for(i = 0; I < result.length; i++) {

divText = divText + result[i].resortName + “<BR />”;

}

document.getElementById(“resortListing").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.

resortViewer.cfm

ColdFusion and Ajax

<cffunction name=“getStateInfo">

<cfargument name="stateName" required="yes" type="string">

<cfquery name=“qryResult” datasource=“skiresorts">

SELECT *

FROM Resort

WHERE state = ‘#stateName#’

</cfquery>

<cfreturn qryResult >

</cffunction>

ColdFusion function used to retrieve all records containing the passed in stateName.

resorts.cfm

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

ColdFusion and Ajax

CF

<return “HELLO”>

JS

alert(result + “ THEO”)

StringThe return for a ColdFusion string is a JavaScript string.

ColdFusion and Ajax

CF

<return 1962>

JS

var myAge = +return + 2006;

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;)

ColdFusion and Ajax

CF

<return true>

JS

if(return == “YES”) {

alert(“Yes it is true”)

} else {

alert(“Completely false”)

}

BooleanBooleans are returned as a “YES” or “NO” (all CAPS) for true or false. You may then need to convert to JavaScript booleans.

ColdFusion and Ajax

CF

<cfset myArray = ArrayNew()>

<return myArray>

JS

for(i=0; i < result.length; i++) {

alert(result[i])

}

ArrayOnly single dimension arrays are supported by CFAJAX. While ColdFusion arrays start at index 1, JavaScript arrays start at index 0.

ColdFusion and Ajax

CF<cfset mystruct = StructNew()><cfset mystruct.mynumber = 1><cfset mystruct.mystring = "hello"><cfreturn mystruct>

JStheStructNumberKey = return[0].KEY // returns "MYNUMBER"theStructNumberValue = return[0].VALUE // returns "1"theStructStringKey = return[1].KEY // returns "MYSTRING"theStructStringValue = return[1].VALUE // returns "hello"

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.:

ColdFusion and Ajax

CF

<cfquery name=“qryResult” datasource=“skiresorts">SELECT * FROM ResortWHERE state = ‘#stateName#’

</cfquery>

<cfreturn qryResult >JS

myFirstRowID = result[0].ID;mySecondRowDate = result[1].DATE;

etc.

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):

ColdFusion and Ajax

CF<cfset THIS.MyNumber = 1><cfset THIS.MyString = "Whatever"><cfreturn THIS>

JStheCFCMyNumberKey = return[0].KEY // returns "MYNUMBER"theCFCMyNumberValue = return[0].VALUE // returns "1"theCFCMyStringKey = return[1].KEY // returns "MYSTRING"theCFCMyStringValue = return[1].VALUE // returns "whatever"

CFCCFC properties declared in THIS return exactly the way a struct does (including CAPS for key names)

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.

<cfset MyReturn = ReReplace(MyReturn,"[#CHR(10)##CHR(13)#]","","ALL")>

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.

<cfsetting enablecfoutputonly="yes">

Another solution would be to include a CFSETTING tag before and after your block of code, setting the enablecfoutputonly attribute off and on respectively.

<cfsetting enablecfoutputonly="no">

[... Your code here ...]

<cfsetting enablecfoutputonly="yes">

ColdFusion and Ajax

Thirdly (if that’s 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

ColdFusion and Ajax

Lastly we can handle errors by including the following code;

<cferror template="error.cfm" type="exception">

Add the following code to the ColdFusion page being used by you CFAJAX code.

Add the following code to the error page specified above.

<cfsetting showdebugoutput="false">

<cfoutput>alert("#JSStringFormat("Error:" & Error.Diagnostics)#");</cfoutput>

ColdFusion and Ajax

Q: Can we look at some code?

A: Yes!

It’s Show And Tell

ColdFusion and Ajax

Q: What CFAJAX resources are there?

http://www.indiankey.com/cfajax/

http://cfdj.sys-con.com/read/138966.htm

http://www.fusionauthority.com/Techniques/4593-Using-AJAX-with-ColdFusion-Part-I

http://groups.yahoo.com/group/cfajax/