Introducing prototype.js

Part IV, "Commercial and Open Source Ajax Resources," looks at some available code libraries and frameworks for Ajax development.

We begin this lesson with Sam Stephenson's prototype.js, a popular JavaScript library containing an array of functions useful in the development of cross-browser JavaScript routines, and including specific support for Ajax. You'll see how your JavaScript code can be simplified by using this library's powerful support for DOM manipulation, HTML forms, and the XMLHTTPRequest object.

The latest version of the prototype.js library can be downloaded from http://prototype.conio.net/.

Caution

 

At the time of writing, prototype.js is at version 1.4.0. If you download a different version, check the documentation to see whether there are differences between your version and the one described here.

 

Including the library in your web application is simple, just include in the <head> section of your HTML document the line:

<script src="prototype.js" Language="JavaScript" type="text/javascript"></script>

 

prototype.js contains a broad range of functions that can make writing JavaScript code quicker, and the resulting scripts cleaner and easier to maintain.

The library includes general-purpose functions providing shortcuts to regular programming tasks, a wrapper for HTML forms, an object to encapsulate the XMLHTTPRequest object, methods and objects for simplifying DOM tasks, and more.

Let's take a look at some of these tools.

The $() Function

$() is essentially a shortcut to the getElementById() DOM method. Normally, to return the value of a particular element you would use an expression such as

var mydata = document.getElementById('someElementID');

 

The $() function simplifies this task by returning the value of the element whose ID is passed to it as an argument:

var mydata = $('someElementID');

 

Furthermore, $() (unlike getElementById()) can accept multiple element IDs as an argument and return an array of the associated element values. Consider this line of code:

mydataArray = $('id1','id2','id3');

 

In this example:

 

The $F() Function

The $F() function returns the value of a form input field when the input element or its ID is passed to it as an argument. Look at the following HTML snippet:

<input type="text" id="input1" name="input1">
<select id="input2" name="input2">
 <option value="0">Option A</option>
 <option value="1">Option B</option>
 <option value="2">Option C</option>
</select>

 

Here we could use

$F('input1')

 

to return the value in the text box and

$F('input2')

 

to return the value of the currently selected option of the select box. The $F() function works equally well on check box and text area input elements, making it easy to return the element values regardless of the input element type.

The Form Object

prototype.js defines a Form object having several useful methods for simplifying HTML form manipulation.

You can return an array of a form's input fields by calling the getElements() method:

inputs = Form.getElements('thisform');

 

The serialize() method allows input names and values to be formatted into a URL-compatible list:

inputlist = Form.serialize('thisform');

 

Using the preceding line of code, the variable inputlist would now contain a string of serialized parameter and value pairs:

field1=value1&field2=value2&field3=value3...

 

Form.disable('thisform') and Form.enable('thisform') each do exactly what it says on the tin.

The try.these() Function

Previous lessons discussed the use of exceptions to enable you to catch runtime errors and deal with them cleanly. The try.these() function provides a convenient way to encapsulate these methods to provide a cross-browser solution where JavaScript implementation details differ:

return Try.these(function1(),function2(),function3(), ...);

 

The functions are processed in sequence, operation moving on to the next function when an error condition causes an exception to be thrown. Operation stops when any of the functions completes successfully, at which point the function returns TRue.

Applying this function to the creation of an XMLHTTPRequest instance shows the simplicity of the resulting code:

return Try.these
   function() {return new ActiveXObject('Msxml2.XMLHTTP')},
   function() {return new ActiveXObject('Microsoft.XMLHTTP')},
   function() {return new XMLHttpRequest()}
   )

 

Note

 

You may want to compare this code snippet with Listing 8.1 to see just how much code complexity has been reduced and readability improved.