Home arrow JavaScript arrow Page 3 - Using AJAX to Build a Web Site Indexing Application with Prototype
JAVASCRIPT

Using AJAX to Build a Web Site Indexing Application with Prototype


One of the best ways to take advantage of the numerous features that come packaged with the Prototype JavaScript library is by using it for developing a real world application. So, welcome to the second installment of the series "Building a web site indexing application with Prototype." If you’re interested in utilizing this robust package for creating an extensible system that indexes web site data, this series will offer you a straightforward guide on how to do this, with minor hassles.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
February 27, 2007
TABLE OF CONTENTS:
  1. · Using AJAX to Build a Web Site Indexing Application with Prototype
  2. · Going backwards: listing the complete source code that corresponds to the application’s user interface
  3. · Submitting and displaying web site data in the background
  4. · Assembling the pieces

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Using AJAX to Build a Web Site Indexing Application with Prototype - Submitting and displaying web site data in the background
(Page 3 of 4 )

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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 5 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials