I’ve been using Coldfusion for quite some time now, but only recently have I taken advantage of what seems to be a relatively unknown or at least poorly publicized feature called cfajaxproxy, which allows you to create a Javascript object from a CFC, and dynamically interact with Coldfusion using Javascript functions.let’s start with the basics, there are a few properties for cfajaxproxy. According to the Coldfusion 8 documentation, there are two ways to use this tag:

<cfajaxproxy
    cfc = "CFC name"
    jsclassname = "JavaScript proxy class name">
OR 

<cfajaxproxy
    bind = "bind expression"
    onError = "JavaScript function name"
    onSuccess = "JavaScript function name">

I’m going to talk about the former method as It allows for more control. Let’s say I have a Coldfusion datefield input, and I want it to load data that occurred on that date from a database. Lets start with the CFC:

<cfcomponent>
	<cffunction name="getTotal" access="remote" returntype="Numeric">
		<cfargument name="date" type="date" required="yes">

		<cfset var myQry = "">

		<cfquery name="myQry" datasource="myDatasource">
			SELECT COUNT(id) as dailyTotal FROM myTable
			WHERE date BETWEEN
			CONVERT(datetime,<cfqueryparam value="#ARGUMENTS.date#" cfsqltype="cf_sql_date">,101) AND
			DATEADD(day,1,CONVERT(datetime,<cfqueryparam value="#ARGUMENTS.date#" cfsqltype="cf_sql_date">,101))
		</cfquery>

		<cfreturn myQry.dailyTotal>
	</cffunction>
</cfcomponent>

For this example, lets pretend its called myCFC.cfc, which will be located in the same directory as the CFM. Now, the CFM looks like this:

<html>
	<head>
		<title>Sample Coldfusion AJAX Page</title>
	</head>
	<body>
		<cfform name="dataForm" action="">
			<cfinput name="myDate" type="datefield">
			<cfinput name="update" type="button">
		</cfform>
	</body>
</html>

Here I have a (very) simple CFM with a form that has a datefield and a button field. Right now the page won’t do anything, but now we need to add the Ajax proxy and tell it how to handle the changed date.

<cfajaxproxy cfc="myCFC" jsclassname="myCFC">

<html>
<head>
	<title>Sample Coldfusion AJAX Page</title>
	<script type="text/javascript">
		function dateChange()
			{
			var myDate = document.getElementById("myDate");
			var cfc = new myCFC();
			cfc.setCallbackHandler(getDataResult);
			cfc.getTotal(myDate.value);
			}
		function getDataResult(result)
			{
			document.write(result);
			}
		</script>
	</head>
	<body>
		<cfform name="dataForm" action="">
			<cfinput name="myDate" type="datefield">
			<cfinput name="update" type="button" onclick="dateChange();">
		</cfform>
	</body>
</html>

The critical elements are highlighted in the above code. I have added the onClick event listener to the update button in the form, and have made it call a Javascript method called dateChange. The cfajaxproxytag creates a new Javascript class named by the jsclassname property of the cfajaxproxytag. Inside the dateChange method, a new instance of the myCFC class is instantiated, and I tell Javascript to send the result to another method called getDataResult. Then the Coldfusion method getTotal is invoked using the matching Javascript function which is part of the Javascript class myCFC. Coldfusion then executes the function, and returns the data back to Javascript in the result argument of getDataResult, where you can perform additional operations with the data. In this instance, the result is written to the page.

A helpful tool in developing with cfajaxproxy is the Ajax debug log window, which can be enabled in the Coldfusion administrator under Debug Output Settings. Additionally, you will need to append ?cfdebug to the end of the URL. For example:

http://xposuredesign.net/ajax/index.cfm?cfdebug

That’s a simple introduction to the first implementation of cfajaxproxy. For more information on the capabilities of this snazzy Coldfusion feature check out the Coldfusion 8 Documentation on the subject, or if you prefer the Coldfusion 9 flavor, its located here.