prototype.js用法介绍

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(response){

    window.alert(response.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.Updater("divContent", url, {method:"get", parameters:params});

}

<input type="button" value="/Ajax.Updater" οnclick="doAjaxUpdater()">

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

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