In my last few posts, I looked at the mechanisms CF8 provides to get data into the browser. Just getting data is not enough, of course – you still need to plug that data into elements in the browser’s HTML DOM tree so that is is made visible to users, allowing them to view and interact with it. This calls for JavaScript skills, and possibly the use of toolkits like jQuery or Prototype to ease the task. Such applications can be extremely powerful and interactive, but do require a lot of custom JavaScript code.
Your average Web 1.0 application performs tasks like this on the server – hence the plethora of templating languages, designed to allow programmers to plug data into HTML markup. ColdFusion was the first, of course, and as we like to modestly claim, still the best! 😉
It seems inevitable that someone would come up with the idea to combine these two approaches, asynchronously fetching markup from the server, and plugging that markup into the HTML DOM tree in the browser. It’s a pretty neat idea – let the server process the template for a given fragment of HTML, which allows programmers to code in a familiar server-side templating language, use AJAX to fetch that markup fragment, and push it into the browser’s HTML DOM tree. Given the need for a catchy Web 2.0 acronym, the technique has come to be called AHAH, short for Asynchronous HTML And HTTP, pronounced “a-ha!” or perhaps “ah! ah!” – I’ll leave the choice to you, dear reader.
CF8 provides support for AHAH in a number of different ways – with the ColdFusion.navigate() JavaScript API, the various AJAX “container” tags (CFDIV, CFLAYOUTAREA, CFWINDOW and CFPOD), and the AjaxLink() and AjaxOnLoad() built-in functions. The “container” tags are so called since they act as containers for HTML markup, allowing the contained markup to swapped out for new markup fragments fetched from the server. In my next few posts, I’ll talk about the functionality these tags and functions offer, and how you can use them in your CF8 AJAX applications.
So far, I’ve discussed templating on the server, and using custom JavaScript to plug data into the HTML DOM tree on the browser. There is also a third approach – templating on the browser. To date, the only framework that I know of which accomplishes this is Spry. So here’s another way to build your AJAX applications – use Spry JSON datasets in conjunction with CF8 JSON web services to pull data into the browser. But more on that later…