Ajax Application Design

Asynchronous is the operative word with Ajax, and here's what it's all about.

This month, we finally produced an application worthy of the Ajax moniker. We used a combination of JavaScript (on the client side) and Perl (on the server side) to check whether a user name was already taken. In doing so, we saw how to use the POST method for submitting data and sent a named parameter to the server. In making these changes, we turned a simple, insecure and unscalable program into a relatively secure and scalable one, without sacrificing the immediate response and interactivity that Ajax brings to the table.

At the same time, you might have noticed our HTML page contained a large number of functions that will be useful for a wide variety of Ajax applications. Starting next month, we will look at some of the open-source libraries that make it easier to create Ajax applications, allowing you to concentrate on the higher-level details.

Reuven M. Lerner, a longtime Web/database consultant, is a PhD candidate in Learning Sciences at Northwestern University in Evanston, Illinois. He currently lives with his wife and three children in Skokie, Illinois. You can read his Weblog at altneuland.lerner.co.il.



Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Good article

gds's picture

Really good articles on ajax fundamentals. One comment I have is that it is not pointed out in Part 2 and 3 that the database access, register.pl, is still in effect. It is also easy to change check-name-exists.pl above to use similar database methods as register.pl users:

use strict;
use diagnostics;
use warnings;
use CGI;
use CGI::Carp;
use DBI;
# ------------------------------------------------------------
# # Connect to the database
# ------------------------------------------------------------
my $dbname = 'test';
my $dbuser = 'gene';
my $dbpassword = '';
my $dbh = DBI->connect("DBI:mysql:dbname=$dbname",
$dbuser, $dbpassword,
AutoCommit => 1, RaiseError => 1,
PrintError => 1, ChopBlanks => 1}) ||
print "Error connecting: '$DBI::errstr' ";

# Define the usernames that are taken
# (Use a hash for lookup efficiency)
#my %usernames = ('abc' => 1,
# 'def' => 1,
# 'ghi' => 1,
# 'jkl' => 1);
# ------------------------------------------------------------
my $query = new CGI;
print $query->header("text/plain");
# Get the POST data
my $postdata = $query->param("POSTDATA");
# Get the username
my ($name, $value) = split /=/, $postdata;
my $username = '';
if ($name eq 'username')
$username = $value;
my $select_sql = "SELECT COUNT(*) FROM Users WHERE username = ?";
my $select_sth = $dbh->prepare($select_sql);
my ($username_is_taken) = $select_sth->fetchrow_array();

# If this username is defined, say "yes"!
if ($username_is_taken)
print "yes";
# Otherwise, say "no"!
print "no";

I also change it to use onblur instead of onchange but had to pass a parameter to checkUserName():

function checkUsername(val) {
var username = val; //document.forms[0].username.value;
xhr.send("username=" + escape(username));