`
龙塘湾
  • 浏览: 136072 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
文章分类
社区版块
存档分类
最新评论

Prototype实例学习

prototypeAjaxXHTML应用服务器JavaScript 
阅读更多
Prototype实例学习
Prototype实战----1.$$
Java代码
<html>  
<head>  
<title>Test $$</title>  
<script src="prototype.js"></script>  
<script>  
function test$$(){  
    /**//* 
      in case CSS is not your forte, the expression below says 
      'find all the INPUT elements that are inside  
      elements with class=field that are inside a DIV 
      with id equal to loginForm.' 
    */ 
    var f = $$('div#loginForm .field input');  
    var s = '';  
    for(var i=0; i<f.length; i++){  
        s += f[i].value + '/';  
    }  
    alert(s); // shows: "joedoe1/secret/"      
    //now passing more than one expression  
    f = $$('div#loginForm .field input', 'div#loginForm .fieldName');  
    s = '';  
    for(var i=0; i<f.length; i++){  
        s += ( f[i].value ? f[i].value : f[i].innerHTML ) + '/';  
    }  
    alert(s); //shows: "joedoe1/secret/User name:/Password:/"      
    var temp=$$('div#loginForm .field');  
    alert(temp.innerHTML);  
}  
function testtoColorPart()  
{  
    var num=new Number(50);  
    alert(num.toColorPart());  
}  
</script>  
<div id='loginForm'>  
    <div class='field'>  
        <span class='fieldName'>User name:</span>  
        <input type='text' id='txtName' value='joedoe1'/>  
    </div>  
    <div class='field'>  
        <span class='fieldName'>Password:</span>  
        <input type='password' id='txtPass' value='secret' />  
    </div>  
    <input type='submit' value='login' />  
</div>   
<input type=button value='test $$()' onclick='test$$();' />  
<input type=button value='testtoColorPart' onclick='testtoColorPart();' />  
</body>  
</html> 

<html>
<head>
<title>Test $$</title>
<script src="prototype.js"></script>
<script>
function test$$(){
    /**//*
      in case CSS is not your forte, the expression below says
      'find all the INPUT elements that are inside
      elements with class=field that are inside a DIV
      with id equal to loginForm.'
    */
    var f = $$('div#loginForm .field input');
    var s = '';
    for(var i=0; i<f.length; i++){
        s += f[i].value + '/';
    }
    alert(s); // shows: "joedoe1/secret/"   
    //now passing more than one expression
    f = $$('div#loginForm .field input', 'div#loginForm .fieldName');
    s = '';
    for(var i=0; i<f.length; i++){
        s += ( f[i].value ? f[i].value : f[i].innerHTML ) + '/';
    }
    alert(s); //shows: "joedoe1/secret/User name:/Password:/"   
var temp=$$('div#loginForm .field');
    alert(temp.innerHTML);
}
function testtoColorPart()
{
var num=new Number(50);
    alert(num.toColorPart());
}
</script>
<div id='loginForm'>
    <div class='field'>
        <span class='fieldName'>User name:</span>
        <input type='text' id='txtName' value='joedoe1'/>
    </div>
    <div class='field'>
        <span class='fieldName'>Password:</span>
        <input type='password' id='txtPass' value='secret' />
    </div>
    <input type='submit' value='login' />
</div>
<input type=button value='test $$()' onclick='test$$();' />
<input type=button value='testtoColorPart' onclick='testtoColorPart();' />
</body>
</html>
Prototype实战教程----2.$A
Java代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
<head>  
    <title>$A</title>  
    <script language="javascript" src="prototype.js" 
     type="text/javascript"></script>  
    <script language="javascript" type="text/javascript">  
    function showOptions() {  
        var someNodeList = $("lstFramework").getElementsByTagName("option");  
        var nodes = $A(someNodeList);          
        var info = [];          
        nodes.each (function(node){  
            info.push(node.value + ": " + node.innerHTML);  
        });          
        alert(info.join("\r\n"));  
    }  
    </script>  
</head>  
<body>  
    <form>  
        <select id="lstFramework" size="10">  
            <option value="1">Prototype</option>  
            <option value="2">Script.aculo.us</option>  
            <option value="3">Dojo</option>  
            <option value="4">YUI</option>  
        </select>  
        <input onclick="showOptions();" type="button" value="Show the options">  
    </form>  
</body>  
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>$A</title>
    <script language="javascript" src="prototype.js"
     type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
    function showOptions() {
        var someNodeList = $("lstFramework").getElementsByTagName("option");
        var nodes = $A(someNodeList);       
        var info = [];       
        nodes.each (function(node){
            info.push(node.value + ": " + node.innerHTML);
        });       
        alert(info.join("\r\n"));
    }
    </script>
</head>
<body>
    <form>
        <select id="lstFramework" size="10">
            <option value="1">Prototype</option>
            <option value="2">Script.aculo.us</option>
            <option value="3">Dojo</option>
            <option value="4">YUI</option>
        </select>
        <input onclick="showOptions();" type="button" value="Show the options">
    </form>
</body>
</html>
Prototype实战教程----3.$F
Java代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
    <head>  
        <title>$F</title>  
        <script type="text/javascript" language="javascript" 
         src="prototype.js" ></script>  
        <script type="text/javascript" language="javascript">  
        function test()  
        {  
            alert($F("userName"));  
        }  
        </script>  
    </head>  
    <body>  
        <form>  
            <input type="text" id="userName" value="test username">  
            <input type="button" value="click" onclick="test()">  
        </form>  
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>$F</title>
        <script type="text/javascript" language="javascript"
         src="prototype.js" ></script>
        <script type="text/javascript" language="javascript">
        function test()
        {
            alert($F("userName"));
        }
        </script>
    </head>
    <body>
        <form>
            <input type="text" id="userName" value="test username">
            <input type="button" value="click" onclick="test()">
        </form>
</html>
Prototype实战教程----4.$H
Java代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
    <head>  
        <title>$H</title>  
        <script type="text/javascript" language="javascript" 
         src="prototype.js" ></script>  
        <script>  
        function test()  
        {  
            // 创建一个对象  
            var obj = {  
                key1: 1,  
                key2: 2,  
                key3: 3 
            };  
            // 将其转换为Hash对象  
            var hash = $H(obj);  
            alert(hash.toQueryString());  
        }  
        </script>  
    </head>  
    <body>  
        <form>  
            <input type="button" value="click" onclick="test()" />  
        </form>  
    </body>  
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>$H</title>
        <script type="text/javascript" language="javascript"
         src="prototype.js" ></script>
        <script>
        function test()
        {
            // 创建一个对象
            var obj = {
                key1: 1,
                key2: 2,
                key3: 3
            };
            // 将其转换为Hash对象
            var hash = $H(obj);
            alert(hash.toQueryString());
        }
        </script>
    </head>
    <body>
        <form>
            <input type="button" value="click" onclick="test()" />
        </form>
    </body>
</html>
Prototype实战教程----5.$R
Java代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
    <head>  
        <title>$R</title>  
        <script type="text/javascript" language="javascript" 
         src="prototype.js" ></script>  
        <script>  
        // 依次输出1，2，3，4  
        function test_R1(){  
            var range = $R(1, 5, true);  
            range.each(function(value, index){  
                alert(value);  
            });  
        }  
        // 依次输出1，2，3，4，5  
        function test_R2(){  
            var range = $R(1, 5, false);  
            range.each(function(value, index){  
                alert(value);  
            });  
        }  
        </script>  
    </head>  
    <body>  
        <form>  
            <input type="button" value="click (exclusive = true)" 
            onclick="test_R1()" />  
            <input type="button" value="click (exclusive = false)" 
            onclick="test_R2()" />  
        </form>  
    </body>  
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>$R</title>
        <script type="text/javascript" language="javascript"
         src="prototype.js" ></script>
        <script>
        // 依次输出1，2，3，4
        function test_R1(){
            var range = $R(1, 5, true);
            range.each(function(value, index){
                alert(value);
            });
        }
        // 依次输出1，2，3，4，5
        function test_R2(){
            var range = $R(1, 5, false);
            range.each(function(value, index){
                alert(value);
            });
        }
        </script>
    </head>
    <body>
        <form>
            <input type="button" value="click (exclusive = true)"
            onclick="test_R1()" />
            <input type="button" value="click (exclusive = false)"
            onclick="test_R2()" />
        </form>
    </body>
</html>
Prototype实战教程----6.$
Java代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
    <head>  
        <title>$</title>  
        <script type="text/javascript" language="javascript" 
         src="prototype.js" ></script>  
        <script type="text/javascript" language="javascript">  
        function test1() {  
            var div = $("div1"); // 单个参数  
            alert(div.innerHTML);  
        }          
        function test2() {  
            var divs = $("div1", "div2"); // 多个参数  
            for (var i = 0; i < divs.length; i++) {  
                alert(divs[i].innerHTML);  
            }  
        }  
        </script>  
    </head>  
    <body>  
    <div id="div1">  
        div1  
    </div>  
    <div id="div2">  
        div2  
    </div>  
    <input type="button" value="click1" onclick="test1()" />  
    <input type="button" value="click2" onclick="test2()" />  
    </body>  
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>$</title>
        <script type="text/javascript" language="javascript"
         src="prototype.js" ></script>
        <script type="text/javascript" language="javascript">
        function test1() {
            var div = $("div1"); // 单个参数
            alert(div.innerHTML);
        }       
        function test2() {
            var divs = $("div1", "div2"); // 多个参数
            for (var i = 0; i < divs.length; i++) {
                alert(divs[i].innerHTML);
            }
        }
        </script>
    </head>
    <body>
    <div id="div1">
        div1
    </div>
    <div id="div2">
        div2
    </div>
    <input type="button" value="click1" onclick="test1()" />
    <input type="button" value="click2" onclick="test2()" />
    </body>
</html>
Prototype实战教程----7.AJAX
Java代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
    <head>  
        <title>Ajax</title>  
        <script type="text/javascript" language="javascript" 
         src="prototype.js" ></script>  
        <script type="text/javascript" language="javascript">  
        function test() {  
            var myAjax = new Ajax.Request(  
                'http://www.wanfangdata.com.cn',   
                {  
                    method: 'get',   
                    onComplete: showResponse  
                }  
            );  
        }          
        function showResponse(response) {  
            $('divResult').innerHTML = response.responseText;  
        }          
        var handle = {  
            onCreate: function() {  
                Element.show('loading');  
            },  
            onComplete: function() {  
                if (Ajax.activeRequestCount == 0) {  
                    Element.hide('loading');  
                }  
            }  
        };  
        Ajax.Responders.register(handle);//把handle注册到全局的Ajax.Responders，Ajax.Responders用来维护一个正在运行的Ajax对象列表  
        </script>  
    </head>  
    <body>  
    <input type="button" value="click" onclick="test()" />  
    <div id="divResult" ></div>  
    <div id='loading' style="display:none">  
        <img src="loading2.gif">Loading  
    </div>  
    </body>  
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Ajax</title>
        <script type="text/javascript" language="javascript"
         src="prototype.js" ></script>
        <script type="text/javascript" language="javascript">
        function test() {
            var myAjax = new Ajax.Request(
                'http://www.wanfangdata.com.cn',
                {
                    method: 'get',
                    onComplete: showResponse
                }
            );
        }       
        function showResponse(response) {
            $('divResult').innerHTML = response.responseText;
        }       
        var handle = {
            onCreate: function() {
                Element.show('loading');
            },
            onComplete: function() {
                if (Ajax.activeRequestCount == 0) {
                    Element.hide('loading');
                }
            }
        };
        Ajax.Responders.register(handle);//把handle注册到全局的Ajax.Responders，Ajax.Responders用来维护一个正在运行的Ajax对象列表
        </script>
    </head>
    <body>
    <input type="button" value="click" onclick="test()" />
    <div id="divResult" ></div>
    <div id='loading' style="display:none">
        <img src="loading2.gif">Loading
    </div>
    </body>
</html>
Prototype实战教程----8.顶层对象
Java代码
<html>  
<head>  
<title>顶层元素</title>  
<script src="prototype.js"></script>  
<script>  
    var Person=Class.create();  
    Person.prototype={  
        initialize:function(){},  
        name:'',  
        birthday:'',  
        age:'',  
        Show:function(){alert("This is "+this.name);}  
    };  
    function TestPerson()  
    {  
        var p=new Person();  
        p.name="Tom";  
        p.age=4;  
        p.birthday="1997-7-1";  
        p.Show();  
    };  
    var User=Class.create();  
    User.prototype={  
        initialize:function(){},  
        userid:'',  
        Report:function()  
        {  
            alert("UserID:"+this.userid+"   Name:"+this.name+"   Age:"+this.age+"  Birthday:"+this.birthday);  
        }  
    };  
    Object.extend(User.prototype,Person.prototype);  
    function TestUser()  
    {  
        var user=new User();  
        user.name="Chou Fat";  
        user.age=4;  
        user.userid=2396 
        user.birthday="1997-7-1";  
        user.Show();  
        user.Report();      
    }  
    function ShowPrototypeInfo()  
    {  
        alert(Prototype.Version+"   "+Prototype.ScriptFragment);  
    }  
    function TestInspect()  
    {  
        var s="wanfangsoftcenter";  
        alert(Object.inspect(s));  
    }  
    //-------------------------------------------------------  
    function testFunctionBind()  
    {  
        var person=new Person();  
        person.name="Jerry";  
        person.age=4;  
        person.birthday="1997-7-1";  
        var user=new User();  
        user.name="Tom";  
        user.age=5;  
        user.userid=2396 
        user.birthday="1999-12-20";  
        var handler=user.Report.bind(person);  
        handler();  
    }  
    var Listener=new Class.create();  
    Listener.prototype={  
        initialize:function(btn,message)  
        {  
            $(btn).onclick=this.showMessage.bindAsEventListener(message);  
        },  
        showMessage:function(message){  
            alert(message);  
        }  
    };  
    var listener=new Listener("testEventListener","点击！");  
    </script>  
<body>  
<input type=button value="ShowPrototypeInfo" onclick='return ShowPrototypeInfo();' />显示Prototype的基本信息<br><hr>  
<input type=button value="TestPerson" onclick='return TestPerson();' />利用我们创建的Person类生成一个p对象 检测一下是否成功<br>  
<input type=button value="TestUser" onclick='return TestUser();' />User类继承Person类，生成一个User对象 检测一下是否成功<br>  
<input type=button value="TestInspect" onclick='return TestInspect();' />测试一下Object的Inspect方法<br>  
<input type=button value="testFunctionBind" onclick='return testFunctionBind();' />测试一下Object的FunctionBind方法<br>  
<input type=button value="testEventListener" id="testEventListener" />testEventListener<br>  
<script>  
    var Listener=new Class.create();  
    Listener.prototype={  
        initialize:function(btn,message)  
        {  
            this.message=message;  
            $(btn).onclick=this.showMessage.bindAsEventListener(this);  
        },  
        showMessage:function(){  
            alert(this.message);  
        }  
    };  
    var listener=new Listener("testEventListener","点击！");  
</script>  
<hr>  
<script>  
function TimeExe()  
{  
    var timerExe=new  PeriodicalExecuter(showTime,1);  
}  
function showTime()  
{  
    var time =new Date();  
    var d = $('myDiv');  
    d.innerHTML=time;  
}  
</script>  
<div id="myDiv">  
<p>This is a paragraph</p>  
<input type="button" value=定时器测试 onclick="TimeExe();"><br></div>  
<hr>  
<script>  
function TestNumber()  
{  
    var n=50;  
    var b=3;  
    alert(n.toColorPart());  
    alert(n.succ());  
    alert(b.toPaddedString());  
    //b.times(alert());  
}  
</script>  
<input type="button" value='Number测试' onclick="return TestNumber();"/><br>  
</body>  
</html> 

<html>
<head>
<title>顶层元素</title>
<script src="prototype.js"></script>
<script>
var Person=Class.create();
Person.prototype={
initialize:function(){},
name:'',
birthday:'',
age:'',
Show:function(){alert("This is "+this.name);}
    };
    function TestPerson()
    {
        var p=new Person();
        p.name="Tom";
        p.age=4;
        p.birthday="1997-7-1";
        p.Show();
    };
    var User=Class.create();
    User.prototype={
        initialize:function(){},
        userid:'',
        Report:function()
        {
            alert("UserID:"+this.userid+"   Name:"+this.name+"   Age:"+this.age+"  Birthday:"+this.birthday);
        }
    };
    Object.extend(User.prototype,Person.prototype);
    function TestUser()
{
var user=new User();
user.name="Chou Fat";
user.age=4;
user.userid=2396
user.birthday="1997-7-1";
user.Show();
user.Report();   
    }
    function ShowPrototypeInfo()
    {
alert(Prototype.Version+"   "+Prototype.ScriptFragment);
    }
    function TestInspect()
    {
var s="wanfangsoftcenter";
        alert(Object.inspect(s));
    }
    //-------------------------------------------------------
    function testFunctionBind()
    {
        var person=new Person();
        person.name="Jerry";
        person.age=4;
        person.birthday="1997-7-1";
        var user=new User();
        user.name="Tom";
        user.age=5;
        user.userid=2396
        user.birthday="1999-12-20";
        var handler=user.Report.bind(person);
        handler();
    }
    var Listener=new Class.create();
Listener.prototype={
initialize:function(btn,message)
{
$(btn).onclick=this.showMessage.bindAsEventListener(message);
},
showMessage:function(message){
alert(message);
}
    };
var listener=new Listener("testEventListener","点击！");
</script>
<body>
<input type=button value="ShowPrototypeInfo" onclick='return ShowPrototypeInfo();' />显示Prototype的基本信息<br><hr>
<input type=button value="TestPerson" onclick='return TestPerson();' />利用我们创建的Person类生成一个p对象 检测一下是否成功<br>
<input type=button value="TestUser" onclick='return TestUser();' />User类继承Person类，生成一个User对象 检测一下是否成功<br>
<input type=button value="TestInspect" onclick='return TestInspect();' />测试一下Object的Inspect方法<br>
<input type=button value="testFunctionBind" onclick='return testFunctionBind();' />测试一下Object的FunctionBind方法<br>
<input type=button value="testEventListener" id="testEventListener" />testEventListener<br>
<script>
var Listener=new Class.create();
Listener.prototype={
initialize:function(btn,message)
        {
            this.message=message;
            $(btn).onclick=this.showMessage.bindAsEventListener(this);
        },
        showMessage:function(){
            alert(this.message);
        }
    };
    var listener=new Listener("testEventListener","点击！");
</script>
<hr>
<script>
function TimeExe()
{
    var timerExe=new  PeriodicalExecuter(showTime,1);
}
function showTime()
{
    var time =new Date();
    var d = $('myDiv');
    d.innerHTML=time;
}
</script>
<div id="myDiv">
<p>This is a paragraph</p>
<input type="button" value=定时器测试 onclick="TimeExe();"><br></div>
<hr>
<script>
function TestNumber()
{
    var n=50;
    var b=3;
    alert(n.toColorPart());
    alert(n.succ());
alert(b.toPaddedString());
    //b.times(alert());
}
</script>
<input type="button" value='Number测试' onclick="return TestNumber();"/><br>
</body>
</html>
Prototype实战教程----9.Array
Java代码
<script src="prototype.js"></script>  
<script>  
var arr = [1,2,3,4,8,5,4,3];  
// 依次输出1,2,3,4,5,4,3  
arr.each(  
    function (item, index) {  
        if (item < 6) {  
            alert(item);  
        } else {  
            throw $continue;  
        }  
    }  
);  
// 依次输出1,2,3,4  
arr.each(  
    function (item, index) {  
        if (item < 6) {  
            alert(item);  
        } else {  
            throw $break;  
        }  
    }  
);  
var arr = [1,2,3,4,5];  
arr = [1,2,3,4,5]  
arr.reverse(false);  
alert(arr.inspect());  
arr = [5,4,3,2,1]  
arr.reverse();  
alert(arr.inspect());  
var arr = [1,2,3,4,5];  
arr.reverse();  
// 返回2在arr中的序号：1  
var index = arr.indexOf(2);  
alert(index)  
var arr = [1,2,3,4,5];  
// 不包含2和4，返回[1,3,5]  
var newArr = arr.without(2,4);  
alert(newArr.inspect());  
var arr = [1,2,3,4,5];  
arr.clear();  
alert(arr[2]);  
var arr = [1,2,3,4,5];  
var arr2 = [2,4,6,8,10];  
//[ [1,2],[2,4],[3,6],[4,8],[5,10]]  
var newArr = arr.zip(arr2);  
// [[1,4],[4,16],[9,36],[16,64],[25,100]]  
var newArr2 = arr.zip(  
    arr2,  
    function (item) {  
        var newItem = item.collect(  
            function (item, index) {  
                return item * item;  
            }  
        );  
        return newItem;  
    }  
);  
alert(newArr.inspect());  
alert(newArr2.inspect());  
var arr = [5,2,3,1,4];  
// 将arr排序  
var arr = arr.sortBy(  
    function (item, index) {  
        return item;  
    }  
);  
arr.each(  
    function (item, index) {  
        alert(item);  
    }  
);  
var arr = [  
    {root: 1, square: 1},  
    {root: 2, square: 4},  
    {root: 3, square: 9},  
    {root: 4, square: 16},  
    {root: 5, square: 25}  
];  
var newArr = arr.pluck("square");  
alert(newArr[4]);  
var arr = [1,2,3,4,5];  
var ptArr = arr.partition(  
    function (item, index) {  
        return item%2 == 1;  
    }  
);  
var oddArr = ptArr[0];  
var evenArr = ptArr[1];  
oddArr.each(  
    function (item) {  
        alert(item);  
    }  
);  
evenArr.each(  
    function (item) {  
        alert(item);  
    }  
);  
var arr = [1,2,3,4,5];  
// 最大值  
var max = -arr.min(  
    function (item, index) {  
        return -item;  
    }  
);  
// 最小值  
var min = arr.min();  
alert(max);  
alert(min);  
var arr = [1,2,3,4,5];  
// 最大值  
var max = arr.max();  
// 最小值  
var min = -arr.max(  
    function (item, index) {  
        return -item;  
    }  
);  
alert(max);  
alert(min);  
// 求集合中每一个元素的平方  
Number.prototype.square = function () {  
    return this * this;  
}  
var arr = [1,2,3,4,5];  
var newArr = arr.invoke("square");  
alert(newArr[4]);  
// 计算arr中所有数的乘积  
var factorial = arr.inject(  
    1,  
    function (accumulator, item, index) {  
        return accumulator * item;  
    }  
);  
alert(factorial)  
// 判断集合中是否包含”2“  
var inc = arr.include(2);  
alert(inc);  
var arr = ["12345", "abc2", "cde", "fgh", "132ba"];  
var newArray = arr.grep(  
    /2/,  
    function (item, index) {  
        return item + " contains 2";  
    }  
)  
newArray.each(  
    function (item) {  
        alert(item);  
    }  
);  
var arr = [1,2,3,4,5];  
// 返回集合中所有的奇数  
var oddArr = arr.findAll(  
    function (item, index) {  
        return item%2 == 1;  
    }  
);  
alert(oddArr[2]);  
// 返回第一个大于3的元素  
var ele = arr.find(  
    function (item, index) {  
        return (item > 3);  
    }  
);  
alert(ele);  
var newArr = arr.collect(  
    function (item, index) {  
        return item * (index + 1);  
    }  
);  
var hasNegative = arr.any(  
    function (item, index) {  
        return (item < 0);  
    }  
);  
// 测试集合中的所有元素是否大于0  
var allPositive = arr.all(  
    function(item, index) {  
        return (item > 0);  
    }  
)  
alert(allPositive);  
arr.each(  
    function (item, index) {  
        alert("arr[" + index + "] = " + item);  
    }  
);*/  
</script> 

<script src="prototype.js"></script>
<script>
var arr = [1,2,3,4,8,5,4,3];
// 依次输出1,2,3,4,5,4,3
arr.each(
    function (item, index) {
        if (item < 6) {
            alert(item);
        } else {
            throw $continue;
        }
    }
);
// 依次输出1,2,3,4
arr.each(
    function (item, index) {
        if (item < 6) {
            alert(item);
        } else {
            throw $break;
        }
    }
);
var arr = [1,2,3,4,5];
arr = [1,2,3,4,5]
arr.reverse(false);
alert(arr.inspect());
arr = [5,4,3,2,1]
arr.reverse();
alert(arr.inspect());
var arr = [1,2,3,4,5];
arr.reverse();
// 返回2在arr中的序号：1
var index = arr.indexOf(2);
alert(index)
var arr = [1,2,3,4,5];
// 不包含2和4，返回[1,3,5]
var newArr = arr.without(2,4);
alert(newArr.inspect());
var arr = [1,2,3,4,5];
arr.clear();
alert(arr[2]);
var arr = [1,2,3,4,5];
var arr2 = [2,4,6,8,10];
//[ [1,2],[2,4],[3,6],[4,8],[5,10]]
var newArr = arr.zip(arr2);
// [[1,4],[4,16],[9,36],[16,64],[25,100]]
var newArr2 = arr.zip(
    arr2,
    function (item) {
        var newItem = item.collect(
            function (item, index) {
                return item * item;
            }
        );
        return newItem;
    }
);
alert(newArr.inspect());
alert(newArr2.inspect());
var arr = [5,2,3,1,4];
// 将arr排序
var arr = arr.sortBy(
    function (item, index) {
        return item;
    }
);
arr.each(
    function (item, index) {
        alert(item);
    }
);
var arr = [
    {root: 1, square: 1},
    {root: 2, square: 4},
    {root: 3, square: 9},
    {root: 4, square: 16},
    {root: 5, square: 25}
];
var newArr = arr.pluck("square");
alert(newArr[4]);
var arr = [1,2,3,4,5];
var ptArr = arr.partition(
    function (item, index) {
        return item%2 == 1;
    }
);
var oddArr = ptArr[0];
var evenArr = ptArr[1];
oddArr.each(
    function (item) {
        alert(item);
    }
);
evenArr.each(
    function (item) {
        alert(item);
    }
);
var arr = [1,2,3,4,5];
// 最大值
var max = -arr.min(
    function (item, index) {
        return -item;
    }
);
// 最小值
var min = arr.min();
alert(max);
alert(min);
var arr = [1,2,3,4,5];
// 最大值
var max = arr.max();
// 最小值
var min = -arr.max(
    function (item, index) {
        return -item;
    }
);
alert(max);
alert(min);
// 求集合中每一个元素的平方
Number.prototype.square = function () {
    return this * this;
}
var arr = [1,2,3,4,5];
var newArr = arr.invoke("square");
alert(newArr[4]);
// 计算arr中所有数的乘积
var factorial = arr.inject(
    1,
    function (accumulator, item, index) {
        return accumulator * item;
    }
);
alert(factorial)
// 判断集合中是否包含”2“
var inc = arr.include(2);
alert(inc);
var arr = ["12345", "abc2", "cde", "fgh", "132ba"];
var newArray = arr.grep(
    /2/,
    function (item, index) {
        return item + " contains 2";
    }
)
newArray.each(
    function (item) {
        alert(item);
    }
);
var arr = [1,2,3,4,5];
// 返回集合中所有的奇数
var oddArr = arr.findAll(
    function (item, index) {
        return item%2 == 1;
    }
);
alert(oddArr[2]);
// 返回第一个大于3的元素
var ele = arr.find(
    function (item, index) {
        return (item > 3);
    }
);
alert(ele);
var newArr = arr.collect(
    function (item, index) {
        return item * (index + 1);
    }
);
var hasNegative = arr.any(
    function (item, index) {
        return (item < 0);
    }
);
// 测试集合中的所有元素是否大于0
var allPositive = arr.all(
    function(item, index) {
        return (item > 0);
    }
)
alert(allPositive);
arr.each(
    function (item, index) {
        alert("arr[" + index + "] = " + item);
    }
);*/
</script>
Prototype实战教程----10.Element
Java代码
<html><head><script src="prototype.js"></script>   
<script>     
    function testRemove()  
    {  
        Element.remove("mydiv3");  
    }  
    function testReplace()  
    {  
        Element.replace("myDiv2",'<img src="200607061129268fc45.jpg">');  
    }  
</script>  
</head>  
<body>  
<div id="myDiv">        2002    </div>   
<div id="myDiv1">        2003    </div>   
<div id="myDiv2">        2004    </div>   
<div id="myDiv3">        将被删除的部分    </div>   
<div id="myDiv4">        2006    </div>   
<div id="myDiv5">        2007    </div>   
<div id="myDiv6">        2008    </div>   
<hr>  
<input type="button" value='removeTest' onclick="return testRemove();"/><br>  
<input type="button" value='testReplace' onclick="return testReplace();"/><br>  
</body>  
</html> 

<html><head><script src="prototype.js"></script>
<script>  
function testRemove()
    {
        Element.remove("mydiv3");
    }
    function testReplace()
    {
        Element.replace("myDiv2",'<img src="200607061129268fc45.jpg">');
    }
</script>
</head>
<body>
<div id="myDiv">        2002    </div>
<div id="myDiv1">        2003    </div>
<div id="myDiv2">        2004    </div>
<div id="myDiv3">        将被删除的部分    </div>
<div id="myDiv4">        2006    </div>
<div id="myDiv5">        2007    </div>
<div id="myDiv6">        2008    </div>
<hr>
<input type="button" value='removeTest' onclick="return testRemove();"/><br>
<input type="button" value='testReplace' onclick="return testReplace();"/><br>
</body>
</html>
Prototype实战教程----11.Inserttion
Java代码
<script src="prototype.js"></script>  
<div id="div1" style="font-size:20px;font-weight:bold">  
<hr>基线<hr>  
</div>  
<script>   
new Insertion.After("div1", " After");   
new Insertion.Bottom("div1", " Bottom");   
new Insertion.Top("div1", " Top");   
new Insertion.Before("div1", " Before");   
</script> 

<script src="prototype.js"></script>
<div id="div1" style="font-size:20px;font-weight:bold">
<hr>基线<hr>
</div>
<script>
new Insertion.After("div1", " After");
new Insertion.Bottom("div1", " Bottom");
new Insertion.Top("div1", " Top");
new Insertion.Before("div1", " Before");
</script>
Prototype实战教程----12.Event.observe
Java代码
<script src="prototype.js"></script>  
<input type="button" id="btn" value="click" />  
<input type="button" id="reg" value="register" />  
<input type="button" id="unreg" value="unregister" />  
<div id="status"></div>  
<script>  
function test() {  
    alert("clicked");  
}  
Event.observe("reg", "click", function () {  
        Event.observe("btn", "click", test, false);  
        $("status").innerHTML = "event registered";  
    }, false 
);  
Event.observe("unreg", "click", function () {  
        Event.stopObserving("btn", "click", test, false);  
        $("status").innerHTML = "event unregistered";  
    }, false 
);  
</script> 

<script src="prototype.js"></script>
<input type="button" id="btn" value="click" />
<input type="button" id="reg" value="register" />
<input type="button" id="unreg" value="unregister" />
<div id="status"></div>
<script>
function test() {
    alert("clicked");
}
Event.observe("reg", "click", function () {
        Event.observe("btn", "click", test, false);
        $("status").innerHTML = "event registered";
    }, false
);
Event.observe("unreg", "click", function () {
        Event.stopObserving("btn", "click", test, false);
        $("status").innerHTML = "event unregistered";
    }, false
);
</script>
Prototype实战教程----13.Form.Element.Observer
Java代码
<script src="prototype.js"></script>  
<form id="frm">  
<div id="div1">  
    <input type="text" id="txt" name="txt" onchange="return alert('Now')"/>  
    <input type="text" id="txt2" name="txt2" />  
    <input type="button" id="btn" name="btn" value="click" onclick="test(event)" />  
    <input type="submit" />  
    <a href="http://www.google.com" onclick="test2(event)">Google</a>  
    <input type="button" id="btn1" name="btn1" 
    value="click" onclick="test3(event)" />  
</div>  
</form>  
<script>  
function test(evt) {  
    alert($("btn") === Event.element(evt));  
}  
function test2(evt) {  
    alert("clicked");  
    Event.stop(evt);  
}  
function test3(evt) {  
    alert($("div1") === Event.findElement(evt, "div"))  
}  
new Form.EventObserver("frm", function () {  
        alert("form changed");  
    }  
);  
new Form.Element.EventObserver("txt", function () {  
        alert("txt changed");  
    }  
);  
new Form.Observer("frm", 1, function () {  
        alert("form changed");  
    }  
);  
new Form.Element.Observer("txt", 1, function () {  
        alert("changed");  
    }  
);  
</script> 

<script src="prototype.js"></script>
<form id="frm">
<div id="div1">
    <input type="text" id="txt" name="txt" onchange="return alert('Now')"/>
    <input type="text" id="txt2" name="txt2" />
    <input type="button" id="btn" name="btn" value="click" onclick="test(event)" />
    <input type="submit" />
    <a href="http://www.google.com" onclick="test2(event)">Google</a>
    <input type="button" id="btn1" name="btn1"
    value="click" onclick="test3(event)" />
</div>
</form>
<script>
function test(evt) {
    alert($("btn") === Event.element(evt));
}
function test2(evt) {
    alert("clicked");
    Event.stop(evt);
}
function test3(evt) {
    alert($("div1") === Event.findElement(evt, "div"))
}
new Form.EventObserver("frm", function () {
        alert("form changed");
    }
);
new Form.Element.EventObserver("txt", function () {
        alert("txt changed");
    }
);
new Form.Observer("frm", 1, function () {
        alert("form changed");
    }
);
new Form.Element.Observer("txt", 1, function () {
        alert("changed");
    }
);
</script>
Prototype实战教程----14.Hash
Java代码
<script src="prototype.js"></script>  
<script>  
// 创建一个对象  
var obj = {  
    key1: 1,  
    key2: 2,  
    key3: 3 
};  
// 将其转换为Hash对象  
var hash = $H(obj);  
// 输出 #<Hash: {'key1': 1, 'key2' : 2, 'key3': 3}>  
// 输出key1=1&key2=2&key3=3  
alert("hash.inspect()"+hash.inspect()+"\r\ntoQueryString:    "+hash.toQueryString()+"\r\n"+"values:   "+hash.values()+"\r\n keys:    "+hash.keys());  
</script> 

<script src="prototype.js"></script>
<script>
// 创建一个对象
var obj = {
    key1: 1,
    key2: 2,
    key3: 3
};
// 将其转换为Hash对象
var hash = $H(obj);
// 输出 #<Hash: {'key1': 1, 'key2' : 2, 'key3': 3}>
// 输出key1=1&key2=2&key3=3
alert("hash.inspect()"+hash.inspect()+"\r\ntoQueryString:    "+hash.toQueryString()+"\r\n"+"values:   "+hash.values()+"\r\n keys:    "+hash.keys());
</script>
Prototype实战教程----15.ObjectRange
Java代码
<script src="prototype.js"></script>  
<div id="div1" style="font-size:20px;font-weight:bold">  
ObjectRange  
</div>  
<script>   
var range = $R(1, 10, false);  
var range2 = $R(1, 10, true);  
alert(range.merge(range2));  
// true  
alert(range.include(1));  
// true  
alert(range.include(5));  
// true  
alert(range.include(10));  
// true  
alert(range2.include(1));  
// true  
alert(range2.include(5));  
// false  
alert(range2.include(10));  
</script> 

<script src="prototype.js"></script>
<div id="div1" style="font-size:20px;font-weight:bold">
ObjectRange
</div>
<script>
var range = $R(1, 10, false);
var range2 = $R(1, 10, true);
alert(range.merge(range2));
// true
alert(range.include(1));
// true
alert(range.include(5));
// true
alert(range.include(10));
// true
alert(range2.include(1));
// true
alert(range2.include(5));
// false
alert(range2.include(10));
</script>
Prototype实战教程----16.string
Java代码
<html>  
<head>  
<title>String Test</title>  
<script src="prototype.js"></script>  
<script>  
    function testStrip()  
    {  
        var str=new String('       wanfangdata      ');  
        alert(str.strip());    
    }  
    function teststripTags()  
    {  
        var str=new String('<html>2002<head>2005<body> ');  
        alert(str.stripTags());    
    }  
    function testtruncate()  
    {  
        var str=new String('king123456789987654321');  
        alert(str.truncate(8,'*'));    
    }  
    function testcamelize()  
    {  
        var str=new String('Background-color')  
        alert(str.camelize())  
    }  
    function testcapitalize()  
    {  
        var str=new String('back');  
        alert(str.capitalize());  
    }      
    function testDasherize()  
    {  
        var str=new String('Hello_World');  
        alert(str.dasherize());    
    }  
    function testinspect()  
    {  
        alert("sdfj\"sfa".inspect() );  
    }  
    function testgsub()  
    {  
        alert("skdjfAsfdjkAdk".gsub(/A/,function(match) {return match[0].toLowerCase()}));  
    }  
    function testScan()  
    {  
        alert("skdjfAsfdjkAdk".scan(/A/,function(){alert('have a A')}));  
    }  
    function testUnderscore()  
    {  
        alert('borderBottomWidth'.underscore());  
    }  
    function testTemplate()  
    {  
        var temp = new Template("被替换");       
        alert(temp.evaluate('aAklkljkjAkka'));  
    }  
    function testTimes()  
    {           
        alert('['+'Q'.times(10)+']');  
    }  
    function testEval()  
    {  
        var str="<script"+">alert('ok');<"+"/script>";  
        str.evalScripts();  
    }  
</script>  
<body>  
<p><input type=button value='Strip' onclick='testStrip();' />"       wanfangdata         "  ---> 'wanfangdata'去掉两边的空格</p><br/>  
<p><input type=button value='stripTags' onclick='teststripTags();' />“&lt;html&gt;2002&lt;head&gt;2005&lt;body&gt;” ---> '20022005'去掉html标签</p><br/>  
<p><input type=button value='truncate' onclick='testtruncate();' />“123456789>987654321” ---> '123456>'字符串截断</p><br/>  
<p><input type=button value='camelize' onclick='testcamelize();' />Background-color --->BackgroundColor</p><br/>  
<p><input type=button value='capitalize' onclick='testcapitalize();' />back--->Back</p><br/>  
<p><input type=button value='inspect' onclick='testinspect();' />sdfj\"sfa--->sdfj"sfa</p><br/>  
<p><input type=button value='testgsub' onclick='testgsub();' />skdjfAsfdjkAdk--->skdjfasfdjkadk</p><br/>  
<p><input type=button value='testScan' onclick='testScan();' />字符串检测</p><br/>  
<p><input type=button value='testTemplate（）' onclick='testTemplate();' />字符串模板</p><br/>  
<p><input type=button value='testTimes' onclick='testTimes();' />字符串重复</p><br/>  
<p><input type=button value='执行脚本' onclick='return testEval();' />执行字符串脚本</p><br/>  
<p><input type=button value='testUnderscore' onclick='testUnderscore();' />'borderBottomWidth’.underscore()  -> 'border_bottom_width’  
</p><br/>  
<p><input type=button value='testDasherize' onclick='testDasherize();' />'Hello_World'  ---> 'Hello-World'把下划线转化成-</p><br/>  
</body>  
</html> 

<html>
<head>
<title>String Test</title>
<script src="prototype.js"></script>
<script>
function testStrip()
{
var str=new String('       wanfangdata      ');
alert(str.strip()); 
}
function teststripTags()
{
var str=new String('<html>2002<head>2005<body> ');
alert(str.stripTags()); 
}
function testtruncate()
{
var str=new String('king123456789987654321');
alert(str.truncate(8,'*')); 
}
    function testcamelize()
    {
        var str=new String('Background-color')
        alert(str.camelize())
    }
    function testcapitalize()
    {
        var str=new String('back');
alert(str.capitalize());
    }   
function testDasherize()
{
var str=new String('Hello_World');
alert(str.dasherize()); 
}
function testinspect()
{
alert("sdfj\"sfa".inspect() );
}
    function testgsub()
    {
        alert("skdjfAsfdjkAdk".gsub(/A/,function(match) {return match[0].toLowerCase()}));
    }
    function testScan()
    {
        alert("skdjfAsfdjkAdk".scan(/A/,function(){alert('have a A')}));
    }
    function testUnderscore()
    {
alert('borderBottomWidth'.underscore());
    }
    function testTemplate()
    {
var temp = new Template("被替换");    
        alert(temp.evaluate('aAklkljkjAkka'));
    }
    function testTimes()
    {        
        alert('['+'Q'.times(10)+']');
    }
    function testEval()
    {
        var str="<script"+">alert('ok');<"+"/script>";
        str.evalScripts();
    }
</script>
<body>
<p><input type=button value='Strip' onclick='testStrip();' />"       wanfangdata         "  ---> 'wanfangdata'去掉两边的空格</p><br/>
<p><input type=button value='stripTags' onclick='teststripTags();' />“&lt;html&gt;2002&lt;head&gt;2005&lt;body&gt;” ---> '20022005'去掉html标签</p><br/>
<p><input type=button value='truncate' onclick='testtruncate();' />“123456789>987654321” ---> '123456>'字符串截断</p><br/>
<p><input type=button value='camelize' onclick='testcamelize();' />Background-color --->BackgroundColor</p><br/>
<p><input type=button value='capitalize' onclick='testcapitalize();' />back--->Back</p><br/>
<p><input type=button value='inspect' onclick='testinspect();' />sdfj\"sfa--->sdfj"sfa</p><br/>
<p><input type=button value='testgsub' onclick='testgsub();' />skdjfAsfdjkAdk--->skdjfasfdjkadk</p><br/>
<p><input type=button value='testScan' onclick='testScan();' />字符串检测</p><br/>
<p><input type=button value='testTemplate（）' onclick='testTemplate();' />字符串模板</p><br/>
<p><input type=button value='testTimes' onclick='testTimes();' />字符串重复</p><br/>
<p><input type=button value='执行脚本' onclick='return testEval();' />执行字符串脚本</p><br/>
<p><input type=button value='testUnderscore' onclick='testUnderscore();' />'borderBottomWidth’.underscore()  -> 'border_bottom_width’
</p><br/>
<p><input type=button value='testDasherize' onclick='testDasherize();' />'Hello_World'  ---> 'Hello-World'把下划线转化成-</p><br/>
</body>
</html>
prototype 1.5 【转】
一直没有没有时间看prototype,现在好了，已经更新到了1.5 pre1,呵呵,强大的功能不得不学习啊,这个是提升自己JS能力的又一个捷径.
1. Prototype是什么?
或许你还没有用过它， prototype.js 是一个由Sam Stephenson写的JavaScript包。这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端， 高交互性WEB应用程序的重担。轻松加入Web 2.0特性。
如果你最近体验了这个程序包，你很可能会发现文档并不是它的强项之一。像所有在我之前的开发者一样，我只能一头扎进prototype.js的源代码中并且试验其中的每一个部分。 我想当我学习他的时候记写笔记然后分享给其他人将会很不错。
我也一起提供了这个包的对象，类，方法和扩展的 非官方参考 。

2. 通用性方法
这个程序包里面包含了许多预定义的对象和通用性方法。编写这些方法的明显的目的就是为了减少你大量的重复编码和惯用法。
从Prototype1.5.x版本开始，你可以更方便的如下面代码一样操作DOM对象了:
程序代码
Java代码
var ele = $("myelement");  
ele.hide(); //隐藏DOM对象对比从前的版本var ele = $("myelement");  
Element.hide(ele); //隐藏DOM对象 

var ele = $("myelement");
ele.hide(); //隐藏DOM对象对比从前的版本var ele = $("myelement");
Element.hide(ele); //隐藏DOM对象

这样的改变有什么益处呢？ 我觉得一来是更面向对象了，二来就是便于将来IDE里的代码提示。
2.1. 使用 $()方法
$() 方法是在DOM中使用过于频繁的 document.getElementById() 方法的一个便利的简写，
就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。
比起DOM中的方法，这个更胜一筹。你可以传入多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。下面的例子会向你描述这些。
程序代码
Java代码
<HTML>  
<HEAD>  
<TITLE> Test Page </TITLE>  
<script src="prototype-1.3.1.js"></script>  
<script>  
function test1()  
{  
    var d = $('myDiv');  
    alert(d.innerHTML);  
}  
function test2()  
{  
    var divs = $('myDiv','myOtherDiv');  
    for(i=0; i<divs.length; i++)  
    {  
    alert(divs[i].innerHTML);  
    }  
}  
</script>  
</HEAD>  
<BODY>  
<div id="myDiv">  
<p>This is a paragraph</p>  
</div>  
<div id="myOtherDiv">  
<p>This is another paragraph</p>  
</div>  
<input type="button" value=Test1 onclick="test1();"><br>  
<input type="button" value=Test2 onclick="test2();"><br>  
</BODY>  
</HTML> 

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.3.1.js"></script>
<script>
function test1()
{
var d = $('myDiv');
alert(d.innerHTML);
}
function test2()
{
var divs = $('myDiv','myOtherDiv');
for(i=0; i<divs.length; i++)
{
alert(divs[i].innerHTML);
}
}
</script>
</HEAD>
<BODY>
<div id="myDiv">
<p>This is a paragraph</p>
</div>
<div id="myOtherDiv">
<p>This is another paragraph</p>
</div>
<input type="button" value=Test1 onclick="test1();"><br>
<input type="button" value=Test2 onclick="test2();"><br>
</BODY>
</HTML>
这个方法的另一个好处就是你可以传入id字符串或者元素对象自己，这使得在创建可以传入任何形式参数的方法的时候， 它变得非常有用。

2.2. 使用$F()方法
$F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值，如文本框或下拉框。 这个方法可以传入元素的id或者元素自己。
程序代码
Java代码
<script>  
function test3()  
{  
    alert( $F('userName') );  
}  
</script>  
<input type="text" id="userName" value="Joe Doe"><br>   
<input type="button" value=Test3 onclick="test3();"><br> 

<script>
function test3()
{
alert( $F('userName') );
}
</script>
<input type="text" id="userName" value="Joe Doe"><br>
<input type="button" value=Test3 onclick="test3();"><br>

2.3. 使用Try.these()方法
Try.these() 方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易， 他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行，返回成功执行的那个方法的返回值。

在下面的例子中， xmlNode.text在一些浏览器中好用，但是xmlNode.textContent在另一些浏览器中正常工作。 使用Try.these()方法我们可以得到正常工作的那个方法的返回值。
程序代码
Java代码
<script>  
function getXmlNodeValue(xmlNode){  
    return Try.these(  
        function() {return xmlNode.text;},  
        function() {return xmlNode.textContent;}  
    );  
}  
</script> 

<script>
function getXmlNodeValue(xmlNode){
return Try.these(
function() {return xmlNode.text;},
function() {return xmlNode.textContent;}
);
}
</script>
3. Ajax 对象
上面提到的共通方法非常好，但是面对它吧，它们不是最高级的那类东西。它们是吗？你很可能自己编写了这些甚至在你的脚本里面有类似功能的方法。但是这些方法只是冰山一角。
我很肯定你对prototype.js感兴趣的原因很可能是由于它的AJAX能力。所以让我们解释当你需要完成AJAX逻辑的时候，这个包如何让它更容易。
Ajax 对象是一个预定义对象，由这个包创建，为了封装和简化编写AJAX 功能涉及的狡猾的代码。 这个对象包含一系列的封装AJAX逻辑的类。我们来看看它们的一些。

3.1. 使用 Ajax.Request类
如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建XMLHttpRequest对象并且异步的跟踪它的进程， 然后解析出响应 然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。
为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。
假如你有一个应用程序可以通过url http://yoursever/app/get_sales?empID=1234&year=1998与服务器通信。它返回下面这样的XML 响应。
程序代码
Java代码
<?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> 

<?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是非常简单的。下面的例子演示了它是如何完成的。
程序代码
Java代码
<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> 

<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。
还有一些其它的属性可以在这个对象里面定义和设置，如 asynchronous，可以为true 或 false 来决定AJAX对服务器的调用是否是异步的（默认值是 true）。
这个参数定义AJAX调用的选项。在我们的例子中，在第一个参数通过HTTP GET命令请求那个url，传入了变量 pars包含的查询字符串， Ajax.Request 对象在它完成接收响应的时候将调用showResponse 方法。
也许你知道， XMLHttpRequest在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 对象在任何阶段调用自定义方法 ，Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为 onXXXXX 属性/方法中提供自定义的方法对象。 就像我们例子中的 onComplete 。你传入的方法将会被用一个参数调用，这个参数是 XMLHttpRequest 对象自己。你将会用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP结果代码的 status 属性。
还有另外两个有用的选项用来处理结果。我们可以在onSuccess 选项处传入一个方法，当AJAX无误的执行完后调用， 相反的，也可以在onFailure选项处传入一个方法，当服务器端出现错误时调用。正如onXXXXX 选项传入的方法一样，这两个在被调用的时候也传入一个带有AJAX请求的XMLHttpRequest对象。
我们的例子没有用任何有趣的方式处理这个 XML响应， 我们只是把这段XML放进了一个文本域里面。对这个响应的一个典型的应用很可能就是找到其中的想要的信息，然后更新页面中的某些元素， 或者甚至可能做某些XSLT转换而在页面中产生一些HTML。

3.2. 使用 Ajax.Updater 类
如果你的服务器的另一端返回的信息已经是HTML了，那么使用这个程序包中 Ajax.Updater 类将使你的生活变得更加得容易。用它你只需提供哪一个元素需要被AJAX请求返回的HTML填充就可以了，例子比我写说明的更清楚。
程序代码
Java代码
<script>  
function getHTML()  
{  
    var url = 'http://yourserver/app/getSomeHTML';  
    var pars = 'someParameter=ABC';  
    var myAjax = new Ajax.Updater('placeholder', url, {method: 'get', parameters: pars});  
}  
</script>  
<input type=button value=GetHtml onclick="getHTML()">  
<div id="placeholder"></div> 

<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
var myAjax = new Ajax.Updater('placeholder', url, {method: 'get', parameters: pars});
}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>
你可以看到，这段代码比前面的例子更加简洁，不包括 onComplete 方法，但是在构造方法中传入了一个元素id。 我们来稍稍修改一下代码来描述如何在客户端处理服务器段错误成为可能。
我们将加入更多的选项， 指定处理错误的一个方法。这个是用 onFailure 选项来完成的。
我们也指定了一个 placeholder 只有在成功请求之后才会被填充。为了完成这个目的我们修改了第一个参数从一个简单的元素id到一个带有两个属性的对象， success (一切OK的时候被用到) 和 failure (有地方出问题的时候被用到) 在下面的例子中没有用到failure属性，而仅仅在 onFailure 处使用了 reportError 方法。
程序代码
Java代码
<script>  
function getHTML()  
{  
    var url = 'http://yourserver/app/getSomeHTML';  
    var pars = 'someParameter=ABC';  
    var myAjax = new Ajax.Updater(  
        {success: 'placeholder'},  
        url,  
        {method: 'get', parameters: pars, onFailure: reportError}  
    );  
}  
function reportError(request)  
{  
    alert('Sorry. There was an error.');  
}  
</script>  
<input type=button value=GetHtml onclick="getHTML()">  
<div id="placeholder"></div> 

<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
var myAjax = new Ajax.Updater(
{success: 'placeholder'},
url,
{method: 'get', parameters: pars, onFailure: reportError}
);
}
function reportError(request)
{
alert('Sorry. There was an error.');
}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>
如果你的服务器逻辑是返回JavaScript 代码而不是单纯的 HTML 标记， Ajax.Updater对象可以执行那段JavaScript代码。为了使这个对象对待响应为JavaScript，你只需在最后参数的对象构造方法中简单加入evalScripts: true属性。
分享到：
| 在Websphere上cms项目发布手册
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    prototype实例图片

    很不错的东西,对学习使用prototype有很大帮助,推荐ing...............

    prototype1.7.js

    　prototype.js不仅是一个有很大实用价值的js库，而且有很高的学习价值。 　－－－ 　在prototype.js中，prototype对象是实现面向对象的一个重要机制。 　每个函数（Function）就是一个对象，函数对象都有一...

    ASP基于Prototype的Ajax无刷新登录实例

    ASP环境下运用Prototype编写的Ajax无刷新登录实例，自带完整的ACCESS数据库，绝对是学习AJAX的好资料，希望初学者喜欢。源码爱好者注：测试登录帐号：jb51.net，密码同是。

    prototype.js

    prototype.js不仅是一个有很大实用价值的js库，而且有很高的学习价值。 －－－ 在prototype.js中，prototype对象是实现面向对象的一个重要机制。 每个函数就是一个对象（Function），函数对象都有一个子对象 ...

    Prototype.js学习从简单开始

    基础性的介绍和应用实例讲解

    prototype.js开发手册

    prototype.js不仅是一个有很大实用价值的js库，而且有很高的学习价值。 －－－ 在prototype.js中，prototype对象是实现面向对象的一个重要机制。 每个函数就是一个对象（Function），函数对象都有一个子对象 ...

    Java Web开发实例大全

    《Java Web开发实例大全（提高卷）》既适合Java Web程序员参考和查阅，也适合Java Web初学者，如高校学生、软件开发培训学员及相关求职人员学习、练习、速查使用。 目录 第1篇 流行组件应用篇 第1章 操作XML文件 第...

    Prototype_1.6 JavaScript代码和中文帮助手册

    　prototype.js不仅是一个有很大实用价值的js库，而且有很高的学习价值。 　－－－ 　在prototype.js中，prototype对象是实现面向对象的一个重要机制。 　每个函数就是一个对象（Function），函数对象都有一个子...

    JQuery学习总结及实例中文WORD版

    资源名称：JQuery 学习总结及实例 中文WORD版内容简介：普通Javaｓｃｒｉｐｔ的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对Javaｓｃｒｉｐｔ 的封装库，...

    JQERUY学习实例教程

    Jquery是继prototype之后又一个优秀的Javascrīpt框架。对prototype我使用不多，简单了解过。但使用上jquery之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而...

    JavaScript中的prototype原型学习指南

    原型是什么 Function 类型有一个属性 prototype，直接翻译过来就是原型。这个属性就是一个指针，指向一个对象，这个...先创建了一个 Function 类型的实例 person，然后 person 的方法 prototype 是一个对象，就声明指

    Java Web开发实例大全(基础卷) 完整pdf扫描版[179MB]

    《Java Web开发实例大全（提高卷）》既适合Java Web程序员参考和查阅，也适合Java Web初学者，如高校学生、软件开发培训学员及相关求职人员学习、练习、速查使用。 目录 第1篇 流行组件应用篇 第1章 操作XML文件 第...

    跟我学习javascript的prototype原型和原型链

    用过JavaScript的同学们肯定都对prototype如雷贯耳，但是这究竟是个什么东西却让初学者莫衷一是，只知道函数都会有一个prototype属性，可以为其添加函数供实例访问，其它的就不清楚了，最近看了一些 JavaScript高级...

    学习php设计模式 php实现原型模式(prototype)

    用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象 二、原型模式结构图 三、原型模式中主要角色 抽象原型(Prototype)角色：声明一个克隆自身的接口 具体原型(Concrete Prototype)角色：实现一个克隆...

    【JavaScript源代码】怎样用JavaScript实现原型模式.docx

    　prototype警告：学习了解原型模式前需先学习原型、原型链、prototype、__proto__、constructor等知识；　实现原型模式　ES5中的API：Object.create(prototype, optionalDescriptorObjects)　Object.create()方法...

    extjs中验证实例

    Ext.form.Field.prototype.msgTarget="under"; var fset = new Ext.FormPanel({ title:"学习表单字段元素的字段集", width:600, height:400, frame:true, renderTo:"myForm", items:[ {xtype:"fieldset", ...

    深入浅出设计模式(中文版)

    1.5模式的学习阶段 6 第2章负责任地设计对象——GRASP 9 2.1InformationExpert（信息专家） 11 2.2Creator（创造者） 13 2.3LowCoupling（低耦合） 14 2.4HighCohesion（高内聚） 15 2.5Controller（控制器） ...

    深入浅出设计模式(中文版电子版)

    1.5模式的学习阶段 6 第2章负责任地设计对象——GRASP 9 2.1InformationExpert（信息专家） 11 2.2Creator（创造者） 13 2.3LowCoupling（低耦合） 14 2.4HighCohesion（高内聚） 15 2.5Controller（控制器） ...

    Js利用prototype自定义数组方法示例

    经常在前端面试或是和其他同行沟通是，在谈到构造在JS定义构造函数的方法是最好使用原型的方式：将方法定义到构造方法的prototype上，这样的好处是，通过该构造函数生成的实例所拥有的方法都是指向一个函数的索引，...

    JS精确判断数据类型代码实例

    这篇文章主要介绍了JS精确判断数据类型代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 普通的判断方式有各种不足，typeof就不说了，判断模糊 ...

Magicbox
Global site tag (gtag.js) - Google Analytics