Virgo_S

2008-04-23

Prototype教程

Prototype实战教程----1.$$

<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

<!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

<!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

<!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

<!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.$

<!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

<!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.顶层对象

<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

<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

<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

<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

<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

<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

<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

<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

<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();' />“<html>2002<head>2005<body>” ---> '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对象了:

程序代码

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

这样的改变有什么益处呢？我觉得一来是更面向对象了，二来就是便于将来IDE里的代码提示。

2.1. 使用 $()方法
$() 方法是在DOM中使用过于频繁的 document.getElementById() 方法的一个便利的简写，就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。

比起DOM中的方法，这个更胜一筹。你可以传入多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。下面的例子会向你描述这些。

程序代码

<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或者元素自己。

程序代码

<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()方法我们可以得到正常工作的那个方法的返回值。

程序代码

<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 响应。

程序代码

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

程序代码

<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填充就可以了，例子比我写说明的更清楚。

程序代码

<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 方法。

程序代码

<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属性。

12:58
浏览 (395)
评论 (0)
分类: JS
相关推荐

Virgo_S

Prototype教程

评论

发表评论

搜索本博客

博客分类

其他分类

最近加入圈子

存档

最新评论

评论排行榜