Step Outside the Box – Part II ColdFusion and Ajax
Theo Rushin Jr <ul><li>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. </li></ul><ul><li>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. </li></ul>I can be reached at [email_address] or on the snow
ColdFusion and Ajax <ul><li>Is Ajax a Web 2.0 technology? </li></ul>Well … Yes and No
ColdFusion and Ajax <ul><li>Is Ajax a Web 2.0 technology? </li></ul>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 <ul><li>Is Ajax a Web 2.0 technology? </li></ul>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 <ul><li>Q: What browsers support CFAJAX? </li></ul>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 <ul><li>Q: So, how do I use CFAJAX? </li></ul>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 <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 <ul><li>Q: What other data types can I return? </li></ul>A: CFAJAX will allow you to return a variety of data types including; Strings Numerics Booleans Arrays Structures CFCs
ColdFusion and Ajax CF <cfset mystruct = StructNew()> <cfset mystruct.mynumber = 1> <cfset mystruct.mystring = "hello"> <cfreturn mystruct> JS theStructNumberKey = return.KEY // returns "MYNUMBER" theStructNumberValue = return.VALUE // returns "1" theStructStringKey = return.KEY // returns "MYSTRING" theStructStringValue = return.VALUE // returns "hello" Structure A 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 Resort WHERE state = ‘#stateName#’ </cfquery> <cfreturn qryResult > JS myFirstRowID = result.ID; mySecondRowDate = result.DATE; etc. Query The 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> JS theCFCMyNumberKey = return.KEY // returns "MYNUMBER" theCFCMyNumberValue = return.VALUE // returns "1" theCFCMyStringKey = return.KEY // returns "MYSTRING" theCFCMyStringValue = return.VALUE // returns "whatever" CFC CFC properties declared in THIS return exactly the way a struct does (including CAPS for key names)
ColdFusion and Ajax <ul><li>Q: What kind of things should I watch out for? </li></ul>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 <ul><li>Q: Can we look at some code? </li></ul>A: Yes! It’s Show And Tell
ColdFusion and Ajax <ul><li>Q: What CFAJAX resources are there? </li></ul>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/
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.