[转]Prototype 学习笔记

 

Prototype 学习笔记

来源：http://blog.chinaunix.net/u/24912/showart.php?id=199954

 

最近在《程序员》杂志2006年11期中看到一篇文章，标题为《Prototype的开发与应用实践》，感觉很不错，在这里我理解了一下这篇文章的要点，希望能和各位同仁共享。

 

    Prototype是由Sam Stephenson开发的一个Javascirpt类库，也是其他框架的鼻祖，它是对Javascript中对象的一个扩展，并且对Ajax进行了封装。目前Prototype的版本是1.4,可以从 http://prototype.conio.net 下载最近的版本。

 

    Prototype包括三的内容：1.提供全局的函数，来替代原先重复的代码；2.对现在的Javascript, Dom等对象进行扩展，提供访问的接口；3.对Ajax的封装，使得开发Ajax更容易。下面进行逐一的介绍。

 

1. 全局的函数

$()函数：来替代document.getElementById()方法。如果传入多个ID，则返回一个Array。

用法： var ele = $('your element's id');

 

$F()函数：用以返回表单控件的值，比如：文本框，下拉列表，必须是有value属性的控件，传入控件的ID。

用法：var ele = $F('your element's id');

 

$A()函数：可以接受任何一个枚举类型转换为一个数组。

用法：var nodeList = document.getElementsByTagName();

     var nodeArray = $A(nodeList);

     var message = "The All Message: ";

     nodeArray.each(

         function(node){

             message += node.type + " | " + node.name + " | " + node.value + "/r/n"

         }

     );

     alert(message);

 

$H()函数：将传入的对象转换一个可枚举的和联合数组类似的Hash对象。

$R()函数：是对 new ObjectRange(lowBound, upperBound, excludeBounds)的缩写和替代。

 

Try.these()函数：使用一系列函数作为参数。返回第一个成功执行函数的有返回值。这样就不用if else去判断了。

用法：Try.these(function {return 1;}, function{return 2}......);返回1。

     在Ajax中，重要的是XmlHttpRequest对象，在实例化这个对象时可以用这方法，如下所示：

　　　var xmlHttp = Try.these(function(){return new ActiveXObject("Msxml2.XMLHTTP")}, function(){return new ActiveXObject("Microsoft.XMLHTTP")},function(){return new XMLHttpRequest()}) || false;

 

Prototype对Javascript的Object, Number, Function, String, Array, Event 等对象都进行了扩展，创建了一些新的对象和类，并在基础上有很多公用函数，比如each(), any(), collect()等。

 

除此之外，Prototype还对Ajax提供的支持，主要由Ajax.Request和Ajax.Updater两个来完成。

 

Ajax.Request:返回的文本为xml格式。

用法：有一个books.xml文件。如下：

   

        AAAAAAA

        111

   

   

        BBBBBBB

        222

   

 

function doAjaxRequest(){

    var url = "books.xml";

    var ajax = new Ajax.Request(url, {method:"get", onComplete:showResponse});

}

 

function showResponse(request){

    window.alert(request.responseText);

}

 

method为方法类型，get,post......

onComplete为回调函数。

 

Ajax.Updater：返回的文本为HTML代码。

用法：有一个JSP页面ajax.jsp如下：

<%page contentType="text/html;charset=gbk" language="java" import="java.sql.*"%>

<%= Ajax Updater%>

 

function doAjaxUpdater(){

    var url = "ajax.jsp";

    var params = "field=all&show=true";

    var ajax = new Ajax.Request("divContent", url, {method:"get", parameters:params});

}

 

"divContent"为要将返回内容插其中的控件ID。

 

    内容就这些，如有爱好者可以和我交流，欢迎大家相互沟通。