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:

Speaking more specifically, Prototype allows you to work with AJAX by using two primary cross-browser objects. The first one is called "AJAX.Request" and is really intuitive to use. It allows you to not only send HTTP requests silently, but also to keep track of the different states of these requests.

The other object related to AJAX is named "AJAX.Updater." It can be really useful if your application expects a response from the server, formatted as (X)HTML.

But I'm getting ahead of myself. First I want to show you how to create a simple AJAX application that fetches data from a text file and displays the corresponding results on the browser by using the mentioned "AJAX.Request" object.

Here is the corresponding (X)HTML file that uses an AJAX.Request object to fetch file data. Its signature is as follows:

<!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.Request class</title>
<script language="javascript" src="prototype-1.4.0.js"></script>
<script language="javascript">
// example using the Ajax.Request class
function fetchFileData(){
   var record=$F('record');
   var ajaxobj=new Ajax.Request('http://localhost/prototype/getfiledata.php',{method: 'get',parameters: 'record='+record,onComplete: displayData});
}
function displayData(requestObj){
   $('datacontainer').innerHTML=requestObj.responseText;
}
window.onload=function(){
   if(document.getElementById && document.createElement &&
document.getElementsByTagName){
     var btn=$('search');
     if(!btn){return};
     btn.onclick=fetchFileData;
   }
}
</script>
</head>
<body>
<form>
    Enter the record you want to retrieve from file <input
type="text" id="record" /><br />
    <input type="button" name="search" value="Search Record"
id="search" />
</form>
<div id="datacontainer"></div>
</body>
</html>

As I said before, the above file utilizes an AJAX.Request object to fetch a sample "getfiledata.php" file, which logically is located in the server. Also, you should notice the different parameters that are passed to this object before sending the respective request.

For this example, I specified the method to be used (GET), in addition to a "record" variable, which is also sent to the server as part of the requesting process. Finally, the "displayData()" callback function will be called up, once the request has been completed, via the "onComplete" option.

Besides, the "AJAX.Request" object exposes two additional options for tracking the status of a given request, called "onSuccess" and "onFailure" respectively. As you may guess, each of these options can be associated with a new callback function to handle eventual errors and successful requests as well. Pretty simple, isn't it?

Now that you have earned how to feed an AJAX.Request object with the proper parameters, let me show you the short definition for the previous "getfiledata.php" PHP script. It is responsible for fetching data from a simple text file. Its signature is as following:

<?php
$lines=file('data.txt');
echo $lines[$_GET['record']];
?>

And finally, the example is completed by showing you the signature that corresponds to the sample "data.txt" text file:

This is line 1 of the data file
This is line 2 of the data file
This is line 3 of the data file
This is line 4 of the data file
This is line 5 of the data file
This is line 6 of the data file
This is line 7 of the data file
This is line 8 of the data file
This is line 9 of the data file
This is line 10 of the data file

As you'll realize, creating an AJAX-based application similar to the one shown above is in fact a straightforward process that requires a minimum of effort. Here is where Prototype starts to shine!

After demonstrating a basic implementation of the AJAX.Request object that comes included with this library, it's time to leap forward and take a look at the other AJAX-related class that I mentioned a few lines before. In this case, I'm talking about the neat "AJAX.Updater" class, which I'll be reviewing in the following section.

To see how to use this brand new class, jump ahead and read the section to come.

Next: Dealing with formatted (X)HTML results >>