Prototype.js
1.Prototype.js
Prototype.js 是Javascript编写者的一把小军刀，提供了Ruby风格的简写语法和实效的函数，更难得的是完全跨浏览器，让大家舒舒服服写出又精简又不用愁心兼容的的JS代码，springside 已经离不开它了。
Prototype.js最重要的文档是
1.1 最爱$系列
我最喜欢是可以用${"bookDiv"} 等价于通用的document.getElementByID("bookDiv")
值得留意的还有和CSS一样的批量选择语法$$()，如
$$('div#left_books).each(....)
Element系列有很多实用的函数：
$('bookdiv').update('<p>...</p>'); //更新innerHtml
$('bookdiv').show();
$('bookdiv').hide();
$('bookdiv').toggle(); //切换visiable
$('bookdiv').visiable(); //返回是否visiable
$('bookdiv').scrollTo(); .....还有很多
1.2 传统的Ajax
传统的基于URL的ajax函数简单实用。
new Ajax.Updater('bookdiv',"foo.jsp");
此函数的还有很多可选的参数，参数列表见此：
new Ajax.Updater('bookdiv',"foo.jsp", {onComplete: initObserve});
比如需要异步执行ajax, 更新bookdiv后需要重新执行initObserve, onComplete的设置就刚好满足你的要求。
另有可定时执行Ajax的PeriodicalUpdater。
1.3 Form系列函数也不错
Form.serialize 将Form中所有Input对象的值转化为一个URL String，方便把Form转为用 URL Get方式的Ajax提交，最经典的用Ajax提交Form的例子:
<form action="/action/here" method="post"
onsubmit="new Ajax.Updater('div_to_be_updated', '/action/here', {parameters:Form.serialize(this)});
return false;">
另外，Form.focusFirstElement , Form.getInputs等函数也很实用
1.4 Event系列
除了后述的Observe模式外，还有下列保证兼容IE和FF的事件函数：
1.Event.element(event)，找出触发事件的element.
2.Event.findElement(event,tagName)，搜索DOM tree里事件的响应链里的第一个符合tagName的element.
3.pointerX(event),pointerY(event)等
还定义了一些标准KeyCode，见：http://www.sergiopereira.com/articles/prototype.js.html#Reference.Extensions.Event
1.5 Ruby风格
1.循环函数
elements.each( function(element){
alert(element);
});
2.不定参数
new Ajax.Updater('mydiv', '/foo/bar', {asynchronous:true});
2. Observe模式达到搜索引擎Friendly
Observe模式，就是连接仍然以<a href="foo.jsp">形式编写，用Observe为其加入onClick事件的侦听。 这样，当搜索引擎访问时，就会访问传统的URL；而用户使用IE访问时，就会被Observe转为使用onClick事件的Ajax效果。
见SpringSide中的/home/index.jsp 图书详情察看--通过selector查找需要处理的链接，循环为每个链接添加观察者，为click事件，添加handle函数。
$$('div#left_books * a[href]').each(function(element){
Event.observe(element,'click',handlerCilckEvent,false);
});
function handlerCilckEvent(event){
var element = Event.element(event);
new Ajax.Updater('bookdiv',element.href);
Event.stop(event);
$('bookdiv').show();
}
3.script.aculo.us 的Dom Builder
script.aculo.us 在Prototype的基础上进行了二次开发。
它的语法超简洁的Builder, 相比之下W3c的Dom Builder语法简直是噩梦。html片断不复杂时如果用JSTemplate有点大炮打蚊子，用script.aculo.us的Builder就够了。
Builder很有Ruby的风格，请看下面一句
foo= Builder.node('a', {href:"foo.jsp"},categorys[i].name)
第1个参数是element类型，第2个是可选的attribbute，第3个是节点内的子节点。
如果要换成W3c的Dom函数写法，善哉善哉。
下面这段更明显直接照元素的页面顺序来生成对象，而不是像W3C Dom Builder很逻辑抽象的，先生成对象，然后append到父元素。
div = Builder.node('div',{className:linkDiv},[
Builder.node('a', {href:"foo.jsp"}, categorys[i].name)
]);
当然了，还是没有JS Template清晰，所以Builder只作为html片断非常短时使用。
4.script.aculo.us 的Autocompleting text fileds
script.aculo.us 提供了非常方便的使用ajax 调用服务器端自动填充文本框功能。
仅需一句话，使用非常简单
new Ajax.Autocompleter(id_of_text_field, id_of_div_to_populate, url, options);
如SpringSide书店首页的查询为例子
HTML
< PRE><input id= "search_value"name="query" autocomplete="off" />Javascript
newAjax.Autocompleter('search_value','contact_name_auto_complete','<c:urlvalue="/bookstore.do?method=autoComplete"/>', {})
CSS
div.auto_complete {
float: left:
border: #888 1px solid;
padding: 0px;
margin: 0px;
width: 250px;
position: absolute;
background-color: white;
text-align: left;
color: #454545;
}
div.auto_complete ul {
border: #888 1px solid;
padding: 0px;
margin: 0px;
WIDTH: 100%;
list-style-type: none;
}
div.auto_complete ul li {
padding: 3px;
margin: 0px;
}
div.auto_complete ul li.selected {
background-color: #ffb;
border-top: 1px solid #CADAE8;
border-bottom: 1px solid #CADAE8;
}
div.auto_complete ul STRONG.highlight {
padding: 0px;
margin: 0px;
color: #800;
} Server 端需要返回的是一个下列形式的字符串
<ul>
<li>book1</li>
<li>book2</li>
</ul>