Eight Weeks of Prototype: Week 5, Ajax with Prototype
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.
<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>
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
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 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.PeriodicalUpdater, refer to the Prototype API documentation at http://prototypejs.org/api/ajax.