Ajax Application Design

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

Given the above list, how can we move from the simple program we wrote last month to one that will fulfill our scalability and security requirements?

When we created our simple Ajax user name-checking program in last month's column, we used two of these three elements. We created an HTML form (shown in Listing 1) that would let people register with our Web site by entering a user name, password and e-mail address. We then indicated that whenever the username text field was changed, the checkUsername JavaScript function should be invoked:


   <input type="text" name="username" onchange="checkUsername()" />

checkUsername then asked our server—the same server from which the current page of HTML came—for the contents of a text file:

   function checkUsername() {
      // Send the HTTP request
   xhr.open("GET", "usernames.txt", true);
   xhr.onreadystatechange = parseUsernames;
   xhr.send(null);
   }

This is the first place where we will need to make a change. Rather than send a GET request without any parameters to request a static document, we will send a POST request with a single parameter (username), which will result in the execution of a server-side program.

Finally, our callback routine (parseUsernames) iterated over the list of user names that the server had sent, using the DOM to warn the user if it found a match. This is the other place where we will need to make a change. But in this case, the change will be a simplification. No longer will we need to parse through the user names sent by the server. Instead, we will need to identify only whether the response was positive or negative.

______________________

Comments

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:


#!/usr/bin/perl
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);
$select_sth->execute($username);
my ($username_is_taken) = $select_sth->fetchrow_array();

# If this username is defined, say "yes"!
if ($username_is_taken)
{
print "yes";
}
# Otherwise, say "no"!
else
{
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));

Webinar
One Click, Universal Protection: Implementing Centralized Security Policies on Linux Systems

As Linux continues to play an ever increasing role in corporate data centers and institutions, ensuring the integrity and protection of these systems must be a priority. With 60% of the world's websites and an increasing share of organization's mission-critical workloads running on Linux, failing to stop malware and other advanced threats on Linux can increasingly impact an organization's reputation and bottom line.

Learn More

Sponsored by Bit9

Webinar
Linux Backup and Recovery Webinar

Most companies incorporate backup procedures for critical data, which can be restored quickly if a loss occurs. However, fewer companies are prepared for catastrophic system failures, in which they lose all data, the entire operating system, applications, settings, patches and more, reducing their system(s) to “bare metal.” After all, before data can be restored to a system, there must be a system to restore it to.

In this one hour webinar, learn how to enhance your existing backup strategies for better disaster recovery preparedness using Storix System Backup Administrator (SBAdmin), a highly flexible bare-metal recovery solution for UNIX and Linux systems.

Learn More

Sponsored by Storix