So I know a lot of the posts I’ve been writing recently have been about stuff that’s been around a while–Ext helper functions, CFScript, etc. Nonetheless, I post them because some of the answers to questions I’ve found in developing solutions have been less-than-easy to find, so perhaps repeating some of the same things again will help Google find it a bit easier for someone else someday.

On with redundancy!

Obviously, JSON-related technologies have been around for a while, and with ColdFusion 8, a lot of native JSON handling was added for the creation of some sweet AJAX-y goodness.  While I’ve dabbled with these, I’ve never really had a need for them…until now.

I recently developed a remote CFC function that required about 12 different arguments.  On the client side, I also developed a quick EXT Ajax.request() method to pass these arguments into the CFC function.

Now with Ext, it’s incredibly simple to pass arguments to server-side functions, as this example illustrates:

Ext.Ajax.request({
     url: 'com/functions.cfc',
     success: successMethod,
     failure: errorMethod,
     headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"},
     params: {method:'setupLife',argument1:arg1,argument2:arg2}
});

I like this alot, because it allows me to treat each argument as its own “thing,” rather than stringing together a bunch of “&argument1=arg1” in the query string.

But what if want to treat several arguments as a group?  For example, there are several times where I create arrays or objects in JavaScript, and then want to use the values in these arrays or objects as arguments for my remote function.  Like this:

var person = new Object();
person.name = 'Joel';
person.hobby = 'Philosophy';
person.favband = 'Emery';

If I were to pass individual arguments, I’d have to break out each of these properties and assign them to arguments–lots of duplicated work, and it sorta breaks the natural relationship these arguments had to each other natively as a JS object.

Fortunately, EXT and CF together make this super easy.

First, the EXT side. Instead of breaking out my “person” properties into indivdual arguments, I can use the handy JSON-encoding capabilities of EXT to treat this object as what it is–a collection of related properities:

Ext.Ajax.request({
     url: 'com/functions.cfc',
     params: {method:'setupLife',argument1:arg1,argument2:arg2,person:Ext.encode(person);}
});

As you can see, by JSON-encoding the object I already created in JS, I can treat the full object as an object, and pass it as a single argument to my remote function.

What is super cool about this, however, is what happens on the CF side.  Because I’m passing my person object as an object, I can now retrieve the object with CF and treat it as an object within CF.

Here’s my function:

<cffunction name="setupLife" access="remote">
     ...
     <cfargument name="person" required="yes" />
     <cfset PlayerArray = deserializeJSON(arguments.players) />
     ...
</cffunction>

This function requires the “person” argument, which you’ll remember is what we JSON-encoded on the JS side of things.  Now that we’ve retrieved the argument, we can use CF’s deserializeJSON() function to transform the JSON object which is passed as an argument and convert it to a CF structure.

The super-sweet part about this is that once we run this function, the JSON object will become a ColdFusion structure, and we can do whatever super-bad juju we want to do with it, not having to worry about what format it came to our function in.  Awesome.

So that’s it.  With Ext and CF, you can do some really nice things very easily, and don’t really have to worry a whole lot about messing around with data conversion between the client and server.