Tricklin

All in all, I'd have to say I had a very pleasant experience using AJAX for the first time. The most difficult aspect of working with AJAX, was learning how to implement it. Once I found the right documentation, it was relatively smooth sailing.

Getting Started

First off, you should download an AJAX library. I recommend the Prototype javascript library. What is prototype.js anyway?

Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest AJAX library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

Basically, a guy named Sam Stephenson spent, I'm sure, an inordinate amount of time writing this great javascript file in order to make life easier on all of us. Using this file makes writing your AJAX code much easier. As mentioned earlier, the hardest part about getting started was finding documentation. So, in order to make it simpler for you, I'm going to include links to the documentation that I used to get started.

• Developer Notes for prototype.js - This documentation was exactly what I needed, and could quite possibly be the only thing you'll need. It contains some really great examples in the beginning of the document, and the contains more detailed information later on. After reading the first few paragraphs, I was able to get started, and then used the rest of the document for reference (this part of the document conveniently happens to be named "Reference for Prototype.js") haha.
• Working With Events In Prototype - How to use prototype with Keystrokes, Mouse Clicks, Mouse Hovers, etc.
• Eas y Ajax with Prototype

What To Watch Out For

Internet Explorer loves to cache everything. This is particularly a problem when you are using AJAX. What works well in Firefox, may not seem like it's working in IE. I learned this the hard way. The application I implemented AJAX on is my personal online checkbook register. So the idea was to allow a user to stay on one page, add a new transaction, submit it, and have the list show the latest transaction while also changing the account balance all without refreshing the window. This worked great in Firefox, yet nothing seemed to be happening in IE. When in actuality, the database inserts were definitely happening, yet the list and account balance refresh was not. It took me a while to figure out what and why this was happening, but finally figured it out when I came across this article "Ajax IE caching issue". It seems as though IE believes that GET requests (method="get") need to be cached, while POST requests do not. This meant changing all my requests from GETs to POSTs. Finding out how to do this took a bit of research as well, so I'm going to just give this to you here (if you already know how to do this, then feel free to ignore the following). The solution, as you'll see is extremely simple (changes are marked in bold & italic):
Example GET request:

function insertRow() {
  var url = 'ajax_file.cfm';
  var param1 = $F('p1');
  var param2 = $F('p2');
  var param3 = $F('p3');
  var pars = 'P1='
      + param1
      + '&P2='
      + param2
      + '&P3='
      + param3;
  var myAjax = new Ajax.Request(
    url,
    {
      method: 'get',
      parameters: pars,
      onComplete: runNextFunction
    });
}

Example changed to a POST request:

function insertRow() {
  var url = 'ajax_file.cfm';
  var param1 = $F('p1');
  var param2 = $F('p2');
  var param3 = $F('p3');
  var pars = 'P1='
      + param1
      + '&P2='
      + param2
      + '&P3='
      + param3;
  var myAjax = new Ajax.Request(
    url,
    {
      method: 'post',
      postBody: pars,
      onComplete: runNextFunction
    });
}

Well there you have it. The IE issue is fixed, right? Well... Not exactly. This solution only seemed to work part of the time. So, after some more digging, I found the definitive solution. Although not elegant, it fixes the problem. That solution is to add a random number parameter onto the end of the parameters that get passed. "Why would this work?" you might ask. Well this random number will basically fool the browser into thinking it has to return a page from a URL it's never been to before, rather than thinking it has it in cache (learn more).

POST Example with Random Number

function insertRow() {
  var url = 'ajax_file.cfm';
  var param1 = $F('p1');
  var param2 = $F('p2');
  var param3 = $F('p3');
  var pars = 'P1='
      + param1
      + '&P2='
      + param2
      + '&P3='
      + param3;
      + '&rnd='
      + Math.random()*99999; //using rather large multiplier to ensure uniqueness
  var myAjax = new Ajax.Request(
    url,
    {
      method: 'post',
      postBody: pars,
      onComplete: runNextFunction
    });
}

I feel that the information in this article is exactly what is needed to get your feet wet with AJAX. I plan to create a tutorial that will walk you through a real world working example of AJAX using ColdFusion and a simple MS Access Database.