A reader asks:
How to use AJAX with Coldfusion?
As is normally the case with ColdFusion, there are multiple answers....
We had to find an AJAX solution a few months ago for one of our clients. A coworker did some research and found the CFAjax project. While I was only marginally involved with the code, it did seem to work ok.
Another project to consider is the ajaxCFC project by Rob Gonda. I haven't had a chance to play with this one yet, but I like the feature list, and it integrates with Model-Glue, which is always a plus.
If any of my readers have other projects they use, please comment below.
Archived Comments
We use prototype.js (which has an ajax portion to it). It doesn't have any server side code like the AjaxCFC or CFajax projects do. You roll your own responses, with fusebox you're view is jsut an XML basically. It just offers you a small "client" for you're webpages to use to communicate with the server. Prototype.js offers a robust set of other functions and objects to use as well. I can't say I have used AjaxCFC at all so I can not comment on that one specifically but other projects seem to blur the line between client side and server side too much for my liking and I have seen projects that have started to leak bussiness logic/rules into the client side and thats a bad thing. The problem is with AJAX, ecspecially with some of these frameworks, its really easy to start to put business logic into the client.
Hey King Camden...
You have not lived until you have felt the power and joy of coding AJAX apps using Rabid_AJAX(tm).
Rabid_AJAX(tm) is the swiss-army-knife of AJAX Frameworks.
Rabid_AJAX(tm) provides the means to perform xmlHttpRequest() using all the flavors of this for cross-browser support as well as the hidden iFRAME techniques again for cross-browser support AND hidden iLayer just in case your browser is Opera or it cannot do an iFrame.
Rabid_AJAX(tm) provides a consistent server-side interface regardless of the communication technique being used. Which means you can fully debug your xmlHttpRequest() interactions using iFrame(s) which means you can use all the nifty CF debug bells and whistles when debugging your xmlHttpRequest() interactions - this is generally a pain without Rabid_AJAX(tm).
Rabid_AJAX(tm) allows you to pass JavaScript code back from the server to the client for the absolute fastest interactions possible. CallBack(s) are expressed as JavaScript code for maximum flexibility and performance. CF Query Objects are mirrored by JavaScript Query Objects AND you can even code very slick Query of Queries (or something close to this) using JavaScript on the client.
Rabid_AJAX(tm) allows you to hide your valuable JavaScript code from curious eyes because your valuable JavaScript code NEVER hits the client browser's cache ever !
Rabid_AJAX(tm) is the AJAX Framework YOU need to use.
Rabid_AJAX(tm) is still under development and will NOT be Open Source but it will radically change the way everybody does AJAX and it is the next BIG thing to hit the Internet.
Rabid_AJAX(tm) 0.9 already exists and works and is being fully tested and will be improved and made into a 1.0 release very soon.
I thought I would post about another very easy to use framework: http://ajform.sourceforge.net/. I was giving it a whirl and its pretty easy to use. Check out my blog post on it if it helps (after you check out theirs!)
http://www.markdrew.co.uk/b...
I hope that helps!
Mark D
I did a presentation to the London (UK) CFUG a couple of months ago about this. The presentation Powerpoint file and example Google Suggest code are available here : <a href="http://instantbadger.blogsp...">Enhancing User Interfaces With AJAX and Coldfusion presentation files</a>
In general, I tend to use the prototype.js library, the very handy <a href="http://cvs.sourceforge.net/...">LiveUpdater.js</a> library, or I roll my own. liveUpdater.js does the Google Suggest thing with one function and one empty div, plus whatever callback function you choose to write to handle a click on the suggested elements. The only drawback I've found is that it can be quite difficult to position the popup consistently across IE / Firefox, but apart from that I can thoroughly recommend it.
Al
Absolutely Hilarious! Just one day removed from the infamous "blogCFC incident" this guy is now using Camden's comments as a forum for plugging his own work!
I did ask for folks to share other projects. Therefore his comment is appropriate. King Camden is just silly though.
>King Camden is just silly though.
Yeah...don't they know it's 'Jedi' ;)
Adam, you have a valid point and that is a decision businesses will have to make when migrating to Web 2.0 / Single-page-applications / RIA. However, you can architect your application to dynamically generate the JavaScript code; in all my higher level applications I leave only the connectivity scripts in the client side and load the rest of my JavaScript in a later moment. The JavaScript will then reside in the client’s RAM instead of Cache; it can be loaded on-demand, or when needed. I am working on a base framework for Ajax applications using Model-Glue and Zapata for visual elements. The framework works in an MVC fashion and has no hard-coded business logic in the client whatsoever. A couple of simple examples can be found in my site, but more complex are on the works and will be soon posted.
So you see, there are good ways and better ways of designing your application, and you do not necessarily have to fall into common Ajax problems.
I'm actually shocked that "Rabid CF" hasn't started a new blog, called "CF Sith Lord." ... oops, I mean "Rabid_CF_Sith_Lord(tm)"
I put together a system that used SAJAX in a Fusebox 3 site. I added some code to certain files so that if a specific file was found (act_sajax.cfm) in a given directory it was always inserted. I need to clean it up then publish it for others to laugh over, then see about doing something similar for FB4.
I've been using JSMX. You can download it at www.jsmx.org. It's pretty simple to use and it's only one small javascrpt file. The only drawback to it is that whatever data that is passed back to the javascript must be run through cfwddx cfml2js, but I got around this by creating a proxy cfc. If any one is inerested in the proxy I created for it--I'd be more than happy to share.
Brad
There's also a really good open source AJAX library called Taconite: http://taconite.sourceforge...
While this is not a CF-specific AJAX library, it fits in well with CF. The basic idea behind this library is that you point to a URL that returns an XML packet, which basically is just an XHTML (in laymans terms HTML that is XML compliant) with a taconite specific wrapper tag. (This tag tells the DOM what do with the information--replace some content, add some content, etc.)
It does include some JSP tags if you'd prefer to go that route, but the client side code works well.
Check out this example for sample code:
http://taconite.sourceforge...
(BTW - I have nothing to do w/this project, it's just one of the simplier, more straightforward approaches I've seen. It's by far the simpliest AJAX library I've seen for developers who aren't well versed in JavaScript.)
Just as an addition, I've been testing prototype.js using both xml (with Simeon Simeonov's wddxser and wddxdeser on the client) and JSON (using CFJSON on the server and the standard json library on the client) - and have found the JSON solution to be faster, and a bit more intuitive also.
Here's a second on the JSon. There is a implementation of JSon on some site called www.cflib.org that was put up about a week ago! :) It's ajax for people who are tired of busting their brains... and it has had some fine contributors!
I'm using a derivative of the CFJSON stuff, merged in with a homebrew CFC framework that is similar to ajaxCFC, and it's working out pretty well. Instead of returning the values via WDDX, my homebrew framework processes requests with jsonEncode before they get sent out to the browser. This gives me the object-orientation of CFCs, and the speed of JSON. It seems to be working pretty well, though debugging is a little tough.
Hi there!
I've been fooling around with ajax: I'm using JSMX.
It works great!
But I'm having a hard time trying to get the browser history back to life.
The problem is that, when the page contents is updated via JS/ajax, that action is Not recorded into the browser's history. So pressing the browser's back button gets you back to the page just before entering the current site.
I beleive that fixing this will also fix the issue that you can not bookmark a page once you have dynamically populated the current page via js/ajax.
I realize that resolving this involves the use of a hidden iframe, since modifying the iframe src Does get registered in the browser's history.
Is there anything already made?
Thanks in advance!
-andy
ajaxCFC is great! I like it because all of your logic can be hidden from prying eyes since coldfusion will not output cfc's to the browser, it has security features that allow you to check to make sure the requests are coming from a page on your server...
I really like that it is built so that all you do is write your own cfc's and just say:
<cfcomponent name="shoppingcart" extends"ajax">
...
</cfcomponent>
Then, you just call any funtion you want from the component and it's yours. Much more object oriented than cfajax.
Plus, I was stoked to see the dDumper.js file. All you do is include it in a script tag, and then when you get the results from your ajax call, you can dDumper(result) and it creates a dump of the results from your call just like the coldfusion debugger... looks beatiful!
Play with it, you will be throughougly impressed. All it needs now is for one of us to sit down and incorporate an effects package like scripts.aculo.us offers into some components for quick re-use, like accordians, etc.
Thanks Rob!