JavaScript
  Home arrow JavaScript arrow Page 3 - Using AJAX to Build a Web Site Indexing Ap...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
JAVASCRIPT

Using AJAX to Build a Web Site Indexing Application with Prototype
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 5
    2007-02-27

    Table of Contents:
  • Using AJAX to Build a Web Site Indexing Application with Prototype
  • Going backwards: listing the complete source code that corresponds to the application’s user interface
  • Submitting and displaying web site data in the background
  • Assembling the pieces

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    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.

    More JavaScript Articles
    More By Alejandro Gervasio


       · In this second part of the series, the set of JavaScript functions, aimed at sending...
       · it's wonderful ,thank you very much.
       · Thank you for the kind comments on my AJAX article. I really appreciated them very...
     

    JAVASCRIPT ARTICLES

    - Using Click Interceptions with a Database-Dr...
    - Using JavaScript Click Interceptions in an I...
    - Using Click Interceptions with JavaScript
    - QuickSort in Action
    - Quicksort
    - Using Mod_Security to Protect Your Server
    - Detecting and Countering Server Intrusions
    - Securing Your Web Server
    - Building a Secure Web Server
    - Protecting the Server
    - Book Review: Learning the Yahoo! User Interf...
    - Dynamically Generate a Selection List in a R...
    - Intergrate DWR into Your Java Web Application
    - Detect Browser Compatibility with the Reques...
    - Using the EXT JS Date Picker Widget






    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 2 hosted by Hostway
    Stay green...Green IT