ruby的副产品 - prototype.js

ruby fans们看到这个类库一定感觉很亲切吧！

这个出色的javascript基础类库里定义的一些数据结构，命名规则已经一些方法的调用形式，很像Ruby，现在该类库不仅是实用ruby的web程序员的最爱了，连一些其他的web程序员，也在实用这个类库，下面是对该库的一些介绍和积累。

一、 实用方法：

$()方法
替代dom中的document.getElementById()

$F()方法
替代document.getElementById().value

$A()方法
将一个可枚举列表转换成一个Array对象
如：

< script >
function  showOptions(){
var  someNodeList  =  $( ' lstEmployees ' ).getElementsByTagName( ' option ' );
var  nodes  =  $A(someNodeList);
nodes.each( function (node){
alert(node.nodeName  +   ' :  '   +  node.innerHTML);
});
}
</ script >
< select  id ="lstEmployees"  size ="10"   >
< option  value ="5" > Buchanan, Steven </ option >
< option  value ="8" > Callahan, Laura </ option >
< option  value ="1" > Davolio, Nancy </ option >
</ select >
< input  type ="button"  value ="Show the options"  onclick ="showOptions();"   >

$H方法
把一些对象转换成HASH对象

< script >
function  testHash()
{
// let's create the object
var  a  =  {
first:  10 ,
second:  20 ,
third:  30
};
// now transform it into a hash
var  h  =  $H(a);
alert(h.toQueryString());  // displays: first=10&second=20&third=30
}
</ script >

$R方法
是new ObjectRange(lowBownd, upperBornd, excludeBounds)的缩写。

< script >
function  demoDollar_R(){
var  range  =  $R( 10 ,  20 ,  false );
range.each( function (value, index){
alert(value);
});
}
</ script >
< input  type ="button"  value ="Sample Count"  onclick ="demoDollar_R();"   >

Try.these方法
这个方法可以传递进去一系列的方法，Try.these调用传递进去的这些方法，直到找到一个成功执行的方法，然后返回成功执行的函数返回值。
比如xmlNode.text在一些浏览器可用，xmlNode.textContent在其他浏览器可用，这个时候就可以使用Try.these方法了

< script >
function  getXmlNodeValue(xmlNode){
     return  Try.these(
         function () { return  xmlNode.text;},
         function () { return  xmlNode.textContent;)
        );
}
</ script >

二、 Ajax对象
第一章里面的都是一些简单的方法，prototype.js里面还有许多的高级应用，许多人对prototype感兴趣的原因就是因为它出色稳定的完成异步交互的能力。

Ajax对象是一个预定义对象，由prototype这个包创建，为了封装和简化编写ajax功能涉及到的一些狡猾的代码，这个对象包含了一系列的封装ajax逻辑的类，我们看看其中的几个。

使用Ajax.Request类

如果不使用任何的帮助程序包，很可能编写了大量的代码来创建XMLHttpRequest对象并且异步的跟踪它的进程，然后解析出响应，然后处理它。当你的老大不让你支持多种浏览器的时候，你会感到非常幸运。。

为了支持Ajax功能，这个包定义了 Ajax.Request类。

假如有一个应用可以通过URL http://yourserver/app/get_sales?empID=1234&year=1998与服务器通信，它返回这样的xml架构

<? xml version="1.0" encoding="utf-8"  ?>
< ajax-response >
< response  type ="object"  id ="productDetails" >
< monthly-sales >
< employee-sales >
< employee-id > 1234 </ employee-id >
< year-month > 1998-01 </ year-month >
< sales > $8,115.36 </ sales >
</ employee-sales >
< employee-sales >
< employee-id > 1234 </ employee-id >
< year-month > 1998-02 </ year-month >
< sales > $11,147.51 </ sales >
</ employee-sales >
</ monthly-sales >
</ response >
</ ajax-response >

使用Ajax.Request对象和服务器通信并且得到这段XML是非常简单的事情，下面的例子展示了如何完成这个功能。

< script >
function searchSales()
{
var empID = $F('lstEmployees');
var y = $F('lstYears');
var url = 'http://yoursever/app/get_sales';
var pars = 'empID=' + empID + ' &year =' + y;

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

}
function showResponse(originalRequest)
{
//put returned XML in the textarea
$('result').value = originalRequest.responseText;
}
</ script >
< select  id ="lstEmployees"  size ="10"  onchange ="searchSales()" >
< option  value ="5" > Buchanan, Steven </ option >
< option  value ="8" > Callahan, Laura </ option >
< option  value ="1" > Davolio, Nancy </ option >
</ select >
< select  id ="lstYears"  size ="3"  onchange ="searchSales()" >
< option  selected ="selected"  value ="1996" > 1996 </ option >
< option  value ="1997" > 1997 </ option >
< option  value ="1998" > 1998 </ option >
</ select >
< br >< textarea  id =result  cols =60  rows =10  ></ textarea >

你注意到Ajax.Request类的构造方法的第二个参数了吗？{method:'get', parameters:pars, onComplete:showResponse}，这是一个匿名对象的真实写法，表示你传入的这个对象有一个名为method值为'get'的属性，另一个属性名为parameters包含请求http的查询字符串，和一个名为onComplete的属性指向函数showResponse。（经常写ajax的人已经想到这个onComplete是如何实现的了吧，其实就是onreadystatechange中判断xmlhttp.state==4之后调用onComplete方法了。）
还有一些其他的属性可以在这个对象设置，比如asynchronous，可以设置为true或false来决定ajax对服务器的交互是异步还是同步的（默认true）

这个匿名对象类型的参数定义了ajax调用过程中的选项，在上面的例子中，第一个参数指定通过HTTP GET命令请求那个URL，传入了变量pars包含了查询字符串，Ajax.Request对象在它完成接收响应的时候将调用showResponse方法。

大家知道，在XMLHttpRequest对象对url进行请求的时候会报告进度状况，这个进度分为四个不同的阶段：Loading, Loaded, Interactive或Complete。你可以使ajax对象在任何一个阶段调用自定义方法，Complete是最常用的一个，想调用自定义的方法只需要在请求的选项参数中的名为onXXXX属性/方法中提供你自定义的方法对象。就像onComplete一样。你传入的方法将会被用一个参数调用，这个参数就是XMLHttpRequest对象自己，你可以用这个对象去得到返回的数据。

还有两个选项来处理结果就是onSuccess和onFailure，当AJAX无误的执行完后调用onSuccess，当服务端出现错误时调用onFailure。

上面的例子仅仅在onComplete中将返回的数据放到一个文本域中，没有太复杂的内容，当然你可以使用XSLT将返回的XML文档转换为HTML然后呈现，这是后续工作了，不是我们的Ajax.Request对象所要负责的事情了，我们的Ajax.Request对象已经把他要做的工作完美而优雅的完成了！