Tutorials Point


  Learn Prototype
  Prototype Resources
  Selected Reading

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

Prototype AJAX Request() Method


previous next AddThis Social Bookmark Button


Advertisements

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:

  1. Created
  2. Initialized
  3. Request sent
  4. Response being received (can occur many times, as packets come in)
  5. Response received, request complete

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

  1. onCreate (this is actually a callback reserved to AJAX global responders)
  2. onUninitialized (maps on Created)
  3. onLoading (maps on Initialized)
  4. onLoaded (maps on Request sent)
  5. onInteractive (maps on Response being received)
  6. onXYZ (numerical response status code), onSuccess or onFailure (see below)
  7. 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;

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

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}
});


previous next Printer Friendly

Advertisements


  

Advertisements