二、prototype库具体解释
1、prototype库的使用
//导入下载好的prototype.js文件
//在自己的js中直接使用Prototype对象
document.writeln(“Prototype库的版本号是：”+Prototype.Version+”
“);
document.writeln(“我的库的版本号是：”+zpc.version+”
“+”我的年龄：”+zpc.age+”
“);
document.writeln(“client是否为Chrome：”+Prototype.Browser.WebKit+”
“);
alert(Prototype.K(“測试字符串”));
2、使用$()函数和$$()函数訪问文档中的HTML元素
$(String tagName)函数：直接获得id为tagName的HTML元素
$(String tagName1,String tagName2):获得id为tagName1、tagName2的HTML元素数组
$$()的參数是一个或多个合法的CSS选择器
3、$A()函数用于将一个參数转换成数组，假设传入的參数不是一个集合，而是一个普通变量，$A()函数将返回一个空数组。而不是仅仅有一个元素的数组。
$F()函数用于获取表单控件的值，比方input、textArea、select等元素。
$()函数是获取HTML元素本身，而$F()函数用于获取表单控件的值，而不是表单域本身。
能够这样说：$()函数返回的是一个HTML元素对象。而$F()函数返回的仅仅是一个字符串值。
使用这两个函数时都应该让HTML元素的id属性和name属性保持一致(保证IE)
4、$H()函数：将js对象转换成Hash对象。Hash类是Prototype库提供的一个类，类似于Java语言里的Map数据结构
5、使用Try.these()函数同意传入一些列的函数作为參数，它将依次调用传入的一系列函数，找到第一个能成功返回值的函数。并将该函数的返回值作为Try.these()函数的返回值。
假设这一系列函数都没有返回值，Try.these()将会返回undefined
Try.these()的參数仅仅能是函数引用
6、Prototype的json支持为Date、Object、Array、Hash、Number类添加了toJSON()方法，用于将这些对象转换成一个JSON格式的字符串
此外，Prototype还为String类添加了例如以下三个与JSON相关的方法：
isJSON():该方法推断指定字符串是否为合法的JSON字符串
evalJSON([sanitize=false]):将指定的字符串转换成json对象
toJSON()：用于将字符串转换成JSON字符串
例程：
7、使用Element对象：该类提供了一些方法简化HTML元素的操作
8、使用ObjectRange对象：一个ObjectRange对象代表一个范围
例程：
9、使用Form.Element操作表单控件
Form.Element专门用于操作表单控件。使用它能够激活表单控件。能够推断某个表单控件是否为空。能够清空系列表单控件
10、使用Form操作表单。注意：Form.Element是操作指定表单控件，而Form是操作指定表单(或者表单内的所有控件)
11、使用Hash对象
Hash对象是一种类似于Java中Map的数据结构。它是一个Key-Value对的集合。
Hash对象的每一个Item是包括两个元素的数组，前一个是Key后一个是Value
借助$H函数能够将一个普通的对象转换为Hash对象。再借助Hash对象的方法能够方便的訪问该对象的所有属性和属性值
12、使用Event来简化事件编程
| table的Inner |
13、使用Template
有时我们要生成多个字串。这些字串中有大量反复内容，仅仅有少量关键部分发生变化。这时就能够借助Template对象了
例程：
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]));
}
14、使用Class的create()方法创建对象能够提供一些面向对象的支持
15、两个常常使用的监听表单控件及表单的监听器
Form.Observer(form,interval,callback):假设表单form内不论什么表单控件的值发生改变，interval秒后自己主动触发callback函数。
该表单既能够是表单的id属性，也能够是表单本身。
Form.Element.Observer(element,interval,callback):假设表单控件element的值发生改变，interval秒后自己主动触发callback函数。
该element既能够是表单控件的id属性，也能够是表单控件本身。
例程：
//仅仅要不论什么表单控件的值被改变就触发
username：
密 码：
new Form.Observer("test",1,function(){
alert(this.getValue());
});
//username输入框值改变触发
username：
密 码：
new Form.Element.Observer("user",1,function(){
alert(this.getValue());
});
16、Prototype库不仅提供了一系列的自己定义的类和对象，还扩展了某些JS中原有的类和对象。
例程：扩展的document
//a:b是开发人员自己定义的”人工合成”事件。
单击页面中的”单击我”按钮时，程序使用document.fire()方法触发a:b事件
//使用document、Element的observe()方法为”人工合成”事件绑定监听器时，该事件的事件名称格式必须为xx:xx
17、Prototype对Ajax的支持
(1)使用Ajax.Request类
例程：输入提示效果
html页面代码：
请输入您喜欢的水果
输入apple、banana、peach能够看到明显效果
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);
//JSP页面嵌入的Java代码
(2)使用Form.request()方法
该方法会将该表单控件转换为请求參数，默认向该表单action指定的URL发送异步请求
例程：验证用户是否合法
html页面代码：
请输入username与password登录
用户名：
密 码：
function login() {
//直接使用Form的request方法发送异步请求，request方法的參数是个json数组的格式！
$("login").request( {
//指定回调函数
onComplete : function(request) {
$("d").innerHTML = request.responseText;
}
});
}
jsp页面嵌入的Java代码
");
}
%>
(2)使用Ajax.Responders对象
这个对象用于注冊Ajax事件监听器，该对象注冊的Ajax事件监听器无论是哪个XMLHttpRequest在发生交互。都能被自己主动触发。因而Ajax.Responders注冊的事件监听器是全局有效的，能够用于监控整个Ajax的交互过程。
//添加了loading图片的fruit.html
请输入您喜欢的水果
输入apple、banana、peach能够看到明显效果
![]()
(3)使用Ajax.Updater类
这个类是Ajax.Updater类的简化，使用该类无需使用回调函数，该类能够自己主动将server响应显示在某个容器中。
当server响应完毕时，clienthtml页面无需使用回调函数解析server响应(当然也能够手动加入回调函数)，从而进一步简化Ajax交互编程。
(4)使用Ajax.PeriodicalUpdater类
它是一个周期性的Ajax.Updater类，周期性地向server发送请求(当然也能够手动指定定时器对象)，并将server响应在clientHTML页面的某个元素中显示出来。
Original: https://www.cnblogs.com/lcchuguo/p/5412236.html
Author: lcchuguo
Title: Ajax学习笔记(二)
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/545580/
转载文章受原作者版权保护。转载请注明原作者出处！