JavaScript
  Home arrow JavaScript arrow Page 2 - Working with AJAX and the Prototype JavaSc...
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

Working with AJAX and the Prototype JavaScript Library
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 3
    2007-02-06

    Table of Contents:
  • Working with AJAX and the Prototype JavaScript Library
  • Using the Prototype/AJAX combination
  • Dealing with formatted (X)HTML results
  • Using the Try.these() function and the each loop

  • 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


    Working with AJAX and the Prototype JavaScript Library - Using the Prototype/AJAX combination


    (Page 2 of 4 )

    True to form, one of the Prototype's strengths relies upon its robust implementation of AJAX to trigger requests to the server in the background, a feature that indeed makes using this technology a breeze.

    Speaking more specifically, Prototype allows you to work with AJAX by using two primary cross-browser objects. The first one is called "AJAX.Request" and is really intuitive to use. It allows you to not only send HTTP requests silently, but also to keep track of the different states of these requests.

    The other object related to AJAX is named "AJAX.Updater." It can be really useful if your application expects a response from the server, formatted as (X)HTML.

    But I'm getting ahead of myself. First I want to show you how to create a simple AJAX application that fetches data from a text file and displays the corresponding results on the browser by using the mentioned "AJAX.Request" object.

    Here is the corresponding (X)HTML file that uses an AJAX.Request object to fetch file data. Its signature is as follows:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-
    8859-1" />
    <title>Example Ajax.Request class</title>
    <script language="javascript" src="prototype-1.4.0.js"></script>
    <script language="javascript">
    // example using the Ajax.Request class
    function fetchFileData(){
       var record=$F('record');
       var ajaxobj=new Ajax.Request('http://localhost/prototype/getfiledata.php',{method: 'get',parameters: 'record='+record,onComplete: displayData});
    }
    function displayData(requestObj){
       $('datacontainer').innerHTML=requestObj.responseText;
    }
    window.onload=function(){
       if(document.getElementById && document.createElement &&
    document.getElementsByTagName){
         var btn=$('search');
         if(!btn){return};
         btn.onclick=fetchFileData;
       }
    }
    </script>
    </head>
    <body>
      <form>
        Enter the record you want to retrieve from file <input
    type="text" id="record" /><br />
        <input type="button" name="search" value="Search Record"
    id="search" />
      </form>
      <div id="datacontainer"></div>
    </body>
    </html>

    As I said before, the above file utilizes an AJAX.Request object to fetch a sample "getfiledata.php" file, which logically is located in the server. Also, you should notice the different parameters that are passed to this object before sending the respective request.

    For this example, I specified the method to be used (GET), in addition to a "record" variable, which is also sent to the server as part of the requesting process. Finally, the "displayData()" callback function will be called up, once the request has been completed, via the "onComplete" option.

    Besides, the "AJAX.Request" object exposes two additional options for tracking the status of a given request, called "onSuccess" and "onFailure" respectively. As you may guess, each of these options can be associated with a new callback function to handle eventual errors and successful requests as well. Pretty simple, isn't it?

    Now that you have earned how to feed an AJAX.Request object with the proper parameters, let me show you the short definition for the previous "getfiledata.php" PHP script. It is responsible for fetching data from a simple text file. Its signature is as following:

    <?php
    $lines=file('data.txt');
    echo $lines[$_GET['record']];
    ?>

    And finally, the example is completed by showing you the signature that corresponds to the sample "data.txt" text file:

    This is line 1 of the data file
    This is line 2 of the data file
    This is line 3 of the data file
    This is line 4 of the data file
    This is line 5 of the data file
    This is line 6 of the data file
    This is line 7 of the data file
    This is line 8 of the data file
    This is line 9 of the data file
    This is line 10 of the data file

    As you'll realize, creating an AJAX-based application similar to the one shown above is in fact a straightforward process that requires a minimum of effort. Here is where Prototype starts to shine!

    After demonstrating a basic implementation of the AJAX.Request object that comes included with this library, it's time to leap forward and take a look at the other AJAX-related class that I mentioned a few lines before. In this case, I'm talking about the neat "AJAX.Updater" class, which I'll be reviewing in the following section.

    To see how to use this brand new class, jump ahead and read the section to come.

    More JavaScript Articles
    More By Alejandro Gervasio


       · In this second part of the series, you'll learn how to use the excellent AJAX...
     

    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 4 hosted by Hostway
    Stay green...Green IT