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对象已经把他要做的工作完美而优雅的完成了！