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 ...
随机推荐
- UILabel和UIButton
一.UILabel 1.UILabel:标签,主要用来显示文字. 创建步骤: (1)开辟空间并初始化(如果本类有初始化方法,使用自己的,否则,使用负父类的). UILabel *textLabel ...
- 【Leetcode】【Medium】Palindrome Partitioning
Given a string s, partition s such that every substring of the partition is a palindrome. Return all ...
- 让ASP.NET Web API支持text/plain内容协商
ASP.NET Web API的内容协商(Content Negotiation)机制的理想情况是这样的:客户端在请求头的Accept字段中指定什么样的MIME类型,Web API服务端就返回对应的M ...
- 微软BI 之SSIS 系列 - MVP 们也不解的 Scrip Task 脚本任务中的一个 Bug
开篇介绍 前些天自己在整理 SSIS 2012 资料的时候发现了一个功能设计上的疑似Bug,在 Script Task 中是可以给只读列表中的变量赋值.我记得以前在 2008 的版本中为了弄明白这个配 ...
- 团队项目--站立会议 DAY4
小组名称:D&M 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱 项目进展: 1.张靖颜:筛选完元素后,把昨天优化完的再进行测试,进行进一步的检验.对于钟灵毓秀和赵莹同学编写的代码进行进一步审 ...
- 辐射4 中文武器命名方法, 不用winhex, 直接游戏内操作
参考资料:https://www.reddit.com/r/fo4/comments/3t354b/tip_you_can_add_text_formatting_italic_underline/h ...
- [BTS] RFC IDOC_INBOUND_ASYNCHRONOUS
Error Message: Log Name: ApplicationSource: BizTalk ServerDate: 9/10/2013 3:56: ...
- Spring AOP(配置文件方式)
spring配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="h ...
- PHP动态压缩js,css
PHP动态压缩js,css 列表项 标签: PHP 正式发布产品时,我们希望将项目里的js,css合并压缩,以减少http请求.防止轻易查看源代码. 使用 只需要在头部引入一下代码即可: <me ...
- Leetcode 166. Fraction to Recurring Decimal 弗洛伊德判环
分数转小数,要求输出循环小数 如2 3 输出0.(6) 弗洛伊德判环的原理是在一个圈里,如果一个人的速度是另一个人的两倍,那个人就能追上另一个人.代码中one就是速度1的人,而two就是速度为2的人. ...