Using AJAX to Build a Web Site Indexing Application with Prototype

Just in case you don’t know, Prototype offers an useful object called "AJAX.Updater." It makes working with HTTP requester objects really easy. In this case, I’m going to use the neat functionality provided by this object to first collect the web site data entered by the user, that is its URL, title and description respectively, and then request a PHP file, responsible for adding this information to a simple MySQL database table.

Therefore, here is the first JavaScript function that I’m going to use here, which as I said before, is tasked with inserting the data for new web sites into the corresponding database. Please, examine the signature for this brand new function:

// add new web site to index system
function addWebSite(e){
   var params='url='+$F('url')+'&title='+$F('title')
+'&description='+escape($F('description'));
   var xmlobj=new Ajax.Updater('sitecontainer','handle_site_data.php',{method:
'get',parameters: params});
   // prevent form from submitting
   Event.stop(e);
}

If you study the definition for the above "addWebSite()" function, certainly you’ll agree with me that the "AJAX.Updater" object that comes bundled with Prototype is remarkably useful.

In this case, first I used the $F function (also included with the library) to collect the data that corresponds to a new web site, and then instantiated an "AJAX.Updater" object to request a PHP file named "handle_site_data.php" which is responsible for adding this information to the respective database table.

Also, it’s worth noting that all the responses sent by the server will be displayed in HTML format within a DIV element identified as "sitecontainer." And finally, the following statement:

Event.stop(e);

prevents the form from being submitted, via the "stop()" method that belongs to the "Event" object. Quite simple, right?

Okay, now that you know how new web site data is added to the pertinent database table using the useful "AJAX.Updater" object, please pay attention to the following JavaScript function. It is aimed at initializing this web site indexing application. Its signature is as follows:

// initialize indexing application
function initializeIndexer(){
   // attach handler to web site form           
   Event.observe('siteform','submit',addWebSite);
   // display website index when web page is loaded
   var xmlobj=new Ajax.Updater('sitecontainer','handle_site_data.php',{method: 'get'});
}

// attach handler to window object
Event.observe(window,'load',initializeIndexer,false);

As you can see, the above function performs a few helpful initialization tasks, like controlling the submission of the respective web form via the "Event.observe()" method, in addition to displaying all the existing web site data the first time the web page is loaded.

To summarize, the two previous JavaScript functions complete the behavioral layer for this web site indexing application, something that demonstrates how powerful and efficient the Prototype library can be when creating AJAX-based programs.

At this stage, now that you have grasped the logic that stands behind the couple of functions that were defined previously, it’s time to read the following section. I'll give you the full source code that corresponds to this application, including all the JavaScript code that was shown a few lines above.

So, don’t waste any more time; keep reading.