Writing Web Applications with Web Services and Ajax

If you've done any Web development at all recently, you've no doubt
heard the buzz going on about Web Services and Ajax. The industry hype
is so prevalent that you'd almost think people were talking about the
next Microsoft operating system. Fortunately, they're not. Web Services
and Ajax are two Web technologies that allow developers to create more
interesting Web applications as well make the development easier and
less error-prone.

Now that I've added to the hype, let me take some time to outline what
we mean when we say “Web Services and Ajax”.

A Web Service is a program that is accessible over the Internet and
provides a specific service, such as searching a library's
collection or getting bid history from eBay. We're not talking about a
full-fledged application, but rather a Web-based Application Programming
Interface (API) that can can be called over the Internet by a given
program to perform a needed function. Often, the results of the call to
a given Web Service are returned in XML format, which the calling program
can manipulate easily.

When people discuss Web Services, they often mention things like
JSON, REST, SOAP or XML-RPC. These are simply
a few of the protocols available for calling a Web Service. Being
familiar with these protocols lets you make use of some of the
really powerful Web Services being provided by the likes of Amazon,
Google and eBay. However, for my personal Web development, I've found
these protocols to be a bit heavy.

Ajax is a mechanism that allows a Web page to make calls back to the
server without refreshing the page or using hidden frames. For example,
if a user changes the value of a form field, the Web page could tell
the server to make a change to a database, without having to refresh the
Web page, as would be needed in the case of a standard CGI script. From
the user's perspective, the update just happens.

In this article, I outline a set of very primitive Web
Services that perform specific functions on a database. The calls to the
Web Services will be done via Ajax. Essentially, we're going to build a
simple contact management program that stores a person's first name, last
name and phone number. We'll be able to move up and down
through the database, make additions and corrections
and delete records. The neat thing is that
once the page is initially loaded, we won't have to refresh it again,
even when we make changes.

Before we can get started though, we need to have a table in a database
in which to store the information. I happen to use PostgreSQL as my preferred
DBMS. For our simple application, we need only one table (Listing 1).

The snippet of SQL in Listing 1 creates a sequence and a table. The table structure is
pretty straightforward for our simple application. The only thing worth
mentioning is the id field. By default, when records are inserted
into our contacts table, the value of the id field is set to the next
number in the contacts_id_seq sequence. The end result is that each of our
contact records has a unique integer number that can be used to locate it.

Now that we have the database table defined, we can start to flesh out the
actual application. Listing 2 shows the HTML for our simple application,
and Figure 1 shows what the application looks like in a Web browser.

As you can see, our simple application is just that, simple. I've stripped
it down to the bare necessities to make our discussion easier.

Figure 1 shows how our application allows us to insert a
new contact record or delete the current record by pressing the buttons
at the top. At the bottom of the application, we can move
to the previous or next record in the database. Of course, we have input
fields to hold the first and last name as well as the phone number. We also have a form field to display the record id number. In
a real application, I'd probably make this a hidden field, but for the
sake of instruction, I've left it visible.

Referring back to Listing 1, you can see that the page is fairly
straightforward. Aside from importing the contacts.js JavaScript,
the first part of the page is standard boilerplate. Things get
interesting when we get to the form buttons and fields.

Let's look at the “New” button:

<input type=button name=new value="New"
onclick="insert_record();">

This button simply calls a JavaScript function called insert_record() any
time a user presses the button. The Delete, Previous and
Next buttons all work similarly. The magic is in the
JavaScript. Let's look at the JavaScript first (Listing 3).