学习笔记-ASP第一步-使用JavaScript框架丰富你的网站1 --
1. 什么是JavaScript 框架
通常在进行项目中的JavaScript程序开发，尤其是涉及到Ajax的程序开发时，我们会用到第三方提供的现成的代码框架。这样做的原因：
⑴ 现有框架对Ajax提供了更好的兼容性。
⑵ 现有框架实现了很多方便的函数功能。
⑶ 现有框架提供了更优化的用户体验的实现方式。
⑷ 利用现有框架可以快速开发。
⑸ 日后浏览器版本升级时直接升级相应框架即可。
2. 主流JavaScript框架介绍
比较优秀的框架：Prototype(+script.aculo.us)、jQuery、Yui、Dojo等。
2.1 Prototype 框架
单词prototype 原意为模型，它是一个JavaScript里的关键字。
官方网站：http://www.prototypejs.org
Prototype 提供了对现有JavaScript 对象的扩展方式，也提供了多个用于Ajax 等操作的对象。
script.aculo.us 是基于Prototype 的另一个框架，它可以和Prototype一起使用，从而为页面加入你需要的效果，实现页面元素的拖拽等功能。
两者相比，Prototype 更偏重于程序编写，而script.aculo.us 更偏重页面效果的实现。
2.2 jQuery 框架
相比Prototype那90KB的体积来说，jQuery只有20KB大小。在jQuery中，你可以使用Ajax，还可以实现许多精美的页面效果。
jQuery官网：http://jquery.com
2.3 Yui 框架
Yui 是由Yahoo!公司的技术人员涉及并制作的一套JavaScript框架，目前广泛的应用在Yahoo!的各个网站上。
与其他框架类似，为我们提供了相应的Ajax 和用户界面效果功能。
2.4 Dojo 框架
Dojo 框架相对于Prototype 和jQuery 来讲有些庞大。
Dojo一般用于企业化开发的网页前段的脚本处理和效果展示，并且Dojo 支持强大的widget 功能，你可以自己编写widget 来实现一些特殊组件。
Dojo 官网：http://dojotoolkit.org
3. 如何开始使用Prototype 框架
① 官网：http://www.prototypejs.org下载框架
② 解压后得到prototype.js 文件，将其放在网站目录下并在网页中引用此框架，则使用。
引入代码：<script scr="prototype.js" type="text/javascript"></script>
③ 测试引入成功代码：
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试prototype框架</title>
<script scr="prototype.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
alert(Prototype.Version);
</script>
</body>
</html>
若弹出版本窗则引入正常，否则报错。
4. 使用Prototype 框架简化JavaScript 编写
补充说明：什么是DOM？
DOM（Document Object Model 的缩写），意为“文档对象模型”。你可以将这个模型认为是一个树，上级节点包含下级节点，这个概念在XML中非常常用。与此相应的还有BOM（Browser Object Model）,即“浏览器对象模型”，它可以说是在浏览器中DOM的子集。
4.1 $() 函数 —— 获取一个DOM元素
a. $() 函数提供了对 document.getElementById()方法的缩写（$() 完全可以替代 document.getElementById()）。
b. $() 函数可以传入多个需要获得的元素名称，则该函数会返回一个包含这些元素的数组。
实例代码：
<body>
<div id="main">
this is main.
</div>
<div id="main1">
this is main1.
</div>
<div id="main2">
this is main2.
</div>
<script type="text/javascript">
var objs = $("main","main1","main2")
for (var i=0;i<objs.length;i++) {
alert(objs[i].id+":"+objs[i].innerText);
}
</script>
<body>
4.2 $F() 函数 —— 获得网页上表单元素的值
a. $F() 函数获得网页上摸个指定名称的表单元素的值（$F()函数相当于document.getElementById().value方法的缩写）。
4.3 document.getElementsByClassName() 方法 —— 获得指定CSS名称属性的对象集合
在JavaScript 的浏览器对象集合中，没有为我们提供通过对象的class 属性来获得对象集合的方法。Prototype 扩展了document 对象，可以通过document.getElementsByClassName() 方法来获得指定CSS 名称属性的对象集合。
实例代码：
<body>
<div id="main">
<div class="notify">选项更新成功</div>
<div class="notify">缓存更新成功</div>
</div>
<script type="text/javascript">
var objs=document.getElementsByClassName("notify");
for(var i=0;i<objs.length;i++) {
objs[i].innerText='通知：'+objs[i].innerText;
}
</script>
</body>
4.4 Element.hide/Element.show 方法 —— 隐藏/显示页面上的对象
a. Element.hide 方法用于隐藏页面上某个对面。
b. Element.show 方法用于显示页面是哪个某个对象。
c. CSS 的显示方式(display) 不显示(none)。
d. 实例代码：
<body>
<div id="main">
<form action="" onsubmit="return chkForm()" id="frm">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" value="" />
<span id="error" style="display:none;"> 请输入用户名！</span>
<br/>
<input type="submit" value="提交" />
</form>
</div>
<script type="text/javascript">
function chkForm() {
if($F("username")=="") {
Element.show('error');
return false;
}
}
</script>
</body>
4.5 Element.toggle 方法 —— 改变对象的显示/隐藏
a. Element.toggle 方法，可以改变对象的显示/隐藏：当某个对象显示时，隐藏它；当其隐藏时，显示它。
b. 实例代码：
<body>
<div id="main">
<form action="">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" value="" />
<span id="intro"> 用户名应当为5-12位的英文或者数字，并且不能喝数据库中已存在的重复！</span>
<br/>
<input type="button" value="显示/隐藏说明" onclick="toggle()" />
</form>
</div>
<script type="text/javascript">
function toggle() {
Element.toggle("intro");
}
</script>
</body>
5. 什么是Ajax
Ajax (全称：Asynchronous JavaScript and XML)，中文意思是：异步JavaScript 和XML 。
（我们使用Prototype，很大一部分原因因为它提供了对Ajax 的简便实现方法。）
------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
区别：
a. 同步时代，浏览器的处理过程和你的操作高度相关。例如在一个网站注册，提交表单如果不幸你的用户名已被占用，网站弹窗提示后，之前提交的表单信息已被清空。
b. 异步时代，浏览器通过一个名为“XMLHTTP” 的对象帮我们做了一些工作，当你填写完毕用户名时，JavaScript 命令XMLHTTP "偷偷"地给网站一个请求，来询问你所填写的用户名是否已经被占用，若被占用，它会在页面上给你提示，告诉你，现在别提交表单，这时由于你所看到的页面并没有进行任何的刷新、提交工作，因此你所填写的其他内容是不受影响的。
6. 使用Prototype 框架引入Ajax功能
（说明：即使不用Prototype,你仍然可以为你的网站加入Ajax特性，区别在于：不适用框架(包括其他框架)，你的Ajax 编写将变得非常麻烦，你需要考虑不同浏览器对Ajax 所使用XMLHTTP 对象的不同支持状况等。）
6.1 你的第一个Ajax 程序 —— 使用Ajax.Request 类
Ajax.Request 构建一个Ajax请求（可以说是在Prototype 中Ajax 相关类中最常用的一个）。方法如下：
var myAjax = new Ajax.Request (
url, { // 目标地址
method: 'get', // 请求方法
parameters: pars, // 参数
onComplete: showResponse // 回调函数
} // 大括号内设定Ajax对象的属性
);
在上面的代码中，我们创建了一个Ajax.Request 对象，并保存在变量myAjax 中。
在创建Ajax.Request 对象时，你可以传入若干参数（包含在小括号内的内容）。
a. 第一个参数url ：请求的目标地址。
b. 第二个参数：我们新建的Ajax.Request 对象的属性，它控制了在进行HTTP 请求时的选项。（稍后详解）
① method : 设定了HTTP 请求的请求方法，这里我们设定为"get"方法。
② parameters : 设定了请求时需要附加的参数。
③ onComplete : 设定了当HTTP 请求完毕后，执行哪个函数（同时可以接收传入的XMLHTTP变量，来获得请求的响应内容）。
实例代码：
<%
Option Explicit
Dim sUserName
sUserName = Trim(Request.QueryString("name"))
Response.Write("Hello,"+sUserName)
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>Prototype</title>
<script src="js/prototype.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<form action="">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" value="" /><br />
<input type="button" value="执行 Ajax 请求" onclick="doAjax()" />
</form>
</div>
<script type="text/javascript">
function doAjax() {
var username = $F('username'); // 获得用户名
var url = 'helloworld.asp' // 定义目标地址
var pars = 'name='+username; // 定义参数
var myAjax = new Ajax.Request ( // 开始请求
url, { // 设定目标地址
method:'get', // 设定请求方法
parameters:pars, // 设定参数
onComplete:showResponse // 设定回调函数
}
);
}
//回调函数
function showResponse(originalRequest) { // 接收参数 originalRequest(即刚才的请求对象)
var text = originalRequest.responseText; // 获得返回的文本
alert(text); // 弹出对话框
}
</script>
</body>
</html>
实际上，这不能严格的称为 Aja"x"，因为我们实际上没有用到任何XML数据，只是使用XMLHTTP 对象完成请求。不过大多数情况下我们也将这种数据请求方式称为Ajax 。
6.2 Ajax 对象的属性详解
创建Ajax.request 类时，我们传入的第二个参数结构：
{
method: 'get', // 设定请求方法
parameters: pars, // 设定参数
onComplete: showResponse // 设定回调函数
}
在这个结构中我们设定了Ajax对象的各个属性。
首先，这个参数的所有内容必须包含在两个大括号内，并且是以“名称：值”的方式出现，各个属性参数之间用逗号分割（实际上创建了一个JavaScript 对象）。
Prototype 会解析这个对象，并设定Ajax 类的相应属性，在Prototype 的Ajax 类中，有很多属性，这些属性可以应用到刚才的Ajax.request 类，也可以应用在即将讲解的Ajax.Updater中。
| 属性名 | 含义 |
| method | HTTP请求的请求方式。 |
| parameters | 附加的参数（即在GET方式请求中附加在地址中的名称=值这昂的参数对）。 |
| asynchronous | 是否为异步请求，如果为同步请求，将在请求完毕后才继续执行。 |
| postBody | 在POST 的请求方式下，传入的请求。 |
| requestHeaders | 请求时传入的HTTP 头。 |
| onXX(事件名) |
在XMLHTTP 对象进行请求时，其状态时间可能有onUninitialized、 onLoading、onLoaded、onInteractive 和onComplete 5个， 这个属性设定当发生这5种时间时触发的函数 |
6.3 Ajax.Updater 类 —— 一个输入学号获得姓名的例子
Ajax.Updater 类是Ajax.Request 类派生出来用于解决某类特定问题的一个类。（我们需要使用Ajax从后台页面读取某段信息，并显示在网页的某个元素，这时可用Ajax.Updater 类来完成处理。）
实例代码：
① student.asp
<%
Option Explicit
Dim sNumber
Dim sName
sNumber = trim(Request.QueryString("number"))
sName = "hello world!"
response.Write "Stuent NO.:" & Number & ",Name:" & sName
%>
② cs.asp
<body>
<form action="">
<div id="main">
<label for="number">学号:</label>
<input type="text" id="number" name="number" value="" /><br />
<input type="button" value="执行 Ajax.Updater 请求" onclick="doAjax()" />
</div>
</form>
<script type="text/javascript">
function doAjax() {
var number = $F('number');
var continer = "studentinfo";
var url = 'student.asp';
var pars = 'number' + number; // &拼接变量
var myAjax = new Ajax.Updater (
continer, // 返回内容更新到哪里
url, { //目标地址
method:'get', //请求方法
parameters:pars //参数（传值）
}
);
}
</script>
</body>
7. 使用script.aculo.us 效果库 —— 增强用户体验
Prototype 是一个基础的框架，其特色在于提供了JavaScript脚本和Ajax的扩展，使得我们的编程更加简单和强壮，而并未实现页面效果和高级的Ajax控件功能，而实际应用中，我们需要一些页面效果来增强用户体验，例如高亮效果等。名为: scriptaculo.us 的框架很好的弥补了Prototype 的不足。
7.1 script.aculo.us 是什么
a. 为网站加入高亮、黄褪等几十种页面效果。
b. 快速实现Ajax 控件，例如自动完成、即时编译等。
c. 实现页面元素的拖动效果。
d. 实现滑块功能。
e. script.aculo.us 的官网 http://script.aculo.us 获得 script.aculo.us 框架的最新版。
7.2 如何开始使用 script.aculo.us 效果库
a. 和Prototype 类似，解压后是若干个js 文件。
b. 在使用script.aculo.us 效果库之前，你需要在HTML 中引入它：
<head>
<title>Prototype</title>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
alert(Scriptaculous.Version);
</script>
</body>
d. 注意说明：
① 下载回来的script.aculo.us 效果库包含了若干个文件，如builder.js、effect.js 等，你需要将其全部放在一个目录中，并引入。默认情况下，你可
以仅引入scriptaculous.js 文件，即可实现对效果库包含的所有文件的引入。
你也可以根据实际需求引入某个效果库,如：<script scr="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
② 请确保在引入scriptaculous.js 文件之前，你已经引用了Prototype 框架的文件 prototype.js 文件，它们可以不再同一个目录中，但是你必须确
保引入是成功的。
7.3 script.aculo.us 的页面效果及其运用
a. script.aculo.us 可以通过Effect 类来实现各种页面效果，它包含了基础特效和组合特效。
基本特效：
① Opacity (透明度)
② Scale （尺寸）
③ MoveBy （位置移动）
④ Highlight （高亮）
⑤ Parallel （并行特效）
组合特效：
① Appear （渐变显示）
② Fade （渐变隐藏）
③ Puff （放大透明到消失）
④ DropOut （向下移动到透明，直至消失）
⑤ Shake （左右晃动）
⑥ SwitchOff （模仿电视关机效果）
⑦ BlindDown/BlindUp （从上到下 / 从下到上的方式显示页面元素）
⑧ SlideDown/slideUp ）（以百叶窗方式从上到下/从下到上的方式显示页面元素）
⑨ Pulsate （重复"页面元素逐渐隐藏，而后逐渐显示"的过程）
⑩ Squish (将页面元素缩小到左上角，高宽同比例缩小)
⑪ Fold （将页面元素缩小到左上角，先缩小高再缩小宽）
⑫ Grow （将页面元素的高宽从一个点逐渐放大显示）
⑬ Shrink （同Grow 相反）
b. 实例代码：
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试2</title>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<div id="hello">Hello World!</div>
<script type="text/javascript">
new Effect.Highlight (
'hello', {
duration:1.0,
startcolor:"#FFFF33",
endcolor:"#FFFFFF"
}
);
</script>
</body>
</html>
7.4 script.aculo.us 的页面控制组件及其运用
a. Autocompleter (自动完成)
b. InPlaceEditor （即时编辑）
c. 代码实例
① hle_edit.asp
<%
Option Explicit
Dim rtn
rtn = Request.QueryString("value") // value 是InPlaceEditor 在发送数据时默认采用的参数名。
Response.Write rtn // 我们简化操作，不将修改保存到数据库，而是将其直接输出
%>
② cs.asp
<body>
<div id="hello">Hello World!</div>
<script type="text/javascript">
newAjax.InPlaceEditor (
"hello",
"hld_edit.asp", {
okText:'提交'
ajaxOptions: {method:'get'}
}
);
</script>
</body>
d. 新建Ajax.InPlaceEditor 对象，在建立这个对象时有三个参数：
① 标识要应用 InPlaceEditor 控件的对象名称。
② 服务器端的处理文件，script.aculo.us 会将编辑后的值发送到这个文件进行处理。
③ 一个属性对象的集合，我们设定了okText属性的值为“提交”。另一个属性ajaxOptions为在进行Ajax请求时的属性对象集合，这个集合同使用Ajax.Request 时是一样的。
④ 除此之外，InplaceEditor 还有很多属性，常用的如下表：
| 属性名 | 含义 |
| okButton | 在编辑模式时是否显示“确认”按钮，默认为true。 |
| okText | 编辑模式下“确认”按钮上的文字 |
| cancelText | 编辑模式下“取消”连接的文字。 |
| savingText | 在保存时显示的文字。 |
| rows | 编辑输入框的行数，默认1，若大于1，则编辑输入框会被显示为多行文本框。 |
| callback | 设定回调函数。 |
浙公网安备 33010602011771号