Prototype - AJAX Request() Method

This AJAX method initiates and processes an AJAX request. This object is a general-purpose AJAX requester: it handles the life-cycle of the request, handles the boilerplate, and lets you plug in callback functions for your custom needs.

In the optional options hash, you can use any callback function like onComplete and/or onSuccess depending on your custom needs.

Syntax

new Ajax.Request(url[, options]);

As soon as the object is created, it initiates the request, then goes on processing it throughout its life-cyle. The defined life-cycle is as follows −

  • Created
  • Initialized
  • Request sent
  • Response being received (can occur many times, as packets come in)
  • Response received, request complete

There is a set of callback functions, defined in Ajax Options,, which are triggered in the following order −

  • onCreate (this is actually a callback reserved to AJAX global responders))
  • onUninitialized (maps on Created)
  • onLoading (maps on Initialized)
  • onLoaded (maps on Request sent)
  • onInteractive (maps on Response being received)
  • onXYZ (numerical response status code), onSuccess or onFailure (see below)
  • onComplete

Portability

Depending on how your browser implements XMLHttpRequest, one or more callbacks may never be invoked. In particular, onLoaded and onInteractive are not a 100% safe bet so far. However, the global onCreate, onUninitialized and the two final steps are very much guaranteed.

Return Value

new Ajax.Request

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 SubmitRequest() {
            new Ajax.Request('/cgi-bin/ajax.cgi', {
               method: 'get',
               onSuccess: successFunc,
               onFailure:  failureFunc
            });
         }
         function successFunc(response) {
            if (200 == response.status) {
               alert("Call is success");
            }
            var container = $('notice');
            var content = response.responseText;
            container.update(content);
         }
         function failureFunc(response) {
            alert("Call is failed" );
         }
      </script>
   </head>

   <body>
      <p>Click submit button see how current notice changes.</p>
      <br />
 
      <div id = "notice">Current Notice</div>
      <br />
      <br />
      <input type = "button" value = "Submit" onclick = "SubmitRequest();"/>
   </body>
</html>

Here is the content of ajax.cgi.

#!/usr/bin/perl

print "Content-type: text/html\n\n";
print "This content is returned by AJAX cgi <br />";
print "Current Time " . localtime;

Output

Parameters and the HTTP Method

You can pass the parameters for the request as the parameters property in options −

new Ajax.Request('/some_url', {
   method: 'get',
   parameters: {company: 'example', limit: 12}
});
prototype_ajax_tutorial.htm
Advertisements