Welcome!

AJAX & REA Authors: John Funnell, Bob Little, Kevin Hoffman, Maureen O'Gara, Onkar Singh

Related Topics: AJAX & REA

AJAX & REA: Article

What Is AJAX?

AJAX isn't a technology, or a language, and there's no recipe to implement it
By Rob Gonda
Article Rating:
September 10, 2007 05:15 PM EDT
Reads:
 202,683

Now let's create a small application that could actually benefit you. How many times have you created a registration form that can validate almost everything client-side by using JavaScript, but the username has to be validated upon submission, and if it already exists, you either have to abort and use JavaScript for the alert and send the client back, or cflocate and populate all the form fields by using the session. Wouldn't it be great if we could avoid all that and simple check the username as another JavaScript call? And not even think of creating an existing username array and have it local in the registration form?

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.

model.cfm
<cfinclude template="core/cfajax.cfm">
<cffunction name="userExists" returntype="boolean">
   <cfargument name="event">
   <cfset var return = false />
   <cfif ListFindNoCase('rob,john,paul',event)><cfset return = true /></cfif>
   <cfreturn return />
</cffunction>

Index.cfm now contains a user registration form. On submit, we'll call checkUser(). Note that we must actually call it with a return parameter or we'll always return false! No matter what happens, the form won't get submitted the traditional way. Note that I included 'utils.js' only to call the 'useLoadingMessage' function, which imitates the Gmail loading message while AJAX makes its round trip. 'Execute' sets a callback function, which checks for the ColdFusion return. If true, we'll display an error message, and if the user doesn't exist, we'll manually submit the form by using the JavaScript submit() function. The only difference in the execute call is that we pass the form value to the ColdFusion model. The CFM page is straightforward: all we're doing is a dummy check against a hard-coded list. This is the place where you would put your queries or invoke your components.

You should now be able to set up an AJAX engine, a simple HTML view, make a call, listen, process, and respond using ColdFusion, and process the response in your callback function. In the next part of this article, I'll explain how to pass complex objects by using WDDX serialization, populate tables, use innerHTML properties for advanced JavaScript view manipulations, and provide a full internal rotating banners application that tracks impressions and clicks. I will also cover cross-browser compatibility and offer some little tricks to make your AJAX application as widely compatible as possible.

Published September 10, 2007 – Reads 202,683
Copyright © 2007 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.

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. He is the former Editor-in-Chief of the AJAX Developer’s Journal, an Advanced Certified Coldfusion Developer, member of the Adobe Community Experts, frequent contributor to the CFDJ and ADJ, co-author of Real-World AJAX: Secrets of the Masters, author of AjaxCFC, holds a BS in computer science and engineering and an MBA with a specialization in entrepreneurship. Rob recently joined Sapient from ichameleon/group/ where he was a founding partner and chief technical officer. He is part of the global technology leadership team, and brings with him over ten years of experience in web development and 360 marketing campaigns for clients such as Adobe, Coca-Cola, Guinness, Toyota, Taco Bell, NBC, and others. He specializes in emerging technologies, marketing strategy, social media, and he is currently fascinated with rich internet applications, service oriented architecture, mobile, agile methodology, automation, behavioral targeting, multi-channel synergy, and identifying new trends. 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://www.robgonda.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.