Copyright © tutorialspoint.com

Prototype AJAX PeriodicalUpdater() Method

previous next


Advertisements

This AJAX method periodically performs an AJAX request and updates a container's contents based on the response text.

Containers are specified by giving IDs of the HTML elements like division or paragraphs. See example below.

Callbacks are called at various points in the life-cycle of a request, and always feature the same list of arguments. They are passed to requesters right along with their other options.

Syntax:

new Ajax.PeriodicalUpdater(container, url[, options]);

Ajax.PeriodicalUpdater features all the Common Options and callbacks, plus those added by Ajax.Updater().

There are two more options specific to this method:

OptionDescription
frequencyDefault value is 2.
This is the minimum interval at which AJAX requests are made.
decayDefault value is 1.
This controls the rate at which the request interval grows when the response is unchanged.

Return Value :

Disabling and Enabling a PeriodicalUpdater :

You can pull the brake on a running PeriodicalUpdater by simply calling its stop method. If you wish to re-enable it later, just call its start method. Both take no argument.

Example:

<html>
<head>
<title>Prototype examples</title>
   <script type="text/javascript" 
   src="/javascript/prototype.js">
   </script>
<script>

function startTimer()
{
   
   new Ajax.PeriodicalUpdater('datetime', '/cgi-bin/timer.cgi', {
     method: 'get', frequency: 3, decay: 2
   });
 
}

</script>
</head>

<body>

  <p>Click start button to see how Current Time changes.</p>
  <p>This example may not work in IE.</p>
  <br />
 
  <div id="datetime">Current Time</div>
  <br />
  <br />
  <input type="button" value="Start" onclick="startTimer();"/>

</body>
</html>

Here is the content of timer.cgi script:

#!/usr/bin/perl

print "Content-type: text/html\n\n";

$datetime = localtime;
print $datetime;
print "<br />";

To understand it in better way you can Try it yourself.


previous next