AJAX using Prototype Library - II

Wednesday 7 March 2012 Posted by Sridharan Natarajan
The global Ajax object of the prototype library deals with the AJAX functionality. The xmlHttpRequest object creation for various browsers are abstracted by this Ajax object. The entire logic from creating the xmlHttpRequest to sending a request can be achieved in a one line code.

new Ajax.Request('request_url.php', { method:'get' });

The first parameter is the URL of the request; the second is the options. The method refers to the HTTP method to be used; by default method is POST.

Handling Responses

We must have a callback to handle the response back from the ajax request. The callback can be defined in the the options hash.

In the below example two callbacks are defined for success and failure responses. Callback methods are called accordingly based on the response status.

new Ajax.Request('request_url.php',
  {
    method:'get',
    onSuccess: function(res){
      var response = res.responseText;
      alert("Response: " + res);
    },
    onFailure: function(){ alert('Unable to process...') }
  });

Apart from the two callbacl methods used above, prototype has few other callbacks.

  • onUninitialized
  • onLoading
  • onLoaded
  • onInteractive
  • onComplete
  • onException

 Passing Parameters

The additional parameters can be passed in the options hash.

new Ajax.Request('request_url.php', {
  method: 'get',
  parameters: {action: 'update', uid: 6}
  });

Parameters can be used with GET and POST methods.
Labels:

Post a Comment