Learning Ajax 3, Prototype Reference

http://www.sergiopereira.com/articles/prototype.js.html

Chapter 10. Prototype Reference
10.1. Ajax Support

Ajax.Request, Ajax.Updater, and Ajax.PeriodicalUpdaterall of which inherit from Ajax.Base. After that is the Ajax.Responders object, which handles global events related to Ajax calls.

callback
new Ajax.Request('/data.html', {
  method: 'get',
  onComplete: showResponse
});

// alert the returned value
function showResponse(request) {
  alert(request.responseText);
}

callback could also be defined inline.
====>
new Ajax.Request(' /data.xml', {
  method: 'get',
  onComplete: function(request){ alert(request.responseText); }
});

defined for specific HTTP response codes
new Ajax.Request(' /data.xml', {
  method: 'get',
  on404: function(request){ alert('Not found'); },
  on500: function(request){ alert('Server error'); }
});

Ajax Updaters

// <div id="target">(To be replaced)</div>

new Ajax.Updater('target', '/data.html', {method: 'get'});

This next example is the same as above, but it updates the element only if the request was successful and alerts the user if not:
// <div id="target"></div>

new Ajax.Updater({success: 'target'}, '/data.html', {
  method: 'get',
  onFailure: function(request) { alert('Sorry. There was an error.') }
});

Periodical Ajax Updaters
/ <div id="target"></div>

new Ajax.PeriodicalUpdater('target', '/data.html', {
  method: 'get',
  frequency: 2
});

Global Responders
Ajax.Responders.register({
  onCreate: function(  ){
    $('spinner').show(  );
  },
  onComplete: function(  ) {
    if(Ajax.activeRequestCount == 0)
      $('spinner').hide(  );
  }
});

10.2. DOM Manipulation
 $( )
document.getElementById( )
// <p id="one">One</p>
// <p id="two">Two</p>

$('one').toString(  );
// => '[object HTMLParagraphElement]'

$('one','two').toString(  );
// => [object P],[object P]

$($('one')).toString(  );
// => [object HTMLParagraphElement]

$F( )
$F( element ) returns the value of any  field input control
// <input type="text" id="userName" value="Joe Doe">
// <select id="state">
//   <option value="NY">New York</option>
//   <option value="CA" selected="selected">California</option>
// </select>

$F('userName');
// => "Joe Doe"

$F('state');
// => "CA"

Selector
The Selector class (and its accompanying $$( ) method) allows you to reference page elements by their CSS selectors

$$('form#foo input[type=text]').each(function(input) {
  input.setStyle({color: 'red'});
});

// By tag name, including wildcard
$$('strong')
$$('*')

// By id and class
$('#foo')
$$('.bar')

// By combinations of tag, id, and class
$$('strong#foo')
$$('string.bar')
$$('string.bar.baz')
$$('#foo.bar')
$$('.bar#foo')
$$('#foo.bar.baz')
$$('strong#foo.bar')
$$('strong.bar#foo')

// By ancestors
$$('#foo strong *')
$$('strong#foo span')

// By attribute existence
$$('h1[class]')

// By attribute value and negated value
$$('a[href="#"]')
$$('a[href!=#]')

// By whitespace-tokenized attribute value
$$('a[class~="internal"]')

// By hyphen-tokenized attribute value
$$('*')

// By multiple attribute conditions
$$('a[class~=external][href="#"]')

// Combining multiple expressions
$('#foo', '#bar')

 Examples
// Create a Selector instance
fooFinder = new Selector('.foo');

// Find all elements in the document with the class 'foo'
fooFinder.findElements(  );

// Find all elements within the 'container' element with the class 'foo'
fooFinder.findElements($('container'));

// Determine whether the 'bar' element has the class 'foo'
fooFinder.match($('bar'));

// Find all elements with class 'foo' from the descendants of 'container'
Selector.matchElements($('container').descendants(  ), '.foo');

// Find the first element with the class 'foo' from the descendants of 'container'
Selector.findElement($('container').descendants(  ), '.foo');

// Find the second element with the class 'foo' from the descendants of 'container'
Selector.findElement($('container').descendants(  ), '.foo', 1);

// Find all elements with the class 'foo' within 'container'
Selector.findChildElements($('container'), ['.foo']);

// Find all elements with the class 'foo' or the class 'bar' within 'container'
Selector.findChildElements($('container'), ['.foo', '.bar']);

Element Methods
Element.toggle('target');
var myElement = $('target2');
Element.update(myElement, 'Hello');

Alternatively
$('target').toggle(  );
var myElement = $('target2');
myElement.update('Hello');

$('target').update('Hello').addClassName('big').show(  );

10.2.5. class Element.ClassNames
10.2.6. Inserting Content

// <span id="name">Douglas</span>
new Insertion.Before('name', 'Hello, ');
new Insertion.Top('name', 'Scott ');
new Insertion.Bottom('name', ' Raymond');
new Insertion.After('name', '.');

10.2.7. Element Positioning

10.2.8. Form Observers

10.3. Core Extensions
10.3.1. Array Extensions
10.3.2. Hashes
10.3.3. Ranges
10.3.4. Enumerable
…..