AJAX - Getting to know the competition.
A Web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change.
AJAX utilizes the client Document Object model to fire events. These events call functions that interact with remote data and return that data to the browser. The client-side script handles the results from these functions and displays them on a web page. This is all accomplished without the need of a page refresh.
a. Create more seamless and interactive user experience
c. No plug-in required
d. Works on most browsers (see table)
Browsers that support Ajax
(Note that this is a general list, and support of Ajax applications will depend on the features the browser supports.)
* Microsoft Internet Explorer version 5.0 and above, and browsers based on it (Mac OS versions not supported)
Browsers that do not support Ajax
This is a list of browsers that definitely do not support Ajax
* Opera 7 and below
a. Can break back button
c. Can adversely affect Accessibility
For this article, I have chosen a ColdFusion AJAX implementation named AJAXCFC developed by Rob Gonda. AJAXCFC is an incredibly easy to use framework that handles all of the passing of data and method calls to and from ColdFusion and your web page. Download AJAXCFC here.
Let's learn as we code by building a simple page that displays weather data returned from Weather.com.
Open your HTML editor and create a new page. Into the head of the document, paste the following two lines of code:
This function is broken down into two parts the first, doQuery, uses the DWREngine._execute() - part of AJAXCFC - to call the doWeather function that is part of our myWeather.CFC.
Similar to Flash Remoting, you then create a function - doQueryResults - to handle the results that are returned to the page by the doQuery function .
The key here are the lines:
$('id').innerHTML = r.id;
$('temp').innerHTML = r.temp;
$('humid').innerHTML = r.humid;
$('forcast').innerHTML = r.forcast ;
These define variables that are associated with areas of our webpage that will contain the dynamic data. The id attribute of the span tag tells the page which elements to update when results are returned. The code snippet below can be put anywhere on your page and these elements will update after each AJAX call.
Next you need to create a form and make it fire the doQuery function once it is submitted:
Notice that we are passing one argument to our CFC function doWeather; the zip code for which the user wishes to retrieve weather data.
Next paste these lines below your form, again these lines specify the areas that will update once results are recieved from our call to the myWeather.cfc :
You are done with the client side. Now lets create our myWeather.CFC that will interact with theWeather.com XML.
Weather.com provides free use of there data via XML feeds that are easily integrated into web projects. Go here to sign up as you will need a user key to for this example to work. Once you have your key you will be able to retrieve weather data for any zip code in the United States. The information is returned in XML format. View example of XML.
If you look at the XML returned from Weather.com it can be a bit intimidating but here is a trick to make it less so. Create a new page and paste the following code:
What we are doing is using ColdFusion's XMLPARSE function to convert XML text into a XML document object that we can read and use.
If you look at the output created by this code it is easy to see the nodes and their associated values. View sample output.
Now that we have a page that can read the remote XML, let's convert it to a CFC that we can utilize in our AJAX application.
Paste the following code into a new page:
I am not going to go through the whole CFC code but I do want to point out that we are returning multiple values from our
CFC and as such you need to use a return type of "struct" for our doWeather function. Also note the we need to place this line
Make sure all of your files are in the same directory and test your page. A working example can be viewed here . Type a zip code into the form and see how the information updates without a page refresh. I know that this is not revolutionary, Flash has been enabling asynchronous data exchange for years, but is is a quantum leap from traditional transactional html forms and as such a lot of people are taking a look at AJAX. I for one don't see
AJAX as the ultimate answer or a threat to Flash. Just as Flash is not the ultimate answer, I tend to view AJAX as another tool and think it wise to learn as much about it as possible so that I am able to respond to client request.
I hope that this article will enable you to look at AJAX more closely and see how it fits into your development toolbox. Is AJAX the magic bullet that will solve of your problems; probably not. But when you separate truth from hype I think that you will come to view AJAX a a powerful new tool that will complement your existing Flash skill set.
(By: Chris Bizzell - ActionScript.com)