Ajax学习笔记(二)

发布时间：2020-12-15 21:51:24 所属栏目：百科来源：网络整理

导读：二、prototype库详解 1、prototype库的使用 //导入下载好的prototype.js文件 script type="text/javascript" src="prototype.js"/script //在自己的js中直接使用Prototype对象 script type="text/javascript" document.writeln("Prototype库的版本是："+Prot

二、prototype库详解

1、prototype库的使用
//导入下载好的prototype.js文件
<script type="text/javascript" src="prototype.js"></script>
//在自己的js中直接使用Prototype对象
<script type="text/javascript">
document.writeln("Prototype库的版本是："+Prototype.Version+"<br/>");
document.writeln("我的库的版本是："+zpc.version+"<br/>"+"我的年龄："+zpc.age+"<br/>");
document.writeln("客户端是否为Chrome："+Prototype.Browser.WebKit+"<br/>");
alert(Prototype.K("测试字符串"));
</script>
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字符串

  例程：
<body>
  <script type="text/javascript">
  	var date=new Date();
  	document.writeln("日期是："+date.toLocaleString()+"<br/>");
  	document.writeln("日期对应的JSON字符串为："+date.toJSON()+"<br/>");
  	var p={
  		name:"zpc",age:25
  	};
  	//将对象转换成JSON字符串
  	document.writeln("普通对象的JSON字符串为："+Object.toJSON(p)+"<br/>");
  	var books=["周鹏程","鸟鹏"];
  	//document.writeln("数组的JSON字符串为："+books.toJSON()+"<br/>");
  	var hash=$H({name:'周鹏程',age:34});
  	document.writeln("Hash对象的JSON字符串为："+hash.toJSON()+"<br/>");
  	//document.writeln("数值的JSON字符串为："+(45).toJSON()+"<br/>");
  	var str='{"name":"zpc","gender":"male"}';
  	//将一个json格式的字符串转换成JSON对象
  	var zpc=str.evalJSON();
  	document.writeln("zpc对象的名字："+zpc.name+"<br/>");
  	document.writeln("zpc对象的性别："+zpc.gender+"<br/>");
  </script>
  </body>

7、使用Element对象：该类提供了一些方法简化HTML元素的操作
8、使用ObjectRange对象：一个ObjectRange对象代表一个范围

   例程：
  <body>
<script type="text/javascript" src="prototype-1.6.0.3.js"></script>	
  <script type="text/javascript">
  	//直接用new创建一个ObjectRange对象
	var range=new ObjectRange(2,9,true);//true表示不包含9
	range.each(function(ele,index){
		document.writeln("索引"+index+"处的值："+ele+"<br/>")
	});
	//使用$R()函数创建一个ObjectRange对象
	var ra=$R('a','g');
	document.writeln($A(ra));
	alert(ra.include('b'));
  </script>
  </body>

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来简化事件编程

<body>
   <table border="1">
   <tr><td><div><input id="ok" type="button" value="click me"/></div>table的Inner</td></tr>  
   </table>
   <div id="d">e</div>
   <script type="text/javascript" src="prototype.js"></script>	
   <script type="text/javascript">
	Event.observe("ok","click",function(event){
		document.writeln("是否为左击事件："+event.isLeftClick());
		document.writeln("事件源："+event.element().value);
		document.writeln("最近的td元素："+event.findElement("td").innerHTML);		
	});
	$("d").innerHTML="<h2>哈哈<h2>";
   </script>
  </body>
//上面的代码不在使用原始的事件模型，而是使用基于Event提供的事件简化，这种简化消除了事件模型的浏览器差异。

13、使用Template
有时我们要生成多个字串，这些字串中有大量重复内容，只有少量关键部分发生变化，这时就可以借助Template对象了
例程：

<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,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",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="单击我" onclick='document.fire("a:b",{book:"Hadoop权威指南"});'/>
		<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",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发送异步请求
例程：验证用户是否合法
html页面代码：

<body>
		<h3>
			请输入用户名和密码登录
		</h3>
		<form id="login" action="/Ajax/login.jsp" method="post">
			用户名：
			<input type="text" name="user" />
			<br />
			密　码：
			<input type="password" name="pass">
			<br />
			<input type="button" value="验证用户" onclick="login();"/>
			<br />
			<div id="d"></div>
		</form>
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript">
	function login() {
		//直接使用Form的request方法发送异步请求，request方法的参数是个json数组的格式！
		$("login").request( {
			//指定回调函数
				onComplete : function(request) {
					$("d").innerHTML = request.responseText;
				}
			});
	}
</script>
</body>

jsp页面嵌入的Java代码
<%
String user=request.getParameter("user");
String pass=request.getParameter("pass");
if(user.equals("zpc")&&pass.equals("123456")){
out.println("验证通过！");
}else{
out.println("没有通过验证！");
}
 %>

(2)使用Ajax.Responders对象

这个对象用于注册Ajax事件监听器，该对象注册的Ajax事件监听器不管是哪个XMLHttpRequest在发生交互，都能被自动触发。因而Ajax.Responders注册的事件监听器是全局有效的，可以用于监控整个Ajax的交互过程。

//增加了loading图片的fruit.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();" />
		<img alt="loading" id="loading" src="/Ajax/images/loading.gif"
			style="display: none; width: 20px; height: 20px">
		<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();
	}


	//定义Ajax的全局事件处理器对象
	var myGlobalHandlers = {
		//刚刚开始Ajax交互时触发该属性指定的函数
		onCreate:function() {
			$("loading").show();
		},//交互完成时触发该属性的指定函数
		onComplete:function() {
			if (Ajax.activeRequestCount == 0) {
				$('loading').hide();
			}
		},//交互失败时触发该属性指定的函数
		onFailure:function() {
			alert("对不起，页面加载出错！");
		}
	};
	//为Ajax事件绑定全局的事件处理器
	Ajax.Responders.register(myGlobalHandlers);
	new Form.Element.Observer("favorite",searchFruit);
</script>
</body>

(3)使用Ajax.Updater类这个类是Ajax.Updater类的简化，使用该类无需使用回调函数，该类可以自动将服务器响应显示在某个容器中。当服务器响应完成时，客户端html页面无需使用回调函数解析服务器响应(当然也可以手动添加回调函数)，从而进一步简化Ajax交互编程。 (4)使用Ajax.PeriodicalUpdater类它是一个周期性的Ajax.Updater类，周期性地向服务器发送请求(当然也可以手动指定定时器对象)，并将服务器响应在客户端HTML页面的某个元素中显示出来。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!