AJAX - Getting to know the competition.

The buzz around AJAX is growing and if you haven't been asked about it by a client, you soon will. What is it and how AJAX affects the Flash community is a question that you need to ponder. As with anything knowledge is power, so let's take a look at AJAX and how one goes about utilizing it in a web application. AJAX is defined by Wikipedia as :
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.

AJAX Pros
a. Create more seamless and interactive user experience
b. Utilizes common scripting languages like Javascript
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) * Gecko-based browsers like Mozilla, Mozilla Firefox, SeaMonkey, Epiphany (web browser), Galeon and Netscape version 7.1 and above * Browsers implementing the KHTML API version 3.2 and above, including Konqueror version 3.2 and above, and Apple Safari version 1.2 and above * Opera browsers version 8.0 and above, including Opera Mobile Browser version 8.0 and above * iCab version 3.0b352 and above
Browsers that do not support Ajax This is a list of browsers that definitely do not support Ajax * Opera 7 and below * Microsoft Internet Explorer 4.0 and below * Text-based browsers like Lynx and Links * Browsers for the visually impaired (speech-synthesising, braille) * Browsers made before 1997

AJAX Cons
a. Can break back button
b. Users need current browsers and Internet Explorer 6 can be a problem if users disable Javascript or Active X
c. Can adversely affect Accessibility
d. Javascript functions can become harder to maintain as pages become complex

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:

<script type="'text/javascript'">_ajaxConfig = {'_cfscriptLocation':'myweather.cfc', '_jsscriptFolder':'../js'};</script> <script type="'text/javascript'" src="'../js/ajax.js'"></script>

These two lines of javascript are all that required to interact with AJAXCFC. The first line calls the _ajaxConfigfunction and passes several arguments relating to the location of your CFC file that you use to interact with the remote data. If you are familiar with Flash Remoting you will notice the similarity here with AJAX. In this example, we are calling a CFC named myWeather.cfc. This CFC will interact with the remote Weather.com XML document. The second line points to the another AJAXCFC file that is needed for the framework to be utilized on your page.

Now paste another Javascript function that will be fired when the user submits that form we will build shortly:

<script type="text/javascript"> function doQuery(id) { // send data to CF DWRUtil.useLoadingMessage(); DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'doWeather', id, doQueryResults); } // call back function function doQueryResults (r) { $('location').innerHTML = r.location; $('humid').innerHTML = r.humidity; $('temp').innerHTML = r.temp; $('forcast').innerHTML = r.predip; resultsTable = $('resultsTable'); } </script>

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[0];
$('temp').innerHTML = r.temp[0];
$('humid').innerHTML = r.humid[0];
$('forcast').innerHTML = r.forcast[0] ;

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:

onSubmit="doQuery(myForm.arg.value);return false;"

<form name="myForm" onsubmit="doQuery(myForm.arg.value);return false;"> <label>Enter Zip Code </label> <input name="arg" type="text" id="arg"> <input type="submit" value="Enter ID"><br /><br /> <label></label><span id="state"></span></form>

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 :

<span id="id"></span> <span id="temp"></span> <span id="humid"></span> <span id="forcast"></span>

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:

<script type="text/javascript"> function getWeather() { <cfhttp url="http://xoap.weather.com/weather/local/29605?cc=*&dayf=2&amp;amp;amp;prod=xoap&par=1018472385&key=3b5f303e116b6a46" method="GET" resolveurl="No"></cfhttp> <cfset myxmldom =" XMLParse(cfhttp.fileContent)"> <cfset myitems =" XMLSearch(myXMLDom,"> <cfset myitemsc =" XMLSearch(myXMLDom,"> <cfset myvar =" 0"> <cfloop from="1" to="#arrayLen(myItems)#" index="i"> <cfset myvar =" myVar"> </cfloop> <cfoutput>#myVar#</cfoutput> <cfloop from="1" to="#arrayLen(myItemsC)#" index="i"> <cfoutput> #myItemsC[i].t.xmltext#</cfoutput><hr /> </cfloop> } </script> <cfdump var="#myXMLDoM#">

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:

<cfcomponent extends="ajax"> <cffunction access="private" name="doWeather" output="no" returntype="struct"> <cfargument name="args" type="array" required="Yes" default="1"> <cfhttp url="http://xoap.weather.com/weather/local/#args[1]#?cc=*&dayf=2&amp;amp;amp;prod=xoap&par=1018472385&key=3b5f303e116b6a46" method="GET" resolveurl="No"></cfhttp> <cfset myxmldom =" XMLParse(cfhttp.fileContent)"> <cfset myitems =" XMLSearch(myXMLDom,"> <cfset myitemsc =" XMLSearch(myXMLDom,"> <cfset myloc =" XMLSearch(myXMLDom,"> <cfset myvar =" 0"> <cfset mytemp =" 0"> <cfset months="arraynew(1)"> <!-- --> <cfloop from="1" to="#arrayLen(myItems)#" index="i"> <cfset myvar =" myVar"> <cfset mytemp =" mytemp"> </cfloop> <cfloop from="1" to="#arrayLen(myItemsC)#" index="i"> <cfset> > </cfloop> <cfset results =" StructNew()"> <cfset location =" #myLoc[1].dnam.xmltext#"> <cfset humidity =" #myVar#"> <cfset temp =" #mytemp#"> <cfset predip =" #months#"> <cfreturn> </cffunction> </cfcomponent>

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
at the top of the page for AJAXCFC. The rest of the code simply finds the XML nodes that we wish to return and grabs their values - note nodes are treated as arrays and individual values are referenced as xmltext.

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)