[转]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。
 
    内容就这些,如有爱好者可以和我交流,欢迎大家相互沟通。



你可能感兴趣的:(JavaScript,Ajax,function,prototype,XMLhttpREquest,Parameters)