例程：
<body> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> objArr = [ { book : 'Hadoop教程', author : "zpc" }, { book : 'Java教程', author : '钱刚' }, { book : '天龙八部', author : "金庸" } ]; var template=new Template("书名是#{book},作者是#{author}."); for(var i=0;i<objArr.length;i++){ document.writeln(template.evaluate(objArr[i])); } </script> </body>14、使用Class的create()方法创建对象可以提供一些面向对象的支持
15、两个经常使用的监听表单控件及表单的监听器
Form.Observer(form,interval,callback):如果表单form内任何表单控件的值发生改变，interval秒后自动触发callback函数。该表单既可以是表单的id属性，也可以是表单本身。
Form.Element.Observer(element,interval,callback):如果表单控件element的值发生改变，interval秒后自动触发callback函数。该element既可以是表单控件的id属性，也可以是表单控件本身。
例程：
//只要任何表单控件的值被改变就触发 <body> <form action="#" method="post" id="test"> 用户名：<input type="text" id="user" name="user"/> 密 码：<input type="text" id="pass" name="pass"/> </form> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> new Form.Observer("test",1,function(){ alert(this.getValue()); }); </script> </body> //用户名输入框值改变触发 <body> <form action="#" method="post" id="test"> 用户名：<input type="text" id="user" name="user"/> 密 码：<input type="text" id="pass" name="pass"/> </form> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> new Form.Element.Observer("user",1,function(){ alert(this.getValue()); }); </script> </body>16、Prototype库不仅提供了一系列的自定义的类和对象，还扩展了某些JS中原有的类和对象。
例程：扩展的document
<body> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> //为document的loaded事件绑定监听器 document.observe("dom:loaded",function(event){ $("show").innerHTML+=("页面装载完成<br/>"); }); //为document的a:b事件绑定事件监听器 document.observe("a:b",function(event){ $("show").innerHTML+=("myEvent被触发了<br/>"); $("show").innerHTML+=("event.memo.book的属性值："+event.memo.book); }); </script> <input type="button" value="单击我"/> <div id="show"></div> </body>//a:b是开发者自定义的“人工合成”事件。单击页面中的“单击我”按钮时，程序使用document.fire()方法触发a:b事件
//使用document、Element的observe()方法为“人工合成”事件绑定监听器时，该事件的事件名称格式必须为xx:xx
17、Prototype对Ajax的支持
(1)使用Ajax.Request类
例程：输入提示效果
html页面代码：
<body> <h3>请输入您喜欢的水果</h3> <div style="width:280px;font-size:9pt">输入apple、banana、peach可以看到明显效果</div><br/> <input id="favorite" name="favorite" tyep="text" onblur="$('tips').hide();"/> <div id="tips" style="width:160px;border:1px solid menu;background-color: #ffffcc;display: none;"></div> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> function searchFruit(){ var url="/Ajax/fruit.jsp"; //将favorite表单域的值转化为请求参数，形如favorite=app&color=red.... var params=Form.Element.serialize('favorite'); //alert(params); //创建Ajax.Request对象,对应于发送请求 var myAjax=new Ajax.Request( url, { method:'post', parameters:params, onComplete:showResponse, asynchronous:true }); } //定义回调函数 function showResponse(request){ //alert("回调函数被触发！"); //在tip中显示服务器的响应 $('tips').innerHTML=request.responseText; //显示tip对象 $('tips').show(); } new Form.Element.Observer("favorite",1,searchFruit); </script> </body>//JSP页面嵌入的Java代码<% String hdchar=request.getParameter("favorite"); System.out.println(hdchar); if("apple".startsWith(hdchar)){ out.println("apple"); }else if("banana".startsWith(hdchar)){ out.println("banana"); }else if("peach".startsWith(hdchar)){ out.println("peach"); }else { out.println("other"); }%>(2)使用Form.request()方法
该方法会将该表单控件转换为请求参数，默认向该表单action指定的URL发送异步请求
例程：验证用户是否合法
相关文章
精彩导读
热门资讯
关注我们
