Most Read This Week
Rob Gonda's Two-Part AJAX Special: Now In One Part
By Popular Demand, We Bring You This Resource Article In One URL
By: Rob Gonda
Nov. 14, 2005 11:00 AM
It's become very popular lately, even though it's not exactly new. It's been possible to use the concept behind AJAX since browsers introduced the XMLHttpRequest function in 1999.
AJAX isn't a technology, or a language, and there's no recipe to implement it; it's just a combination of various components to achieve something you otherwise couldn't: asynchronous http requests. However, since early 2005, when Google and Flickr popularized the concept, its use has grown rapidly.
AJAX uses XHTML for the data presentation of the view layer, DOM, short for Document Object Model, which dynamically manipulates the presentation, XML for data exchange, and XMLHttpRequest as the exchange engine that ties everything together.
Because of these requirements, AJAX works on I.E. 5.0+, Mozilla 1.0+, Firefox 1.0+, Netscape 7.0+, and Apple added it to Safari 1.2+.
Traditional HTML sends a request to the server, which processes it and either returns a static HTML page or dispatches the request to some scripting language such as ColdFusion, which creates and returns an HTML page for the browser to render. When this method has to retrieve new data from the server it has to repost and reload another HTML file. In many cases perhaps only a small portion of the returned HTML code varies and the shell itself remains the same resulting in huge overhead because the data has to be downloaded every time.
Some classic examples of applications that would benefit from AJAX are searching for information and displaying it back in a table, related select dropdowns, or checking if a user exists before submitting an entire form.
Building an AJAX platform or engine from scratch can be a difficult and lengthy procedure. There are many AJAX engines available for download and you're welcome to use any of them. The only difference between implementations will be the data encoding, transmission, and decoding methods. The views and models of the MVC will be the same. My examples will be based on CFAJAX, a community-driven Open Source project. One of the problems with CFAJAX is its poor documentation. There is no manual or even a complete FAQ. So I will explain how to set it up step-by-step and work around its downside.
Enough chatter, let me show you how it works.
First, go to www.indiankey.com/cfajax/project.asp and download cfajax.1.2.zip. This file contains the core engine, some utilities, and some examples. Let's set up a folder in your Web root or whatever accessible folder you like called 'ajax.' Put the 'core' folder located in the cfajax zip file inside your 'ajax' folder. There are only two important files in this folder: 'engine.js' and 'cfajax.cfm.'
The engine.js contains the whole AJAX object that we'll use as our tunnel and cfajax.cfm has some basic functions that your ColdFusion model will have to include to decode the AJAX packet. Other files, not so core anymore, are 'util.js.' which contains a series of DOM functions to facilitate HTML manipulation when the server response is received, 'rico.js,' used for a built-in accordion example, and 'settings.js,' which aren't really settings, only the location of your ColdFusion model and an error-handler function. The only reason why this file exists is to hide the location of your ColdFusion file should someone open and view the source of your HTML file, which in my opinion is counter-productive because you have to edit this file and add a location variable every time you want to use AJAX with different models. The security should be built into the ColdFusion file.
Now that we have our CFAJAX in place, let's create an index.cfm file and a model.cfm file in your ajax folder. For larger applications I would store the views in a 'views' folder and models in a 'models' folder, but I digress. Shall we concentrate on the basic example?
Open index.cfm and include the 'core/engine.js' file. Then create a 'getGreetings' and 'getGreetings_result' function. We'll call getGreetings onLoad for now, and the results function will just alert the response.
Right now the file looks like this:
Our model.cfm will be extremely simple. All we need to do is include the 'core/cfajax.cfm' file and a getGreetings function:
Well, that was easy; we just finished our first AJAX application.
It 's not that much different from the file we have. Let's modify the index.cfm file a little. We'll create a basic user registration form with a single fieldname called user and we'll pass that value to the AJAX call. The tricky part here is that AJAX is asynchronous, which means that the function won't return the value you need. Instead the callback function will get called on a different thread. Not to worry, I'll demonstrate how this can be done.
Reader Feedback: Page 1 of 1
Subscribe to the World's Most Powerful Newsletters
Today's Top Reads