Prototype and AJAX Tutorial

Introduction to AJAX

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS and Java Script.

For a complete understanding on AJAX, please go through our simple AJAX Tutorial.

Prototype Support for AJAX

Prototype framework enables you to deal with Ajax calls in a very easy and fun way that is also safe (cross-browser). Prototype also deals in a smart way with JavaScript code returned from a server and provides helper classes for polling.

Ajax functionality is contained in the global Ajax object. This object provides all the necessary methods to handle AJAX requests and responses in an easy way.

AJAX Request

Actual requests are made by creating instances of the Ajax.Request() object.

new Ajax.Request('/some_url', { method:'get' });

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

AJAX Response Callbacks

Ajax requests are by default asynchronous, which means you must have callbacks that will handle the data from a response. Callback methods are passed in the options hash when making a request −

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
   },
   onFailure: function() { alert('Something went wrong...') }
});

Here, two callbacks are passed in the hash −

• onSuccess
• onFailure

Any of the above two call is called accordingly based on the status of the response. The first parameter passed to both is the native xmlHttpRequest object from which you can use its responseText and responseXML properties, respectively.

You can specify both callbacks, one or none - it's up to you. Other available callbacks are −

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

They all match a certain state of the xmlHttpRequest transport, except for onException, which fires when there was an exception while dispatching other callbacks.

NOTE − The onUninitialized, onLoading, onLoaded, and onInteractive callbacks are not implemented consistently by all browsers. In general, it's best to avoid using these.

Prototype AJAX Methods

Ajax object provides all the necessary methods to handle AJAX requests and responses in an easy way. Here is a complete list of all the methods related to AJAX.

NOTE − Make sure you at least have the version 1.6 of prototype.js.