At the Forge - JavaScript, Forms and Ajax

Last month, we began to dip our toes into the water of Ajax, the shorthand name for asynchronous JavaScript and XML, which has taken the world of Web development by storm. Ajax applications are Web applications in every way, depending on the underlying combination of HTML, HTTP, URLs, JavaScript and CSS that provide a modern Web infrastructure. But, they also rely upon several of the features of modern JavaScript, including its ability to rewrite Web pages and also to make HTTP requests asynchronously.

And, indeed, this asynchronous behavior is what makes JavaScript—and Ajax, for that matter—so exciting for Web developers. No longer are we stuck with the modern equivalent of old-style 3270 terminals, with execution taking place on the server only when we move from one page to another. Now a Web page can be updated without having to reload the page.

Ajax is not a technical revolution, so much as a conceptual one, bringing with it new expectations from users and paradigms for developers. All of the technology behind Ajax has existed for several years, but it is only now that we are starting to take advantage of it in Web applications.

This month, we start to look at one simple example of an Ajax application, in a context that will probably be familiar to most Web developers: asking users to register with a Web site. By the end of this month's column, you will see how we can combine server-side programs, an HTML form and JavaScript to check the validity of a form before it is submitted. Next month, we will see how we can use Ajax to overcome the fatal flaws associated with this implementation, improving the efficiency, robustness and security of the application all at once.

If you have been developing Web sites for any length of time, you probably have needed to create a login system. Such systems come in all shapes and sizes, and require different levels of security. For our example application, we assume that each user has a user name and password. Actually, as you will see, we don't care that much about the password; the key issue here is the user name, which must be unique.

The first thing to do is create a simple table in our database to keep track of users:

CREATE TABLE Users (
id              SERIAL    NOT NULL,
username  TEXT       NOT NULL    CHECK (username <> ''),
password   TEXT      NOT NULL    CHECK (password <> ''),
    email_address  TEXT   NOT NULL  CHECK (email_address <> ''),

PRIMARY KEY(id),
UNIQUE(username)
);

The above table, defined using PostgreSQL syntax, keeps track of our users for us. Every user has a unique numeric ID, stored in the id column. (The special SERIAL datatype in PostgreSQL ensures that each row we INSERT into the database will have a unique value for id.) For the purposes of this column, we ignore the security issues associated with storing passwords in plain text.

Next, we define three columns of type TEXT, which PostgreSQL uses to define limitless text fields. Each of these fields is also given an integrity check to ensure that the value can be neither blank nor NULL. We also define the username column to be UNIQUE.

Now, from the standpoint of data integrity, we already have done our jobs. We can be sure that no two users will have the same user name, that each e-mail address (that is, each person) is allowed to have more than one user name in the system, and that the user name, e-mail address and password cannot be blank. Everything else is just icing on the cake, right?

Well, yes—but only if we are willing to give our users database errors. Most of us would prefer to offer a softer landing to our users, telling them not only that (for example) their chosen user name already has been taken by someone else, but also shielding them from the errors that PostgreSQL displays.

This means our application is going to need to take the user's requested user name, check for it in the database, and then either display an error message (prompting the user to try again) or INSERT a new row in the database.

Here is a simple example of how we might do this in a Web page. I use simple CGI programs written in Perl for the server-side examples this month, in no small part because they tend to be simple to understand and try on any host. Listing 1 (register.html) shows the HTML form users will see when they want to register with the site. Listing 2 (register.pl) shows the CGI program that will accept the form contents, check the user name in the database and then produce a message in response. My assumption is that the form will be in the main Web document root directory, and the CGI program will be in the cgi-bin directory. Obviously, if you are using a server-side language, such as PHP, the two can exist side by side.