JAVASCRIPT

Working with AJAX and the Prototype JavaScript Library

In the last few months, the Prototype JavaScript library has become very popular with web developers. If you want to take your first steps with it, you should begin reading this article. Welcome to the second part of the series “Introducing the Prototype JavaScript library.” This series shows you how to put this powerful package to work for you to facilitate the development of your own JavaScript applications.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

February 06, 2007

TABLE OF CONTENTS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example Ajax.Updater class</title>
<script language="javascript" src="prototype-1.4.0.js"></script>
<script language="javascript">
// example using the Ajax.Updater class
function fetchHTML(){
   var ajaxobj= new Ajax.Updater
('datacontainer','gethtmldata.php',{method: 'get', parameters:
'a=1&b=2',onFailure: displayError});
}
function displayError(requestObj){
   $('datacontainer').innerHTML='Failed to receive server
response!';
}
window.onload=function(){
   if(document.getElementById && document.createElement &&
document.getElementsByTagName){
   var btn=$('fetch');
     if(!btn){return};
     btn.onclick=fetchHTML;
   }
}
</script>
</head>
<body>
<form>
    <input type="button" value="Fetch HTML" id="fetch" />
</form>
<div id="datacontainer"></div>
</body>
</html>

In this case, the "AJAX.Updater" object accepts, as the first parameter, the ID attribute that corresponds to the web page element where server results will be displayed as (X)HTML. Logically, if your web application expects a response served in this format, this object can be a real time saver.

Also, it's worthwhile to mention here that the "AJAX.Updater" object accepts the same arguments that were explained concerning the implementation of the "AJAX.Request" class, including the request method to be used, the set of variables sent to the server, and the respective callback functions that will be invoked during the different states of the request in question.

Okay, at this stage I have shown you how to take advantage of the functionality provided by AJAX when working with the Prototype library. Of course, this is only a simple introduction to the subject. If you want to dig deeper on this topic, please spend some time reading the official documentation.

Having covered basically the Prototype's AJAX module, in the following section I'll teach you how to use some additional features that are bundled with this library, including the new "Try.these()" function and the Ruby-styled "each" loop.

So, keep reading to learn more about these interesting topics.

Next: Using the Try.these() function and the each loop >>