Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


The Productivity Perks Behind Prototype's Popularity : Page 3

Learn how to leverage the popular Prototype JavaScript framework to speed up your AJAX-based development. You'll see how to use JavaScript in an object-oriented way.

AJAX Made Easy with Prototype
The core of AJAX is the XMLHttpRequest (XHR) object, which you can use to send asynchronous requests to the server. The problem is that this object is browser-specific, so you need to take into account the browser in use when you instantiate it. With Prototype, you don't need to worry about this nor other browser-specific implementations. Furthermore, the framework lets you use a few lines of code to accomplish complex tasks that would otherwise require a lot of work in plain JavaScript. For example, the Ajax.Updater method shown below retrieves the contents of the "page.htm" file from the server and inserts the returned value into the <div> named "myElem":

<!-- HTML --> <div id="myElem"> </div> // JavaScript new Ajax.Updater( "myElem", "page.htm", { onFailure : function() { alert("An error occurred"); } } );

This is no joke! Those few lines take the content of page.htm and put it inside the myElem <div>. You can also call server components, such as a PHP file, and pass them as many parameters as you want:

new Ajax.Updater( "myElem", "component.php", { parameters : "param1=value1&param2=value2", method : "post", onFailure : function() { alert("An error occurred"); } } );

As you can see, the parameters are passed as a query string. Also note the use of method, which specifies the HTTP method to use—basically GET or POST, even if other HTTP methods exist. In general, Ajax.Updater takes three parameters:

  1. The ID of the element to fill
  2. The server component to call
  3. An option object (You can use many options, but the ones in the preceding code sample are the most common.)

Another useful class is Ajax.PeriodicalUpdater. You can use it to poll the server periodically. For example, you may want to use it to query a news server from time to time and update your page when the news changes. Here is an example:

new Ajax.PeriodicalUpdater( "myElem", "newsProvider.php", { frequency : 5, decay : 2 } );

The first and second parameters have the same meaning as they do for Ajax.Updater. The frequency parameter is the number of seconds after which Ajax.PeriodicalUpdater polls the server. The decay parameter is used to avoid polling the server continuously if the response remains the same. In this example, if after five seconds the server returns the same response as it did for the previous request, the new polling interval will be 10 seconds (i.e, frequency multiplied by decay). If after 10 seconds the response is still the same, the interval becomes 20 seconds, and so on. As soon as the response differs, the polling interval is reset to five seconds, and the cycle starts again.

If your server does not return HTML code but other data formats such as XML or JSON, you can use another powerful class: Ajax.Request. You can use it to send a request to a server and receive the XMLHttpRequest object, from which you can obtain the server response—whatever it is. Apart from HTML, the most common response types are XML and JSON. Here is a simple example of Ajax.Request:

new Ajax.Request( "component.php", { onSuccess : processResponse, onFailure : notifyFailure, parameters : "param1=value1&param2=value2" } ); function processResponse(xhrObject) { alert("The response is: " + xhrObject.responseText); } function notifyFailure() { alert("An error occurred!"); }

This code makes an asynchronous request to the server using some parameters. If the response is successful, it calls the processResponse function passing in the XMLHttpRequest object. This function just displays whatever it got from the server. In case of failure, it calls the notifyFailure function.

Another common task is displaying a notification (or image) whenever there is AJAX activity. This is extremely useful when the request will take some time to complete. The register method of Ajax.Responders does just that. The following code is a simple example of possible use:

<!-- HTML --> <div id="loading" style="visibility: hidden;"> <img src="loading.gif" /> </div> // JavaScript Ajax.Responders.register( { onCreate : displayLoading, onComplete : hideLoading } ); function displayLoading() { Element.show("loading"); } function hideLoading () { Element.hide("loading"); }

This example displays a GIF as soon as an AJAX call starts. When it receives the response, it hides the loading GIF. Note the use of the Element.show and Element.hide methods as well.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.