`
Virgo_S
  • 浏览: 1150875 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Prototype教程

    博客分类：
  • JS
prototypeAjax应用服务器JavaScriptXHTML 
阅读更多
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();' />“&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对象了:
程序代码 
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属性。
分享到：
| Lucene+Heritrix开发自己的搜索引擎
评论
发表评论

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

相关推荐

    prototype教程

    在提供的压缩包文件中，可能包含不同格式（如CHM或PDF）的prototype教程文档，这些文档将进一步详述上述知识点，并可能涵盖更高级的主题，如闭包、模块化、异步编程等，帮助开发者深入探索JavaScript的原型世界。

    Div+css布局教程，Prototype教程，js教程

    Prototype Codes TextBook.rar:Prototype实战教程(爆爽,推荐); 2.Prototype API: Prototype1.5.1_API_CN_A.CHM:Prototype1.5.1中文API,版本一(推荐); prototype1.5.1_API_CN_B.CHM:Prototype1.5.1中文API,版本二...

    prototype教程+ lib

    万一你没有使用过大名鼎鼎的 prototype.js，那么让我来告诉你，prototype.js 是由 Sam Stephenson 写的一个 javascript 类库。这个构思奇妙，而且兼容标准的类库，能帮助你轻松建立有高度互动的 Web 2.0 特性的富...

    AJAX教程EXT教程JQUERY教程DWR教程PROTOTYPE教程

    在这些教程中，你将学习到如何使用AJAX实现页面的异步更新，使用EXTJS构建富客户端应用，利用jQuery进行高效的DOM操作和Ajax交互，通过DWR实现Java和JavaScript之间的无缝通信，以及如何利用Prototype库增强...

    Prototype 中文chm教程 Prototype 中文电子图书 Prototype中文帮助文档下载

    本教程将深入探讨Prototype.js的核心概念、功能和应用，帮助开发者更好地理解和使用这个库。 一、Prototype.js简介 Prototype.js 的主要目标是提升JavaScript的开发效率，它引入了许多面向对象的特性，如类、继承和...

    serena prototype composer 2008实例教程

    《Serena Prototype Composer 2008实例教程》 Serena Prototype Composer 2008是一款强大的业务流程建模和原型设计工具，它允许用户快速创建直观、交互式的业务流程模型，以帮助组织理解、改进并优化其业务流程。这...

    prototype 中文教程PDF

    ### prototype.js 中文教程知识点概览 #### 一、简介 **prototype.js** 是由 Sam Stephenson 开发的一款 JavaScript 库。它通过一系列强大的功能帮助开发者轻松构建具有高交互性的 Web 2.0 应用程序。对于那些刚...

    Serena Prototype Composer简明教程

    ### Serena Prototype Composer简明教程知识点解析 #### 一、Serena Prototype Composer简介 **Serena Prototype Composer**是一款专为非技术背景用户设计的强大工具，它主要用于软件需求的可视化定义，涵盖了商业...

    Prototype_1.4.doc，Prototype_1.5.1.chm 中文版

    9. **.doc文档的用途**：.doc文件可能包含了更详细的教程和示例，适合初学者逐步学习Prototype库。 通过这些文档，开发者不仅可以掌握Prototype库的基本用法，还能深入了解其背后的原理，从而在实际项目中更加熟练...

    serena prototype composer 2008实例

    "Serena Prototype Composer 2008" 是一个专业级的软件原型设计工具，它帮助企业快速构建、测试和演示软件产品的原型，以便于在开发早期就能得到用户反馈，优化产品设计。这款工具提供了丰富的交互性元素和设计组件...

    Prototype-1.pdf

    - **在线教程**：网络上有很多关于Prototype的免费教程，适合初学者快速入门。 - **社区论坛**：参与Prototype社区的讨论，可以解决具体的技术问题。 - **培训课程**：Marty Hall提供的定制化Java EE培训课程，涵盖...

    prototype从入门到精通

    这个“prototype从入门到精通”的教程涵盖了从基础概念到高级特性的全面学习路径，旨在帮助开发者快速掌握并精通Prototype框架。 一、Prototype基础知识 1. **对象扩展**：Prototype的核心特性之一就是对...

    prototype 中文开发手册和chm帮助文档

    而PDF手册则可能更注重于教程性质，从基础知识到进阶应用，引导读者逐步掌握Prototype的用法。 总的来说，"Prototype中文开发手册"和"Prototype CHM帮助文档"是学习和掌握Prototype必不可少的资料。它们不仅涵盖了...

    PROTOTYPE 官方+个人整理的帮助文档

    描述中提到的信息表明，这份文档的主要来源是ruby-china.cn，这是一个知名的中文Ruby社区，也包含了许多关于JavaScript和Prototype的讨论和教程。作者从这个社区收集了大量资料，并结合自己的学习和实践经验，形成了...

    Prototype 1.6 中文版CHM

    开发者可以在开源社区找到相关的教程、问答和示例代码，例如GitHub、Stack Overflow和各种技术博客，以便更好地学习和解决问题。 综上所述，Prototype 1.6中文版CHM是一个非常宝贵的参考资料，对于学习和掌握...

    prototype 1.6.0.2.js+使用DEMO例子

    Prototype JavaScript 框架是早期Web开发中广泛使用的库，它为JavaScript添加了许多实用功能，提高了开发效率。1.6.0.2是Prototype的一个版本，这个版本在2008年发布，提供了许多增强和修复。在这个"prototype 1.6....

    prototype.js使用教程.zip

    prototype.js使用教程.zip

    prototype-1.4.0

    学习Prototype 1.4.0，除了阅读CHM文档，还可以参考在线教程、社区论坛和开源项目。随着技术发展，虽然Prototype的最新版本已更新至1.7.3，但1.4.0仍然是许多旧项目的基础，理解其工作原理对维护这些项目仍然至关...

    prototype1.7.zip

    同时，Prototype拥有活跃的开发者社区，提供丰富的插件和教程，使得开发者能够更好地利用这个框架。 总结，Prototype 1.7以其强大的功能和优秀的性能，成为了JavaScript开发者的得力工具。无论是DOM操作、AJAX交互...

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