Download This Article

Download this article or the entire “Eight Weeks of Prototype” series with all listings and files.

Eight Weeks of Prototype: Week 5, Ajax with Prototype

By Quentin Zervaas, 30 April 2008, Ajax, JavaScript, JSON, PHP, Prototype

Ajax.Updater

The Ajax.Updater class is an extension of the normal Ajax.Request class, specifically used to update a DOM element with whatever content is returned from the HTTP sub-request. The alternative would be to use Ajax.Request yourself directly, then manually handle the response and update the required element accordingly.

Listings 2 and 3 show an example of using Ajax.Updater. In Listing 2 is some basic HTML content that we are going to load into the page shown in Listing 3.

Listing 2 Sample content to load using Ajax.Updater (listing-2.html)

<p>
    Here is some HTML content, with any element you would normally
    use, such as <strong>bold</strong> and <a href="http://www.example.com">a link</a>.
</p>

Listing 3 Populating an element using Ajax.Updater (listing-3.html)

<html>
    <head>
        <title>Populating an element using Ajax.Updater</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div>
            <input type="button" value="Click Me!" id="myButton" />
        </div>
 
        <script type="text/javascript">
            function onButtonClick(e)
            {
                var button = Event.element(e);
 
                new Ajax.Updater(button.up(), 'listing-02.html');
            }
 
            $('myButton').observe('click', onButtonClick);
        </script>
    </body>
</html>

When you load this code in your browser you will see a button that says "Click Me!". When you click the button, an Ajax request is triggered to request the listing-02.html file. This occurs in the event handler onButtonClick.

The first argument to Ajax.Updater is the element to populate with the results from the Ajax request. The second argument is the URL to fetch. As mentioned previously, we could also specify options to pass as the final arguments. Because this example is somewhat trivial, I have not done so, but you will see how to do this later in this article.

If you're unsure how the event handling code works in this example, please refer to the fourth article in this series.

Ajax.PeriodicalUpdater

The Ajax.PeriodicalUpdater class is somewhat similar to the Ajax.Updater class, except instead of performing a single sub-request and updating an element it will continue to perform sub-requests after a specified period, thereby continually updating the element's content.

Because this class and Ajax.Updater are extensions to the base Ajax.Request class, the remainder of this article will focus specifically on using Ajax.Request. For more information about Ajax.Updater and Ajax.PeriodicalUpdater, refer to the Prototype API documentation at http://prototypejs.org/api/ajax.

Next: Request Options

Prototype and Scriptaculous in Action [Ajax]

Eight Weeks of Prototype: Week 5, Ajax with Prototype

Ajax.Updater

Ajax.PeriodicalUpdater

In This Article