Ajax学习笔记(二)

二、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("client是否为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,interval,callback):假设表单控件element的值发生改变，interval秒后自己主动触发callback函数。

该element既能够是表单控件的id属性，也能够是表单控件本身。

例程：

	//仅仅要不论什么表单控件的值被改变就触发

	<body>

		<form action="#" method="post" id="test">

		username：<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>

	//username输入框值改变触发

	<body>

		<form action="#" method="post" id="test">

		username：<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="单击我" 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",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发送异步请求

例程：验证用户是否合法

html页面代码：

<body>

		<h3>

			请输入username与password登录

		</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", 1, searchFruit);

</script>

</body>

(3)使用Ajax.Updater类

这个类是Ajax.Updater类的简化，使用该类无需使用回调函数，该类能够自己主动将server响应显示在某个容器中。

当server响应完毕时，clienthtml页面无需使用回调函数解析server响应(当然也能够手动加入回调函数)，从而进一步简化Ajax交互编程。

(4)使用Ajax.PeriodicalUpdater类

它是一个周期性的Ajax.Updater类，周期性地向server发送请求(当然也能够手动指定定时器对象)，并将server响应在clientHTML页面的某个元素中显示出来。

Ajax学习笔记(二)的更多相关文章

AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
[Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
Java IO学习笔记二
Java IO学习笔记二流的概念在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...
《SQL必知必会》学习笔记二)
<SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...
NumPy学习笔记二
NumPy学习笔记二 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.<数学分 ...
Learning ROS for Robotics Programming Second Edition学习笔记(二) indigo tools
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

随机推荐

【整理】--VC 编译整理
.h用于编译阶段的审核,如在math.h中有函数声明:int abs(int);但是在使用中写为#include <math.h>...abs(3,5);编译器阶段就会检测出错误. .dl ...
Fiddler：在PC和移动设备上抓取HTTPS数据包
Fiddler是一个免费的Web调试代理,支持任何浏览器.系统以及平台.这个工具是进行Web和App网络开发的必备工具,戳此处下载. 根据Fiddler官网的描述,具有以下六大特点: Web调试性能 ...
作业六—图书管理系统(SPEC)系统性能评估测试
一.图书管理系统的典型用户和场景: 该系统是为各类学校图书馆和社会各大图书馆和书店管理者使用的图书管理系统.但是我们还是已北京工业大学耿丹学院图书馆为典型用户进行主要设计的! 二.SPEC测试的目标: ...
在Android中调用C#写的WebService(附源代码)
由于项目中要使用Android调用C#写的WebService,于是便有了这篇文章.在学习的过程中,发现在C#中直接调用WebService方便得多,直接添加一个引用,便可以直接使用将WebServi ...
字符串匹配算法之BF(Brute-Force)算法
BF(Brute-Force)算法蛮力搜索,比较简单的一种字符串匹配算法,在处理简单的数据时候就可以用这种算法,完全匹配,就是速度慢啊. 基本思想从目标串s 的第一个字符起和模式串t的第一个字符进 ...
说不尽的MVVM(1) – Why MVVM
最近学的一篇课文<说不尽的狗>竟让我有了写<说不尽的MVVM>这一想法,事非亵渎,实出无奈.我在刚学WPF不久时听说有MVVM这种东西,做了下尝试,发现他能给程序的设计带来很大 ...
IMP-00038:无法转换为环境字符集句柄
参考解决方案:http://www.cnblogs.com/wangsaiming/p/4947151.html
duilib进阶教程 -- 总结 (17)
整个教程的代码下载:http://download.csdn.net/detail/qq316293804/6502207 (由于duilib进阶教程主要介绍界面,所以这个教程只给出界面相关的代码,完 ...
Atitit.人力资源管理原理与概论
Atitit.人力资源管理原理与概论 1. 人力资源管理第一章人力资源管理概述第二章人力资源理论基础与发展演变第三章人力资源规划第四章工作分析与工作设计第五章员工招聘与录用第六章 ...
paip. uapi 过滤器的java php python 实现aop filter
paip. uapi 过滤器的java php python 实现aop filter filter 是面向切面编程AOP.. 作者Attilax 艾龙, EMAIL:1466519819@qq. ...

Ajax学习笔记(二)

Ajax学习笔记(二)的更多相关文章

随机推荐

热门专题