Prototype JavaScript Framework

The Prototype JavaScript Framework is a JavaScript framework that provides an Ajax framework and other utilities. Though available as a standalone library, Ruby on Rails integrates the framework as well as other projects such as script.aculo.us and Rico

Features

Prototype provides various functions for developing JavaScript applications. The features range from programming shortcuts to major functions for dealing with XMLHttpRequest

Sample utility functions

The $() function

To refer to an element in the DOM of an HTML page, the usual function identifying an element is:

document.getElementById("id_of_element")

The $() function reduces the code to:

$("id_of_element")

This function can be used as the getElementById() function. For example, you can set the CSS text color with this code:

$("id_of_element").style.color = "#ffffff";

The $F() function

Building on the $() function: the $F() function returns the value of the requested form element. For a 'text' input, the function will return the data contained in the element. For a 'select' input element, the function will return the currently selected value.

$F("id_of_input_element")

Note: Like the underscore _, the $ character is a legal "word character" in JavaScript identifiers, and has no other significance in the language. It was added to the language at the same time as support for regular expressions, so that the Perl-like matching variables could be emulated, such as $` and $'.

The Ajax object
In an effort to reduce the amount of code needed to run a cross-browser XMLHttpRequest function, the Ajax object offers an easier way to invoke the function without the need to code with specific browsers in mind. There are two forms of the Ajax Object. Ajax.Request returns the raw XML output from an AJAX call, while the Ajax.Updater will inject the return inside a specified DOM object.

The Ajax.Request below finds the values of two HTML value inputs, requests a page from the server using the values as POST values, then runs a custom function called showResponse() when complete:

var value1 = $F("name_of_id_1");
var value2 = $F("name_of_id_2");
var url = "http://yourserver/path/server_script";
var pars = "value1=" + value1 + "&value2=" + value2;

var myAjax = new Ajax.Request(
  url,
      {
               method: "post",
               parameters: pars,
               onComplete: showResponse
      });

Prototype Javascript Framework home page

Official Prototype API documentation

Official Prototype API documentation (PDF book)

Sergio Pereira's Prototype API documentation

Prototype Window Library

Rico - A Prototype Based Library

Working With Events In Prototype

Prototype JavaScript Framework documentation wiki with examples