Writing Web Applications with Web Services and Ajax

var req;

function insert_record () {
   send_transaction("/cgi-bin/insert.pl");
   return 1;
}

function select_record (i) {
   send_transaction("/cgi-bin/select.pl?id=" + i);
   return 1;
}

function delete_record (i) {
   send_transaction("/cgi-bin/delete.pl?id=" + i);

   var id = document.getElementById("id");
   select_record(id);
   return;
}

function update_record (i, field, value) {
   send_transaction("/cgi-bin/update.pl?id=" + i +
   "&field=" + field + "&value=" + value);
   return 1;
}

function send_transaction (i) {

   if (window.XMLHttpRequest) {
      req = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
      req = new ActiveXObject("Microsoft.XMLHTTP");
   }

   if (req) {
      req.onreadystatechange = process_results;
      req.open("GET", i, true);
      req.send(null);
   }
}

function process_results () {
   var name = "";
   var value = "";
   var fields;
   var i;
   var length;

   if (req.readyState < 4) { return 1; } // transaction
                                         // not done, yet

   var xml = req.responseXML;
   var result = xml.getElementsByTagName("result").item(0);

   fields = result.getElementsByTagName("field");
   length = fields.length;

   for (i=0; i<length; i++) {
      var field = fields[i];

      name = field.getAttribute("name");
      value = field.getAttribute("value");


      var form_field = document.getElementById(name);
      form_field.value = value;
   }

   return 1;
}

The insert_record() JavaScript function, which is called when a user presses the New button, is the simplest of the JavaScript functions. All insert_record() does is use the send_transaction() function to call the insert.pl Web Service. In fact, the insert_record(), delete_record(), select_record() and update_record() functions are all wrappers for send_transaction().

The send_transaction() function is where the Ajax comes into our application. This function takes the URL of the service that needs to be called as well as any parameters that need to be passed to the service via HTTP's GET method. Then, the function creates an object that allows the service to be called. We have to jump through a small hoop, because Microsoft chose to call this object ActiveXObject while almost every other browser calls it XMLHttpRequest. Once the object is created, by whatever name, we tell the object to call our Web Service and then call our process_results() function when the call has returned its results. This is done in the line that assigns the function name to the object's onreadystatechange property.

Well, I lied a little bit. It turns out that the browser will call our process_results() function up to four times at various stages during the service request. Each time the function is called, the value of the readyState property is changed to reflect what phase of the transaction is occurring. Unfortunately, there doesn't seem to be much agreement on when the function is called. The only thing that all browsers seem to agree on is that when the transaction is complete, the readyState property is set to 4. Checking for this value is the first thing our process_results() function does. If the transaction isn't complete, we simply return quietly.

Once the transaction is complete, we can recover the resulting XML from the request object's responseXML property. Once we have the XML, we loop over each field element, making a note of both the field name and value. Then we find the corresponding field in the HTML document and assign the new value to it. So by sending the appropriate XML, the Web Services can arrange for any, or all, of the Web form fields to be updated.

If you think the JavaScript was easy to follow, wait until you see the Perl scripts that implement the Web Services; they're even easier to understand and debug. The insert.pl program is shown in Listing 4.

#!/usr/bin/perl

use DBI;

$dbh = DBI->connect("dbi:Pg:dbname=database",
 ↪"postgres", "password");

$dbh->do("insert into contacts (first,last,phone) values
(NULL,NULL,NULL)");

$sth = $dbh->prepare("select last_value from
 ↪contacts_id_seq");
$sth->execute();
($index) = $sth->fetchrow_array();

print "Content-type: text/xml\n\n\n";

print "<result>\n";
print "<field name=\"id\" value=\"$index\"></field>\n";
print "</result>\n";

All this program does is connect to a database, insert an empty record into the contacts table, retrieve the id of the newly created record and return the results in a block of XML with a text/xml MIME type. The resulting XML resembles that shown in Listing 5.