January 6, 2009

Pages


Search Site


Topics



Archives

Tweets

Poor Man's AJAX

August 01 2007 by Adam
I am admittedly behind the times when it comes to knowing how to code and use AJAX; I simply haven't had time to learn it. However, the need came up today to do some AJAX processing, and instead of spending days researching and learning how to do it properly, I just planned out and executed what I'm lovingly calling "Poor Man's Ajax." It took me about 2 hours, and it was a piece of cake. Of course, it would have been even easier with the new AJAX framework built into CF8, but alas, my client isn't quite ready to upgrade. A bit of semantics: While my solution doesn't make use of XML, neither does "AJAX" that uses JSON instead of XML to pass data back and forth. I don't think there is any reason you can't call what I'm doing AJAX: It's asynchronous, is controlled by JavaScript, and instead of XML or JSON, it simply uses embedded JavaScript in a hidden iFrame. The problem: Once a JavaScript event is fired, I need to do a SELECT from my database, and use that value to inject some new code into a DIV on my page. The solution: To make things asynchronous, I added a hidden iFrame to my page, whose SRC attribute I will change with JavaScript when my event is triggered: [viewcode] src="poor_mans_ajax.txt" showsyntax=no lines=1 geshi=html[/viewcode] In order to accept some data back from the asynchronous processing, I have to create a callback function: [viewcode] src="poor_mans_ajax.txt" showsyntax=no lines=2-4 geshi=javascript[/viewcode] And we have to trigger the request when an event occurs, which in my case was handled by a Flash movie. In order to initiate my request, all I have to do is change the SRC attribute of the iFrame: [viewcode] src="poor_mans_ajax.txt" showsyntax=no lines=5-7 geshi=javascript[/viewcode] After we change the SRC attribute of the iFrame, the request has begun! From here on out, it's out of our hands. The CFML page requested in the iFrame will take care of any data processing, and then send its result back to the specified callback function. Remember that all I wanted to do was a SELECT and return the value: [viewcode] src="poor_mans_ajax.txt" showsyntax=no lines=8-16 geshi=cfm[/viewcode] Conclusion: There are a few important things to note here; particularly:
  • This page was used as part of a company intranet, where security is less of a concern, as the user base is limited and should be trusted to some degree. On a public facing site, you should check the validity of anything sent into the iFrame (via its query string), including the name of the callback function; and use CFQUERYPARAM in the query.
  • Though I didn't test it, I believe that you can only pass simple values (strings and numbers) between pages in this fashion. However, it would be fairly easy to create a struct or array in JavaScript (inside your iFrame page), dynamically fill in its content with your CF code, and then use JSON to convert it to a string, pass it back, and then convert it back to a JavaScript object. Depending on your situation, you may even be able to use WDDX to serialize the data you want to pass back and forth.
  • Notice that I defaulted my callback function variable to "void" in ajaxProcessor.cfm. In case we forget to specify a callback, nothing will happen, including throwing a JavaScript error.

Posted in AJAX | ColdFusion |