[转]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文件。如下：

<?xml version="1.0" encoding="gbk"?>

<books>

<book>

<title>AAAAAAA</title>

<page>111</page>

<book>

<book>

<title>BBBBBBB</title>

<page>222</page>

<book>

</books>

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.*"%>

<%=<strong>Ajax Updater</strong>%>

function doAjaxUpdater(){

var url = "ajax.jsp";

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

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

}

<input type="button" value="Ajax.Updater" onclick="doAjaxUpdater()">

<span id="divContent"></span>

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