John Crosby | Realeyes Media

So, yeah, its Christmas eve…and guess what I had some extra time this afternoon! So, I decided to take some of the initial steps to learn AJAX. I decided to start off with prototype. For a pretty simple example I found a quick zip code lookup tutorial by Pete Freitag.

Here are the peices/parts:

The HTML

<link rel="stylesheet" type="text/css" /> <script type="text/javascript"></script> <script language="javascript" type="text/javascript"></script> <form>     zip:
<input style="background-color: #ffffa0" name="zip" id="zip" onkeyup="checkZip();" type="text" /> </form>

The JavaScript (ZipCode.js)

function checkZip() {
if($F('zip').length == 5) {
var url = 'checkZip.cfm';
var params = 'zip=' + $F('zip');
var fullUrl = url + "&" + params;
var ajax = new Ajax.Updater(
{success: 'zipResult'},
url,
{method: 'get', parameters: params, onFailure: reportError});
}
}
function reportError(request) {
$F('zipResult') = "Error";
}

The ColdFusion (checkZip.cfm)

<p class="badzip">Please enter a valid zip code.

SELECT name, state FROM zips
WHERE zip =

</p><p class="goodzip">#ziplookup.name#, #ziplookup.state#

</p><p class="badzip">Zip code not found.

There is also a zip code db (MySQL) for the data end of things.

Considering the lack of code I’m thinkin’ that is pretty slick to get external data into an HTML page with no page refresh. I’m pleased so far.

Helpful resources found so far:
Quick Guide: http://particletree.com/features/quick-guide-to-prototype/
Scriptaculous Wikie for Prototype: http://wiki.script.aculo.us/scriptaculous/show/Prototype
Unofficial Prototype documentation: http://www.sergiopereira.com/articles/prototype.js.html#UsingAjaxUpdater

Merry Christmas!