The Largest Repository of ColdFusion Knowledge in The World for More Than 12 Years

ColdFusion on Ulitzer

Subscribe to ColdFusion on Ulitzer: eMailAlertsEmail Alerts newslettersWeekly Newsletters
Get ColdFusion on Ulitzer: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


CFDJ Authors: Jyoti Bansal, Michael Kopp, Tad Anderson, Bob Gourley, Jayaram Krishnaswamy

Related Topics: RIA Developer's Journal, ColdFusion on Ulitzer

RIA & Ajax: Article

What Is AJAX?

AJAX isn't a technology, or a language, and there's no recipe to implement it

CFAJAX allows you to send complex objects, but for some reason it's extremely difficult to receive and interpret them on the ColdFusion side. For this reason I came up with a much simpler and straightforward way: WDDX serialization.

This concept may be familiar to some of you. WDDX stands for Web Development Data Exchange and Allaire created it in 2001 to solve problems in exchanging data between Web applications. In a nutshell, WDDX is a technology that facilitates exchanging complex objects over XML. WDXX supports Booleans, numbers, strings, date-time, arrays, structures, and record sets. Modules for WDDX support exist in various languages, including but not limited to ColdFusion, Perl, Java, JavaScript, ASP, .NET, and PHP.

A JavaScript WDDX component is included in the cfide/scripts folder of every ColdFusion installation. You can locate it at /cfide/scripts/wddx.js.

Complex Object Example
Now I'll show you how to use it. Listing 1 shows a simple example in which I created a complex object in JavaScript - a structure that contains an array of structures - and serialized it before sending it to ColdFusion. All you have to do is initialize a new WDDX serializer and serialize the complex object. You can see in Listing 1 how simple it is; you don't need to know the structure of the packet.

Notice the line "DWREngine._execute(_cfscriptLocation, null, ' wddxTest', oWddx.serialize(_o), testResult);". Here the first argument is the location of the ColdFusion model; the wddxTest is the function to be called; the argument is being serialized by our JavaScript component; and the testResult is the callback function.

Listing 2 shows how simple it is to receive the call. The function takes only one argument: the WDDX packet. This packet is not an object; it's actually an XML string. Listing 2 returns it intact just so you see exactly what's happening behind the scenes, and the callback function alerts the return packet. If you run my example, you'll see that the XML string is being alerted to the screen by the testResult function.

Trick 1
Here is a very important cross-browser note for you. Pay special attention to the URLDecode function in the ColdFusion listener (see Listing 2). I found that if you don't use it, the code will work just fine in IE, Firefox, and Netscape, but it will break in Safari for Mac users. I learned this the hard way, so here I am sharing the trick. For some reason, Safari URL-Encodes the XML packet before sending it and ColdFusion cannot decode it, making the argument impossible to de-serialize. Ideally, you'll test your code in as many environments as possible before you go live, so remember this and it may save you some debugging time.

Login Example
I'll now demonstrate a login example and some useful debugging techniques. Sometimes you'll find that the user is navigating your site and he is allowed to log in by using a form that is always available, either in the top or side navigation. Sometimes the user just posts a form, for example, a search products form, and then decides to log in. This may or may not be a problem, but if you allow him to post just the login form, you will lose all other existing form variables. One solution, you may be thinking now, is to loop through the form collection in the login form and create hidden fields; it may work in some cases, however, in other cases such as add-to-cart or checkout, resubmitting the form may cause duplicate process pages. Using cflocate after each process page is a good practice, but I am digressing and won't get into that.

How about adding some of the concepts we learned in this article? How nice would it be to let the user know if her username or password does not match any existing one without refreshing the page? Or even more! How about logging the user in, hiding the login form, and adding her login status without refreshing the page, and thus, without resubmitting, redirecting, or even losing focus of the current item she may be seeing.

This time we'll send the user and password to the ColdFusion model and expect an array for the response. The array will have a "success" status: in case of error, a message; and in case of success, the name of the user. We could also pass a structure, but you'll find that if you pass a structure back, JavaScript will interpret it as an array or keys and values. Then you'll have to loop through the array and assign the values to the keys. An alternative could be using WDDX, but this time to encode the packet before sending it back to JavaScript and use the WDDX component in JavaScript to deserialize it.

Sometimes it's not that easy to know exactly how the structure that ColdFusion sent is being interpreted by JavaScript. In these cases, I always refer to the same debugging method: I loop over the entire scope or collection to find what is being sent back. Listing 3 shows a simple one-line loop that will do the trick. Try to return a structure and see for yourself the way it's being passed back.

Let us continue with our login example. The ColdFusion model will return an array of two elements: array[1] will be the success variable (true or false), and array[2] will be the error message in case of an error, or the name of the user in case of success. For the sake of this article, the model just checks for a static user and password; however, this is exactly where your login logic should be. The trick is to update the session in the model in the background and just send back to JavaScript what it needs for the presentation layer. For instance, you could add the User-ID for the session, and send back the name and last name so it can be displayed in the left navigation.

After the user successfully logged in, we will make the login form disappear and add a simple message that reads "logged in as %name%". We will do this by using the JavaScript innerHTML function. The innerHTML function lets you modify the source code on the fly. Our form was placed inside a DIV layer that is used as a holder and, after the login, we will change the code of the holder to display the new status. When using this method, make sure that the navigation does not have to change upon login, or, if it does, you may modify the navigation too by using innerHTML as well. If you code in an object-oriented fashion, your navigation would be generated by an object you may call in the login function and send the generated HTML back to the JavaScript controller, which will replace the existing one by using innerHTML functions.

Content Example
Another great advantage of AJAX is that it improves load time. For example, imagine a typical site: it has a design frame and content in the center area. Every click has to reload the entire frame to update the content. Ideally, you wouldn't have to transfer the code for the frame and download any of its graphic components again. Caching certainly helps, but AJAX can make it even faster. Listings 4 and 5 show a simple example in which the content is being generated in the ColdFusion model and passed back to the JavaScript controller. For simplicity, in this example I actually added the content directly in the Model.cfm page. In real-life examples, the ideal way would be to actually include a view template with a cfinclude inside the cfsavecontent tag; by doing that your views will not depend on the AJAX component. Perhaps you won't see a huge speed difference just by running this example; this is due to the fact it doesn't have any design elements. As an experiment, try to add a full design frame to my example with an average page weight of 100k or 200k in graphics and compare load times.

More Stories By Rob Gonda

Rob Gonda is an industry visionary and thought leader, speaks on emerging technologies conferences nationwide, and combines unique approaches to technology and marketing strategies. As a head of Creative Technologies at Sapient, Gonda is an interactive technical “guru,” who provides the knowledge and experience required to run high-level, multi-channel interactive campaigns that reach millions of consumers. Gonda has more than 15 years of experience in web development and 360 marketing campaigns for clients such as Coca-Cola, Adobe, Guinness, Toyota, Taco Bell, NBC, and others. His areas of specialty include emerging technologies, marketing strategy, social media, digital out-of-home, mobile, behavioral targeting, and multi-channel synergy. Before joining the strategy and technology leadership teams at Sapient, Gonda was co-founder and chief technical officer at iChameleon, a Hollywood FL-based agency renown for its emerging experiences and creative technology. In addition to his agency work, Gonda the chair for the digital media council at the Advertising Research Foundation, is the former editor-in-chief of the AJAX Developer’s Journal, co-author of “Real-World AJAX: Secrets of the Masters”, a passionate blogger who authors www.takemetoyourleader.com, and contributors to various publications such as Ad Age and Ad Week. He is a frequent figure on the speaker circuit, having presented at conferences from the senate’s CIO emerging technology to SXSW and Omma. Rob’s mission is to develop forward-thinking expertise that will ensure clients are always on par with rapidly changing technologies and maintain its ethos of evolving. You can reach him at rob[at]robgonda[dot]com and read his blog is at http://takemetoyourleader.com

Comments (27) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
Swamy 04/21/08 03:57:36 PM EDT

Hi, I need a basic clarification. will Ajax can be implemented in ColdFusion 5 version(on IIS/oracle 9i). If yes, please help me by providing some information like How to setup engine files and how to get it worked in CF5.

karthikeyan Palani 01/20/08 03:21:17 AM EST

Hi Rob,
Thank you for the introduction for ajax with coldfusion .It is very easy to get started.

Hello Ajaxer 09/10/07 10:07:01 PM EDT

did u recognize the Ajax interface as you posted your feedback, or you have no clue what Ajax means?

ajaxer 09/10/07 09:36:31 PM EDT

too bad you didnt use AJAX on this site...

SYS-CON Brazil News Desk 04/06/06 10:25:25 AM EDT

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. Enjoy Rob Gonda's highly popular ColdFusion Developer's Journal article on AJAX, the hottest software development of 2005, with plenty more heat promised for 2006.

news desk 02/13/06 08:41:32 PM EST

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. Enjoy Rob Gonda's highly popular ColdFusion Developer's Journal article on AJAX, the hottest software development of 2005, with plenty more heat promised for 2006.

Rob Gonda 01/23/06 01:35:58 AM EST

Neither FF or IE will allow cross-domain scripting.

This is a securiry risk, read more here:
http://getahead.ltd.uk/ajax/cross-domain-xhr

There are ways around it like a Server Side proxy, or third party JavaScripts like Ajax Extend (http://ajaxextended.com/)

-Rob

Morgan 01/23/06 01:21:16 AM EST

Ok had a little time to kill and decided I'd give Ajax a try and see what all the hype was about. Downloaded and installed cfAjax folowed install directions step by step. all seemed fine untill I tried to run one of the sample applications. Then I got the following error.

Permission denied to call method xmlhttpRequest.open

I decided to load a full version of ajax and still got same error In looking for an answer I keep seeing the following as the culprit with no real solution.

This error occurs when you try to make requests off-domain.

which in pouring over the code I cant find anywher that the examples are making calls to off-domain. So lets cover the basics..

yes error is same in both ie and moxilla

no I'm not using a local file (ie //file/ajax/example)

no I dont have a firewall running between my work station and my development server

yes both machines are windows running IIS

yes the url has http (ie http://myDevelopmentServer/ajax/examples/text.htm

yes I created a virtual host for ajax in both IIS and my CF Administrator

So I guess that covers it Any help would be great

Robert Blackburn - DevBlog 01/17/06 09:52:59 PM EST

Trackback Added: What Is AJAX?; While I am on the topic of CFDJ articles, there is another one titled What Is AJAX?. This one begins a lot like my earlier p...

Baz Web Development: Ajax, FastCGI, Joomla 12/31/05 05:34:46 AM EST

Trackback Added: Another “What Is Ajax” Introduction; What Is Ajax?
— 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. Enjoy Rob Gonda’s highly popu...

Rob Gonda 12/24/05 01:51:46 AM EST

Mohan, I am glad I could help; I definitely tried to make the article so easy and straight forward so everyone can get AJAX started. This will be one of the major topics for 2006.

To stay up to date with AJAX, please check my blog (www.robgonda.com) http://www.robgonda.com

Best,

-Rob

mohan 12/23/05 08:20:53 PM EST

i am new to AJAX this is a wonderful article. After seeing this article i am going to implement CFAJAX in our (production) search form.

thank you veryyyyyyyyyy much

regards mohan

Rob Gonda 12/15/05 11:56:06 PM EST

Perhaps, nothing really prevented anyone from using it; Jesse James Garrett just had to come up with the idea/concept. By the way, don't miss Jesse at the Ajax Seminar (www.ajaxseminar.com/)

Rob Gonda 12/14/05 09:25:12 PM EST

It is indeed; AJAX involves combining any server scripting language with client side, hence, JavaScript. I can see how you could probably automate a two related select boxes without writing JavaScript, but certainly not an RIA or Web 2.0 application.

Editor 12/14/05 06:53:44 PM EST

SYS-CON will soon launch a dedicated online AJAX section but it will not be called "AJAX Developer's Journal" or "AJAX Magazine." Thanks and best regards.

P.S. Please stay tuned for SYS-CON's complete educational offerings to be announced soon.

Rob Gonda 12/13/05 10:54:35 PM EST

I just looked at the source code attached to the article, and you're right, it's missing model.cfm.
You may download the complete source code at
http://www.robgonda.com/blog/index.cfm/2005/11/17/CFJD-Article-2

no comment 12/13/05 04:50:31 PM EST

I have cfajax working, but your example model.cfm doesn't do anything. What am I doing wrong?

news desk 12/11/05 08:17:11 PM EST

So What's AJAX? (Part One of Two) 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 12/11/05 05:09:45 PM EST

So What's AJAX? (Part One of Two)
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.

So What's AJAX? 12/11/05 05:01:05 PM EST

So What's AJAX? (Part One of Two)
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.

CFDJ News Desk 12/11/05 04:41:45 PM EST

So What's AJAX? (Part One of Two) 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.

Rob Gonda 12/09/05 12:34:48 AM EST

by the way, check out my latest alternative to cfajax. I developed an ajax CFC framework.

check it out at http://www.robgonda.com/blog/projects/ajaxcfc/

Rob 11/26/05 07:06:09 PM EST

For more information please visit http://www.robgonda.com/blog

Rob 11/22/05 11:46:03 PM EST

Just testing this feedback again... Trying to find out exactly what's happening.

ColdFusion Developer's Journal News Desk 10/27/05 09:13:41 PM EDT

So What's AJAX? 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.

Rob 10/27/05 08:40:25 PM EDT

I already wrote and submitted the second part of the article. It gets more in depth and provides lots of code examples.

Cheers

Rob 10/27/05 08:38:08 PM EDT

Adam, I cannot help you with FB as I really dont use it much. I built my own MVC framework, but I was an active model-glue user. I can help you with MG or MII frameworks if it works for you.