转Prototype对Ajax的支持-shiren1118-ChinaUnix博客

shiren1118

首页　| 　博文目录　| 　关于我

shiren1118

博客访问： 8582
博文数量： 3
博客积分： 130
博客等级：入伍新兵
技术积分： 40
用户组：普通用户
注册时间： 2008-04-11 08:06

文章分类

全部博文（3）

未分配的博文（3）

文章存档

2008年（3）

我的朋友

2.3 Prototype对Ajax的支持

作为一个Ajax开发框架，Prototype对 Ajax开发提供了有力的支持。在Prototype中，与Ajax相关的类和对象包括：Ajax、Ajax.Responsders、 Ajax.Base、Ajax.Request、Ajax. PeriodicalUpdater和Ajax.Updater，图2-3所示为这些类和对象之间的关系及其常用属性和方法，下面分别对这些类和对象进行介绍。

图2-3 Prototype中Ajax相关类和对象关系示意图

2.3.1 Ajax对象

Ajax对象为其他的Ajax功能类提供了最基本的支持，它的实现如2.2.7节中例2-10所示，其中包括一个方法getTransport和一个属性activeRequestCount。 getTransport方法返回一个XMLHttpRequest对象，activeRequestCount属性代表正在处理中的Ajax请求的个数。

2.3.2 Ajax.Base类

Ajax.Base类是Ajax.Request类和Ajax.PeriodicalUpdater类的基类。它提供了3个方法：

l setOptions：设置Ajax操作所使用的选项。

l responseIsSuccess：判断Ajax操作是否成功。

l responseIsFailure：判断Ajax操作是否失败（与responseIsSuccess相反）。

Ajax.Base类的主要作用是提取出一些公用的方法，其他类通过继承的方式使用这些方法，实现代码复用。

2.3.3 Ajax.Request类

这是Prototype中最经常使用的一个Ajax 相关类。Ajax.Request类的方法通常是内部使用的，因此这里就不一一列举，有兴趣的读者可以参考Prototype的源代码。这里重点讲讲如何使用Ajax.Request类，首先给出一个最简单的Ajax.Request类的应用示例，如例2-11所示，注意示例中的黑体字。

例2-11 Ajax.Request类应用示例

Ajax.Request测试页面：

"">

chapter 3

data.html：

Ajax.Request对象在初始化时需要提供两个参数：第1个参数是将要请求页面的URL，这里使用的data.html是一个普通的HTML静态页面；第2个参数是Ajax操作的选项，在 Prototype中并没有专门为Ajax操作选项定义一个类，通常都是像例2-11这样，通过匿名对象的方式设置Ajax操作的参数。在例2-11中， Ajax操作选项具有两个属性：method表示HTTP请求方式，默认是POST方式；onComplete指定了Ajax操作完成以后（即 XMLHttpRequest对象的status属性为4时），页面将要执行的函数。当然，Ajax操作还包括很多其他选项，如表2-1所示。

表2-1 Ajax操作选项属性含义

属性名称	含义
method	HTTP请求方式（POST/GET/HEAD）。
parameters	在HTTP请求中传入的URL格式的值列表，即URL串中问号之后的部分。
asynchronous	是否做异步XMLHttpRequest请求。
postBody	在POST请求方式下，传入请求体中的内容。
requestHeaders	和请求一起被传入的HTTP头部列表，这个列表必须含有偶数个项目，因为列表中每两项为一组，分别代表自定义部分的名称和与之对应的字符串值。
onXXXXXXXX	在HTTP 请求、响应的过程中，当XMLHttpRequest对象状态发生变化时调用的响应函数。响应函数有5个：onUninitialized、 onLoading、onLoaded、onInteractive和onComplete。传入这些函数的参数可以有2个，其中第1个参数是执行 HTTP请求的XMLHttpRequest对象，第2个参数是包含被执行的X-JSON响应的HTTP头。
onSuccess	Ajax操作成功完成时调用的响应函数，传入的参数与onXXXXXXXX相同。
onFailure	Ajax操作请求完成但出现错误时调用的响应函数，传入的参数与onXXXXXXXX相同。
onException	Ajax操作发生异常情况时调用的响应函数，它可以接收2个参数，其中第1个参数是执行HTTP请求的XMLHttpRequest对象，第2个参数是异常对象。

2.3.4 Ajax.Updater类

例2-11使用Ajax.Request类实现了页面的局部刷新效果，而这样类似的功能在Ajax应用中是经常使用的。因此，为了简化这种工作，Prototype框架从Ajax.Requet类中派生出一个子类——Ajax.Updater。与Ajax.Request相比，Ajax.Updater的初始化多了一个container参数，该参数代表将要更新的页面元素的id。例2-11的功能通过Ajax.Updater的实现，会变得更加简单，如例2-12所示。

例2-12 Ajax.Updater类的应用示例

"">

chapter 3

此外，Ajax.Updater类还有另外一个功能，如果请求的页面内容中包括JavaScript脚本，Ajax.Updater类可以执行其中的脚本，只需要在Ajax操作选项中增加属性 “evalScripts: true”即可。对例2-11中的data.html进行修改，在其中加入JavaScript脚本，如例2-13所示。

例2-13 data.html

调用Ajax.Updater的JavaScript脚本修改为：

function test() {

var myAjax = new Ajax.Updater(

'divResult', // 更新的页面元素

'data.html', // 请求的URL

{

method: 'get',

evalScripts: true

}

);

}

这样就可以使用data.html页面的内容更新当前页面中的

元素divResult，并且执行data.html页面中包含的JavaScript脚本。

这里需要注意的是例2-13中sayHi函数的写法，如果写成

function sayHi() {

alert("Hello, " + $F('name') + "!");

}

或者

var sayHi = function() {

alert("Hello, " + $F('name') + "!");

}

程序是不能正常运行的。这是因为 Ajax.Updater执行脚本是通过eval的方式，而不是将脚本内容引入到当前页面，直接声明的function sayHi或者用var声明的sayHi函数，其作用域只是在这段脚本内部，外部的其他脚本不能访问sayHi函数。而按照例2-13的方式声明的函数，其作用域是整个window。

2.3.5 Ajax.PeriodicalUpdater类

和Ajax.Request类相似， Ajax.PeriodicalUpdater类也继承自Ajax.Base类。在一些Ajax应用中，需要周期性地更新某些页面元素，例如天气预报、即时新闻等等。实现这样的功能通常要使用JavaScript中的定时器函数setTimeout、clearTimeout等，而有了 Ajax.PeriodicalUpdater类可以很好地简化这类编码工作。

新建一个Ajax. PeriodicalUpdater类的实例需要指定3个参数：

l container：将要更新的页面元素id；

l url：请求的URL地址；

l options：Ajax操作选项。

和Ajax.Updater类相似，Ajax.PeriodicalUpdater类也支持动态执行JavaScript脚本，只需在Ajax操作选项中增加（evalScripts: true）属性值即可。

Ajax.PeriodicalUpdater类支持两个特殊的Ajax操作选项：frequency和decay。frequency参数很容易理解，既然是定时更新页面元素，或者定时执行脚本，那么多长时间更新或者执行一次呢？frequency指的就是两次Ajax操作之间的时间间隔，单位是秒，默认值为2秒。

如果仅指定frequency参数，程序会按照固定的时间间隔执行Ajax操作。这样的更新策略合理吗？答案取决于请求URL中数据的更新频率。如果请求的数据会很有规律地按照固定频率改变，那么只要设置一个合适的frequency值，就可以很有效地实现页面的定时更新。然而实际应用中的数据往往不会那么理想，例如新闻，可能在一天中只有特定的一段时间更新频率会很高，而在其他时间则几乎没有变化。经常遇到这样的情况该怎么办呢？Ajax.PeriodicalUpdater类支持的decay属性就是为了解决这个问题而产生的。当option中带有decay属性时，如果请求返回的数据与上次相同，那么下次进行Ajax操作的时间间隔会乘以一个 decay的系数。

为了比较明显地看到decay属性的效果，在请求的测试页面中加入记录时间的脚本，代码如例2-14所示。

例2-14 Ajax.PeriodicalUpdater类应用示例

ex10.html：

"">

chapter 3

script1.html:

例2-14的运行结果如图2-4所示。

图2-4 Ajax.PeriodicalUpdater类应用示例

可以看到，由于请求返回的数据一直没有发生变化，每次请求时间的间隔是上一次的2倍（decay=2）。如果某一次请求返回的数据发生了变化，那么执行请求的时间间隔则恢复到初始值。

2.3.6 Ajax.Responders对象

Ajax.Responders对象维护了一个正在运行的Ajax对象列表，在需要实现一些全局的功能时就可以使用它。例如，在Ajax请求发出以后需要提示用户操作正在执行中，而操作返回以后则取消提示。利用Ajax.Responders对象就可以实现这样的功能，如例2-15所示。

例2-15 Ajax.Responders对象应用示例

"">

chapter 3

例2-15中定义了一个handle对象，其中包含onCreate和onComplete函数。页面中发出任何一个Ajax请求时都会调用onCreate方法，而请求完成时都会调用onComplete方法。例2-15的运行结果如图2-5所示。

图2-5 Ajax.Responders对象应用示例

通过这个JS类库，将很容易的应用AJAX技术
ajax.updater应用
new Ajax.Updater('id',"url",{options});
id:你要更新的目标id
url:你要执行的操作，也可以是cgi
options:
属性类型默认描述
method Array 'post' HTTP 请求方式。
parameters String '' 在HTTP请求中传入的url格式的值列表。
asynchronous Boolean true 指定是否做异步 AJAX 请求。
postBody String undefined 在HTTP POST的情况下，传入请求体中的内容。
requestHeaders Array undefined 和请求一起被传入的HTTP头部列表，这个列表必须含有偶数个项目，任何奇数项目是自定义的头部的名称，接下来的偶数项目使这个头部项目的字符串值。例子:['my-header1', 'this is the value', 'my-other-header', 'another value']
onXXXXXXXX Function(XMLHttpRequest) undefined 在AJAX请求中，当相应的事件/状态形成的时候调用的自定义方法。例如 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 这个方法将被传入一个参数，这个参数是携带AJAX操作的 XMLHttpRequest对象。
onSuccess Function(XMLHttpRequest) undefined 当AJAX请求成功完成的时候调用的自定义方法。这个方法将被传入一个参数，这个参数是携带AJAX操作的 XMLHttpRequest对象。字串6

onFailure Function(XMLHttpRequest) undefined 当AJAX请求完成但出现错误的时候调用的自定义方法。这个方法将被传入一个参数，这个参数是携带AJAX操作的 XMLHttpRequest对象。
insertion Function(Object, String) null 为了把返回的文本注入到一个元素中而执行的方法。这个方法将被传入两个参数，要被更新的对象并且只应用于 Ajax.Updater的响应文本。
evalScripts Boolean undefined, false 决定当响应到达的时候是否执行其中的脚本块，只在 Ajax.Updater 对象中应用。即要用到目标对象的JS代码必须设定true。
decay Number undefined,1 决定当最后一次响应和前一次响应相同时在 Ajax.PeriodicalUpdater 对象中的减漫访问的次数，例如，如果设为2，后来的刷新和之前的结果一样，这个对象将等待2个设定的时间间隔进行下一次刷新，如果又一次一样，那么将等待4次，等等。不设定这个只，或者设置为1，将避免访问频率变慢。
（参考https://compdoc2cn.dev.java.net/prototype/html/prototype.js.cn.html#options_reference）

简单例子：
一：
index.html:

ajax.html

using ajax!

说明：为了使ajax.html中test()方法运行，首先必须设定evalScripts：true，其次在test函数的命名方式修改为“函数名字＝function()”的方式。另外也可以将js之前放至index.html也能运行，不需要修改函数。

二：
表单的提交可以无刷新的方式

以上这段代码是我在wiki.script.aculo.us上看到的，有兴趣可以去看看原文。

具体应用可以根据需要修改，总之AJAX应用还是满好玩的。异步更新虽然好，但是网速慢的情况下，多次点击总感觉有问题。

2.2 常用函数

2.2.1 $()函数

DOM提供了 document.getElementById方法，可以根据传入的页面元素的id返回相应的元素对象。$()函数是 document.getElementById函数的一个简化写法，它比DOM中的方法功能更加强大，比如$()函数可以接受多个参数，返回满足条件的 Array对象。在Prototype中$()函数的实现代码如例2-1所示。

例2-1 $()函数

function $() {

var results = [], element;

for (var i = 0; i < arguments.length; i++) { // 可以传入多个参数

element = arguments[i];

// 如果参数的类型是字符串

if (typeof element == 'string')

element = document.getElementById(element);

results.push(Element.extend(element)); // 将得到的对象加入results数组

}

// 如果只返回一个对象，直接返回该对象，如果返回了多个对象，则返回包含所有这些对象的数组

return results.length < 2 ? results[0] : results;

}

从例2-1中可以看到，当$()只有1个输入参数时，它和document.getElementById是等效的，而当$()拥有多个输入参数时，其返回值是一个Array对象，这个数组包含了所有符合条件的对象。例2-2中分别用1个和多个参数调用了$()方法，注意示例中的黑体字。

例2-2 $()函数应用示例

"">

chapter 3

div1

div2

2.2.2 $A()函数

$A()函数可以将一个可枚举的对象转换为一个Array对象，它和Array.from()是等效的。例2-3是Prototype中$A()函数的实现代码。

例2-3 $A()函数

var $A = Array.from = function(iterable) {

if (!iterable) return [];// 如果iterable对象不存在，返回空数组

if (iterable.toArray) { // 如果iterable有toArray方法，返回iterable.toArray()

return iterable.toArray();

} else {

var results = [];

for (var i = 0; i < iterable.length; i++)

results.push(iterable[i]);

return results;//返回对象数组

}

可以看到，$A()函数是通过两种方式返回 Array对象的。第一种方式是如果传入的对象已经实现了toArray方法，那么则直接调用其toArray方法；第二种方式是通过循环的方式返回对象的数组。使用第二种方式的前提是传入的对象具有length属性，并且可以通过序号索引其内部的所有对象。例2-4是$A()函数的应用示例，注意示例中的黑体字。

例2-4 $A()函数应用示例

"">

chapter 3

图2-1 $A函数应用示例

例2-4是通过点击“Show the options”按钮触发onclick事件的响应函数showOptions，函数showOptions使用$A方法将lstFramework 的option对象集合转换为数组输出，相应的输出结果如图2-1所示。

2.2.3 $F()函数

$F()是另一个经常使用的快捷方式，它是 Form.Element.getValue()函数的缩写。$F()函数用来求得页面中输入控件的输入值，它的输入参数可以是目标控件的id值，也可以是目标控件对象本身。$F支持的输入控件包括系列（即type=submit / hidden / password / text / checkbox / radio）、下拉列表控件。例2-5给出了$F()函数的应用示例，该示例通过点击按钮触发onclick事件的响应函数test，调用$F()方法获得输入控件 “username”的输入值，然后输出。</p> <p class="MsoNormal" style="text-indent: 21pt;">例2-5 $F()函数应用示例</p> <p class="a9" style="line-height: 10.8pt;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</p> <p class="a9" style="line-height: 10.8pt;"> ""></p> <p class="a9" style="line-height: 10.8pt;"><html></p> <p class="a9" style="line-height: 10.8pt;"> <head></p> <p class="a9" style="line-height: 10.8pt;"> <title>chapter 3</title></p> <p class="a9" style="line-height: 10.8pt;"> <script type="text/javascript" language="javascript"</p> <p class="a9" style="line-height: 10.8pt;"> src="prototype.js" ></script></p> <p class="a9" style="line-height: 10.8pt;"> <script type="text/javascript" language="javascript"></p> <p class="a9" style="line-height: 10.8pt;"> function test() {</p> <p class="a9" style="line-height: 10.8pt;"> alert(<b>$F("userName")</b>);</p> <p class="a9" style="line-height: 10.8pt;"> }</p> <p class="a9" style="line-height: 10.8pt;"> </script></p> <p class="a9" style="line-height: 10.8pt;"> </head></p> <p class="a9" style="line-height: 10.8pt;"> <body></p> <p class="a9" style="line-height: 10.8pt;"> <form></p> <p class="a9" style="line-height: 10.8pt;"> <input type="text" id="userName" value="test username"></p> <p class="a9" style="line-height: 10.8pt;"> <input type="button" value="click" onclick="test()"></p> <p class="a9" style="line-height: 10.8pt;"> </form></p> <p class="a9" style="line-height: 10.8pt;"> </body></p> <p class="a9" style="line-height: 10.8pt;"></html></p> <h3>2.2.4 $H()函数</h3> <p class="MsoNormal" style="text-indent: 21pt;">Hash对象Prototype中定义了Hash对象一个用于模拟Hash数据结构，$H()函数的功能是将对象转换为Hash对象。$H函数将Hash对象的方法和属性通过Object.extend方法扩展到目标对象上，这样返回的对象就具有了Hash对象的方法，如keys方法，values方法等等。下面是$H()函数的一个应用示例：</p> <p class="a9" style="line-height: 10.8pt;"><script></p> <p class="a9" style="line-height: 10.8pt;">function test() {</p> <p class="a9" style="line-height: 10.8pt;"> // 创建一个对象</p> <p class="a9" style="line-height: 10.8pt;"> var obj = {</p> <p class="a9" style="line-height: 10.8pt;"> key1: 1,</p> <p class="a9" style="line-height: 10.8pt;"> key2: 2,</p> <p class="a9" style="line-height: 10.8pt;"> key3: 3</p> <p class="a9" style="line-height: 10.8pt;"> };</p> <p class="a9" style="line-height: 10.8pt;"> // 将其转换为Hash对象</p> <p class="a9" style="line-height: 10.8pt;"> var hash = $H(obj);</p> <p class="a9" style="line-height: 10.8pt;"> alert(hash.toQueryString());</p> <p class="a9" style="line-height: 10.8pt;">}</p> <p class="a9" style="line-height: 10.8pt;"></script></p> <h3>2.2.5 $R()函数</h3> <p class="MsoNormal" style="text-indent: 21pt;">$R()函数是new ObjectRange(start, end, exclusive)的缩写形式，它根据指定的起始边界返回相应的对象范围。在Prototype中$R()函数的定义如例2-6所示。</p> <p class="MsoNormal" style="text-indent: 21pt;">例2-6 $R()函数定义</p> <p class="a9" style="line-height: 10.8pt;">ObjectRange = Class.create();</p> <p class="a9" style="line-height: 10.8pt;">Object.extend(ObjectRange.prototype, Enumerable);</p> <p class="a9" style="line-height: 10.8pt;">Object.extend(ObjectRange.prototype, {</p> <p class="a9" style="line-height: 10.8pt;"> initialize: function(start, end, exclusive) {</p> <p class="a9" style="line-height: 10.8pt;"> this.start = start;</p> <p class="a9" style="line-height: 10.8pt;"> this.end = end;</p> <p class="a9" style="line-height: 10.8pt;"> this.exclusive = exclusive;</p> <p class="a9" style="line-height: 10.8pt;"> },</p> <p class="a9" style="line-height: 10.8pt;"> _each: function(iterator) {</p> <p class="a9" style="line-height: 10.8pt;"> var value = this.start;</p> <p class="a9" style="line-height: 10.8pt;"> do {</p> <p class="a9" style="line-height: 10.8pt;"> iterator(value);</p> <p class="a9" style="line-height: 10.8pt;"> value = value.succ();</p> <p class="a9" style="line-height: 10.8pt;"> } while (this.include(value));</p> <p class="a9" style="line-height: 10.8pt;"> },</p> <p class="a9" style="line-height: 10.8pt;"> // include函数的作用是判断value是否包含在对象范围之内</p> <p class="a9" style="line-height: 10.8pt;"> include: function(value) {</p> <p class="a9" style="text-indent: 21.35pt; line-height: 10.8pt;"><b> if (value < this.start)</b></p> <p class="a9" style="text-indent: 21.35pt; line-height: 10.8pt;"><b> return false;</b></p> <p class="a9" style="text-indent: 21.35pt; line-height: 10.8pt;"><b> if (this.exclusive) // </b><b>注意exclusive</b><b>参数仅在判断上界是有效</b></p> <p class="a9" style="text-indent: 21.35pt; line-height: 10.8pt;"><b> return value < this.end;</b></p> <p class="a9" style="text-indent: 21.35pt; line-height: 10.8pt;"><b> return value <= this.end;</b></p> <p class="a9" style="line-height: 10.8pt;"> }</p> <p class="a9" style="line-height: 10.8pt;">});</p> <p class="a9" style="line-height: 10.8pt;">var $R = function(start, end, exclusive) {</p> <p class="a9" style="text-indent: 25.5pt; line-height: 10.8pt;"> // 定义$R方法，$R是new ObjectRange(start, end, exclusive)的一个简单写法或快捷方式</p> <p class="a9" style="line-height: 10.8pt;"> return new ObjectRange(start, end, exclusive);</p> <p class="a9" style="line-height: 10.8pt;">}</p> <p class="MsoNormal" style="text-indent: 21pt;">可以看到，ObjectRange类是由 Enumerable类继承而来，它的初始化参数start、end和exclusive分别代表ObjectRange对象的下界、上界以及是否排除上界的值。这里需要注意的是，exclusive参数仅仅对上界起作用，从ObjectRange的include方法的实现代码中不难看出这一点。例2- 7给出了$R()函数的应用示例，其中比较了exclusive参数分别为true和false时的区别。</p> <p class="MsoNormal" style="text-indent: 21pt;">例2-7 $R()函数应用示例</p> <p class="a9" style="line-height: 10.8pt;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</p> <p class="a9" style="line-height: 10.8pt;"> ""></p> <p class="a9" style="line-height: 10.8pt;"><html></p> <p class="a9" style="line-height: 10.8pt;"> <head></p> <p class="a9" style="line-height: 10.8pt;"> <title>chapter 3</title></p> <p class="a9" style="line-height: 10.8pt;"> <script type="text/javascript" language="javascript"</p> <p class="a9" style="line-height: 10.8pt;"> src="prototype.js" ></script></p> <p class="a9" style="line-height: 10.8pt;"> <script></p> <p class="a9" style="line-height: 10.8pt;"> // 依次输出1，2，3，4</p> <p class="a9" style="line-height: 10.8pt;"> function test_R1(){</p> <p class="a9" style="line-height: 10.8pt;"> var range = $R(1, 5, true);</p> <p class="a9" style="line-height: 10.8pt;"> range.each(function(value, index){</p> <p class="a9" style="line-height: 10.8pt;"> alert(value);</p> <p class="a9" style="line-height: 10.8pt;"> });</p> <p class="a9" style="line-height: 10.8pt;"> }</p> <p class="a9" style="line-height: 10.8pt;"> // 依次输出1，2，3，4，5</p> <p class="a9" style="line-height: 10.8pt;"> function test_R2(){</p> <p class="a9" style="line-height: 10.8pt;"> var range = $R(1, 5, false);</p> <p class="a9" style="line-height: 10.8pt;"> range.each(function(value, index){</p> <p class="a9" style="line-height: 10.8pt;"> alert(value);</p> <p class="a9" style="line-height: 10.8pt;"> });</p> <p class="a9" style="line-height: 10.8pt;"> }</p> <p class="a9" style="line-height: 10.8pt;"> </script></p> <p class="a9" style="line-height: 10.8pt;"> </head></p> <p class="a9" style="line-height: 10.8pt;"> <body></p> <p class="a9" style="line-height: 10.8pt;"> <form></p> <p class="a9" style="line-height: 10.8pt;"> <input type="button" value="click (exclusive = true)"</p> <p class="a9" style="line-height: 10.8pt;"> onclick="test_R1()" /></p> <p class="a9" style="line-height: 10.8pt;"> <input type="button" value="click (exclusive = false)"</p> <p class="a9" style="line-height: 10.8pt;"> onclick="test_R2()" /></p> <p class="a9" style="line-height: 10.8pt;"> </form></p> <p class="a9" style="line-height: 10.8pt;"> </body></p> <p class="a9" style="line-height: 10.8pt;"></html></p> <h3>2.2.6 $$()函数</h3> <p class="MsoNormal" style="text-indent: 21pt;">$$()函数是Prototype 1.5新增的一个快捷方式，它允许开发人员通过CSS样式选择页面中的元素。熟悉XPath的读者会发现，CSS选择符在语法形式上和XML文档的XPath十分类似，Prototype支持的CSS选择符包括以下几种类型：</p> <p class="MsoNormal" style="margin-left: 42pt; text-indent: -21pt;">l 元素标签名称，例如：$$(“li”)。</p> <p class="MsoNormal" style="margin-left: 42pt; text-indent: -21pt;">l 元素ID，例如：$$(“#fixtures”)。</p> <p class="MsoNormal" style="margin-left: 42pt; text-indent: -21pt;">l CSS类名，例如：$$(“.first”)。</p> <p class="ae">l 元素是否具有某个属性，例如：$$(“h1[class]”)。</p> <p class="ae">l 元素的某个属性是否符合特定的条件，例如：$$('a[href="#"]')、$$('a[class~="internal"]')、$$('a[href!=#]')。</p> <p class="ae">l 上面所有这些CSS选择符的类型可以自由组合，形成一个复合的CSS选择符，例如：$$('li#item_3[class][href!="#"]')。</p> <p class="ae">l 不同的CSS选择符（包括复合CSS选择符）之间用空格分隔，就组成了一个多层的CSS选择符，它通过指定目标元素的父节点甚至更多层父节点的CSS样式属性来定位目标元素。例如：$$('div[style] p[id] strong')。</p> <p class="MsoNormal" style="text-indent: 21pt;">例2-8给出了一个$$()函数的测试页面示例，读者可以在该页面中输入不同的CSS选择符表达式，测试结果。</p> <p class="MsoNormal" style="text-indent: 21pt;">例2-8 $$()函数测试页面</p> <p class="a9" style="line-height: 10.8pt;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</p> <p class="a9" style="line-height: 10.8pt;"> ""></p> <p class="a9" style="line-height: 10.8pt;"><html xmlns="" xml:lang="en" lang="en"></p> <p class="a9" style="line-height: 10.8pt;"> <head></p> <p class="a9" style="line-height: 10.8pt;"> <title>chapter 3</title></p> <p class="a9" style="line-height: 10.8pt;"> <style type="text/css" media="screen"></p> <p class="a9" style="line-height: 10.8pt;"> /* <![CDATA[ */</p> <p class="a9" style="line-height: 10.8pt;"> #testcss1 { font-size:11px; color: #f00; }</p> <p class="a9" style="line-height: 10.8pt;"> #testcss2 { font-size:12px; color: #0f0; display: none; }</p> <p class="a9" style="line-height: 10.8pt;"> /* ]]> */</p> <p class="a9" style="line-height: 10.8pt;"> </style></p> <p class="a9" style="line-height: 10.8pt;"> <script type="text/javascript" language="javascript"</p> <p class="a9" style="line-height: 10.8pt;"> src="prototype.js" ></script></p> <p class="a9" style="line-height: 10.8pt;"> <script></p> <p class="a9" style="line-height: 10.8pt;"> function test() {</p> <p class="a9" style="line-height: 10.8pt;"> // 根据输入的CSS选择符，切换相应元素的显示</p> <p class="a9" style="line-height: 10.8pt;"> $$($F('csspath')).each(</p> <p class="a9" style="line-height: 10.8pt;"> function(item) {</p> <p class="a9" style="line-height: 10.8pt;"> Element.toggle(item);</p> <p class="a9" style="line-height: 10.8pt;"> }</p> <p class="a9" style="line-height: 10.8pt;"> );</p> <p class="a9" style="line-height: 10.8pt;"> }</p> <p class="a9" style="line-height: 10.8pt;"> </script></p> <p class="a9" style="line-height: 10.8pt;"> </head></p> <p class="a9" style="line-height: 10.8pt;"> <body></p> <p class="a9" style="line-height: 10.8pt;"> <form></p> <p class="a9" style="line-height: 10.8pt;"> <div id="fixtures"></p> <p class="a9" style="line-height: 10.8pt;"> <h1 class="title">Some title <span>here</span></h1></p> <p class="a9" style="line-height: 10.8pt;"> <p id="p" class="first summary"></p> <p class="a9" style="line-height: 10.8pt;"> <strong id="strong">This</strong> is a short blurb</p> <p class="a9" style="line-height: 10.8pt;"> </p> <p class="a9" style="line-height: 10.8pt;"> <a id="link_1" class="first internal" href="#">with a link</a> or </p> <p class="a9" style="line-height: 10.8pt;"> <a id="link_2" class="internal highlight" href="#"></p> <p class="a9" style="line-height: 10.8pt;"> <em id="em">two</em></p> <p class="a9" style="line-height: 10.8pt;"> </a>.</p> <p class="a9" style="line-height: 10.8pt;"> </p></p> <p class="a9" style="line-height: 10.8pt;"> <ul id="list"></p> <p class="a9" style="line-height: 10.8pt;"> <li id="item_1" class="first"></p> <p class="a9" style="line-height: 10.8pt;"> <a id="link_3" href="#" class="external"></p> <p class="a9" style="line-height: 10.8pt;"> <span id="span">Another link</span></p> <p class="a9" style="line-height: 10.8pt;"> </a></p> <p class="a9" style="line-height: 10.8pt;"> </li></p> <p class="a9" style="line-height: 10.8pt;"> <li id="item_2">Some text</li></p> <p class="a9" style="line-height: 10.8pt;"> <li id="item_3" xml:lang="es-us" class="">Otra cosa</li></p> <p class="a9" style="line-height: 10.8pt;"> </ul></p> <p class="a9" style="line-height: 10.8pt;"> </div></p> <p class="a9" style="line-height: 10.8pt;"> <input type="text" value="" id="csspath" /></p> <p class="a9" style="line-height: 10.8pt;"> <input type="button" value="click" onclick="test()" /></p> <p class="a9" style="line-height: 10.8pt;"> </form></p> <p class="a9" style="line-height: 10.8pt;"> </body></p> <p class="a9" style="line-height: 10.8pt;"></html></p> <p class="MsoNormal" style="text-indent: 21pt;">例2-8的运行页面如图2-2所示，在文本输入框中输入一个CSS选择符（例如“.title”），点击“click”按钮即可切换相应的页面元素（即Some title here）的显示/隐藏状态。</p> <p align="center"><img src="http://book.csdn.net/BookFiles/286/img/image002.jpg" height="247" width="265"> <img src="http://book.csdn.net/BookFiles/286/img/image003.jpg" height="246" width="265"></p> <p style="text-align: justify; text-indent: 9pt;" align="center"> (a) 在文本输入框中输入CSS选择符“.title” (b) 页面元素“Some title here”隐藏</p> <p align="center">图2-2 $$函数应用示例</p> <h3>2.2.7 Try.these()函数</h3> <p class="MsoNormal" style="text-indent: 21pt;">在程序开发的过程中有时会遇到这样的情况：在若干个函数中开发人员不能确定哪一个会返回正确的结果，只能依次尝试。Prototype中Try.these()函数为开发人员提供了一个很简便的方式来解决类似的问题。Try.these()函数的的定义如例2-9所示。</p> <p class="MsoNormal" style="text-indent: 21pt;">例2-9 Try.these()函数</p> <p class="a9" style="line-height: 10.8pt;">var Try = {</p> <p class="a9" style="line-height: 10.8pt;"> these: function() {</p> <p class="a9" style="text-indent: 38.25pt; line-height: 10.8pt;">// 返回结果</p> <p class="a9" style="line-height: 10.8pt;"> var returnValue;</p> <p class="a9" style="line-height: 10.8pt;"> for (var i = 0; i < arguments.length; i++) {</p> <p class="a9" style="text-indent: 46.75pt; line-height: 10.8pt;">// 输入参数为多个function对象</p> <p class="a9" style="line-height: 10.8pt;"> var lambda = arguments[i];</p> <p class="a9" style="line-height: 10.8pt;"> try {</p> <p class="a9" style="text-indent: 55.25pt; line-height: 10.8pt;">// 如果其中一个函数成功返回，则返回该函数的结果</p> <p class="a9" style="line-height: 10.8pt;"> returnValue = lambda();</p> <p class="a9" style="line-height: 10.8pt;"> break;</p> <p class="a9" style="line-height: 10.8pt;"> } catch (e) {}</p> <p class="a9" style="line-height: 10.8pt;"> }</p> <p class="a9" style="line-height: 10.8pt;"> return returnValue;</p> <p class="a9" style="line-height: 10.8pt;"> }</p> <p class="a9" style="line-height: 10.8pt;">}</p> <p class="MsoNormal" style="text-indent: 21pt;">从上述代码中可以看到，Try.these()函数的每一个参数都必须是一个无参的JavaScript方法。在Prototype框架中，实现Ajax对象的getTransport方法就用到了 Try.these()函数，getTransport方法的作用是返回一个XMLHttpRequest对象，而在不同浏览器中创建 XMLHttpRequest对象的方式是不同的。通过Try.these ()函数可以依次尝试各种浏览器创建XMLHttpRequest对象的方法，直到成功为止。例2-10所示为Ajax对象的getTransport方法的实现代码。</p> <p class="MsoNormal" style="text-indent: 21pt;">例2-10 Ajax对象的getTransport方法的实现代码</p> <p class="a9" style="line-height: 10.8pt;">var Ajax = {</p> <p class="a9" style="line-height: 10.8pt;"> getTransport: function() {</p> <p class="a9" style="line-height: 10.8pt;"> // 尝试以下3种创建XMLHttpRequest对象的方法</p> <p class="a9" style="line-height: 10.8pt;"> // 1. Mozilla浏览器中的XMLHttpRequest对象</p> <p class="a9" style="line-height: 10.8pt;"> // 2. 创建ActiveX对象"Msxml2.XMLHTTP"</p> <p class="a9" style="line-height: 10.8pt;"> // 3. 创建ActiveX对象"Microsoft.XMLHTTP"</p> <p class="a9" style="line-height: 10.8pt;"> return Try.these(</p> <p class="a9" style="line-height: 10.8pt;"> function() {return new XMLHttpRequest()},</p> <p class="a9" style="line-height: 10.8pt;"> function() {return new ActiveXObject('Msxml2.XMLHTTP')},</p> <p class="a9" style="line-height: 10.8pt;"> function() {return new ActiveXObject('Microsoft.XMLHTTP')}</p> <p class="a9" style="line-height: 10.8pt;"> ) || false;</p> <p class="a9" style="line-height: 10.8pt;"> },</p> <p class="a9" style="line-height: 10.8pt;"> </p> <p class="a9" style="line-height: 10.8pt;"> // 当前活动的Ajax请求计数</p> <p class="a9" style="line-height: 10.8pt;"> activeRequestCount: 0</p> <p class="a9" style="line-height: 10.8pt;">}</p> <p class="MsoNormal" style="text-indent: 21pt;">第2章介绍了创建XMLHttpRequest对象的方法，代码中对浏览器的类型、版本进行了判断，最终返回XMLHttpRequest对象的实例。与第2章中使用的方法相比，Prototype框架中Ajax对象的实现代码更加简洁明了。</p>  </div>  <div class="Blog_con2_1 Blog_con3_2"> <div>   <div class="bdsharebuttonbox"><A class=bds_more href="#" data-cmd="more"></A><A class=bds_qzone title=分享到QQ空间 href="#" data-cmd="qzone"></A><A class=bds_tsina title=分享到新浪微博 href="#" data-cmd="tsina"></A><A class=bds_tqq title=分享到腾讯微博 href="#" data-cmd="tqq"></A><A class=bds_renren title=分享到人人网 href="#" data-cmd="renren"></A><A class=bds_weixin title=分享到微信 href="#" data-cmd="weixin"></A></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>  </div> 阅读(832) | 评论(0) | 转发(0) | <div class="HT_line3"></div> </div> <div class="Blog_con3_3"> <div><span id='digg_num'>0</span><a href="javascript:void(0)" id='digg' bid='2431753' url='/blog/digg.html' ></a></div> <p>上一篇：<a href="/uid-9234906-id-2431751.html">ＪＡＶＡ６道基础问题</a></p> <p>下一篇：<a href="/uid-9234906-id-2431755.html">转载</a></p> </div> </div>  </div> </div> <div class="Blog_right1_7" id='replyList'> <div class="Blog_tit3">给主人留下些什么吧！~~</div>   <div class="Blog_right1_6 Blog_right1_12"> </div>  <div class="Blog_right1_10" style="display:none"> <div class="Blog_tit3">评论热议</div>  <div class="Blog_right1_8"> <div class="nologin_con1"> 请登录后评论。 <p><a href="http://account.chinaunix.net/login" onclick="link(this)">登录</a> <a href="http://account.chinaunix.net/register?url=http%3a%2f%2fblog.chinaunix.net">注册</a></p> </div> </div> </div> <div style="text-align:center;margin-top:10px;"> <script type="text/javascript" smua="d=p&s=b&u=u3118759&w=960&h=90" src="//www.nkscdn.com/smu0/o.js"></script> </div> </div> </div> </div> <input type='hidden' id='report_url' value='/blog/ViewReport.html' /> <script type="text/javascript"> //测试字符串的长度一个汉字算2个字节 function mb_strlen(str) { var len=str.length; var totalCount=0; for(var i=0;i<len;i++) { var c = str.charCodeAt(i); if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) { totalCount++; }else{ totalCount+=2; } } return totalCount; } /* var Util = {}; Util.calWbText = function (text, max){ if(max === undefined) max = 500; var cLen=0; var matcher = text.match(/[^\x00-\xff]/g), wlen = (matcher && matcher.length) || 0; //匹配url链接正则 http://*** var pattern = /http:\/\/([\w-]+\.)+[\w-]+(\/*[\w-\.\/\?%&=][^\s^\u4e00-\u9fa5]*)?/gi; //匹配的数据存入数组 var arrPt = new Array(); var i = 0; while((result = pattern.exec(text)) != null){ arrPt[i] = result[0]; i++; } //替换掉原文本中的链接 for(var j = 0;j<arrPt.length;j++){ text = text.replace(arrPt[j],""); } //减掉链接所占的长度 return Math.floor((max*2 - text.length - wlen)/2 - 12*i); }; */ var allowComment = '0'; //举报弹出层 function showJuBao(url, cid){ $.cover(false); asyncbox.open({ id : 'report_thickbox', url : url, title : '举报违规', width : 378, height : 240, scroll : 'no', data : { 'cid' : cid, 'idtype' : 2 , 'blogurl' : window.location.href }, callback : function(action){ if(action == 'close'){ $.cover(false); } } }); } $(function(){ //创建管理员删除的弹出层 $('#admin_article_del').click(function(){ $.cover(false); asyncbox.open({ id : 'class_thickbox', html : '<div class="HT_layer3_1"><ul><li class="HT_li1">操作原因：<select class="HT_sel7" id="del_type" name="del_type"><option value="广告文章">广告文章</option><option value="违规内容">违规内容</option><option value="标题不明">标题不明</option><option value="文不对题">文不对题</option></select></li><li class="HT_li1" ><input class="HT_btn4" id="admin_delete" type="button" /></li></ul></div>', title : '选择类型', width : 300, height : 150, scroll : 'no', callback : function(action){ if(action == 'close'){ $.cover(false); } } }); }); $('#admin_delete').live('click' , function(){ ///blog/logicdel/id/3480184/url/%252Fblog%252Findex.html.html var type = $('#del_type').val(); var url = '/blog/logicdel/id/2431753/url/%252Fuid%252F9234906.html.html'; window.location.href= url + '?type=' + type; }); //顶 js中暂未添加&过滤 $('#digg').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var bid = $('#digg').attr('bid'); var url = $('#digg').attr('url'); var digg_str = $.cookie('digg_id'); if(digg_str != null) { var arr= new Array(); //定义一数组 arr = digg_str.split(","); //字符分割 for( i=0 ; i < arr.length ; i++ ) { if(bid == arr[i]) { showErrorMsg('已经赞过该文章', '消息提示'); return false; } } } $.ajax({ type:"POST", url:url, data: { 'bid' : bid }, dataType: 'json', success:function(msg){ if(msg.error == 0) { var num = parseInt($('#digg_num').html(),10); num += 1; $('#digg_num').html(num); $('#digg').die(); if(digg_str == null) { $.cookie('digg_id', bid, {expires: 30 , path: '/'}); } else { $.cookie('digg_id', digg_str + ',' + bid, {expires: 30 , path: '/'}); } showSucceedMsg('谢谢' , '消息提示'); } else if(msg.error == 1) { //showErrorMsg(msg.error_content , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); } else if(msg.error == 2) { showErrorMsg(msg.error_content , '消息提示'); } } }); }); //举报弹出层 /*$('.box_report').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var url = $('#report_url').val(); var cid = $(this).attr('cid'); $.cover(false); asyncbox.open({ id : 'report_thickbox', url : url, title : '举报违规', width : 378, height : 240, scroll : 'no', data : { 'cid' : cid, 'idtype' : 2 }, callback : function(action){ if(action == 'close'){ $.cover(false); } } }); });*/ //评论相关代码 //点击回复显示评论框 $('.Blog_a10').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } if(allowComment == 1) { showErrorMsg('该博文不允许评论' , '消息提示'); return false; } var tid = $(this).attr('toid');//留言作者id var bid = $(this).attr('bid');//blogid var cid = $(this).attr('cid');//留言id var tname = $(this).attr('tname'); var tpl = '<div class="Blog_right1_9">'; tpl += '<div class="div2">'; tpl += '<textarea name="" cols="" rows="" class="Blog_ar1_1" id="rmsg">文明上网，理性发言...'; tpl += '

'; tpl += '

表情

'; tpl += '

'; $('.z_move_comment').html(''); $(this).parents('.Blog_right1_8').find('.z_move_comment').html(tpl).show(); }); //引用的评论提交 $('#quota_sbumit').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var bid = $(this).attr('bid'); var tid = $(this).attr('tid');//被引用人的id var qid = $(this).attr('cid');//引用的id var url = $(this).attr('url'); var text = $('#rmsg').val(); var tname = $(this).attr('tname'); if(text == '' || text=='文明上网，理性发言...') { showErrorMsg('评论内容不能为空！' , '消息提示'); return false; } else { if(mb_strlen(text) > 1000){ showErrorMsg('评论内容不能超过500个汉字' , '消息提示'); return false; } } $.ajax({ type: "post", url: url , data: {'bid': bid , 'to' : tid , 'qid' : qid , 'text': text , 'tname' : tname }, dataType: 'json', success: function(data){ if(data.code == 1){ var tpl = '

'; tpl+= '

' + data.info.header + '

'; tpl+= '

' + data.info.username + '' + data.info.dateline + '

'; tpl+= '

' + data.info.quota.username + '：'+ data.info.quota.content + '

'; tpl+= '

' + data.info.content + '

回复 | 　删除　| 　举报

'; tpl+= ''; tpl+= '

'; $('#replyList .Blog_right1_8:first').before(tpl); $('.z_move_comment').html('').hide(); } else if(data.code == -1){ //showErrorMsg(data.info , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); } }, error: function(){//请求出错处理 } }); }); //底部发表评论 $('#submitmsg').click(function(){ if(allowComment == 1) { showErrorMsg('该博文不允许评论' , '消息提示'); return false; } var bid = $(this).attr('bid'); var toid = $(this).attr('toid'); var text = $('#reply').val(); var url = $(this).attr('url'); if(text == '' || text=='文明上网，理性发言...') { showErrorMsg('评论内容不能为空！' , '消息提示'); return false; } else { if(mb_strlen(text) > 1000){ showErrorMsg('评论内容不能超过500个汉字' , '消息提示'); return false; } } $.ajax({ type: "post", url: url , data: {'bid': bid , 'to' : toid ,'text': text}, dataType: 'json', success: function(data){ if(data.code == 1) { var tpl = '

'; tpl += '

' + data.info.header + '

'; tpl += '

' + data.info.username + '' + data.info.dateline + '

'; tpl += '

' + data.info.content + '

'; tpl += '

回复 | 　删除　| 　举报

'; tpl += ''; tpl += '

'; $('.Blog_tit3:first').after(tpl); $('#reply').val('文明上网，理性发言...'); } else if(data.code == -1) { showErrorMsg(data.info , '消息提示'); } }, error: function(){//请求出错处理 } }); }); //底部评论重置 $('#reset_comment').click(function(){ $('#reply').val('文明上网，理性发言...'); }); //取消回复 $('#qx_comment').live('click' , function(){ $('.z_move_comment').html('').hide(); }); $('#rmsg, #reply').live({ focus:function(){ if($(this).val() == '文明上网，理性发言...'){ $(this).val(''); } }, blur:function(){ if($(this).val() == ''){ $(this).val('文明上网，理性发言...'); } } }); //删除留言确认 $('.comment_del_mark').live('click' , function(){ var url = $(this).attr('url'); asyncbox.confirm('删除留言','确认', function(action){ if(action == 'ok') { location.href = url; } }); }); //删除时间确认 $('.del_article_id').click(function(){ var delurl = $(this).attr('delurl'); asyncbox.confirm('删除文章','确认', function(action){ if(action == 'ok') { location.href = delurl; } }); }); /* //字数限制 $('#rmsg, #reply').live('keyup', function(){ var id = $(this).attr('id'); var left = Util.calWbText($(this).val(), 500); var eid = '#errmsg'; if(id == 'reply') eid = '#rerrmsg'; if (left >= 0) $(eid).html('您还可以输入' + left + '字'); else $(eid).html('您已超出' + Math.abs(left) + '字 '); }); */ //加载表情 $('#face').qqFace({id : 'facebox1', assign : 'reply', path : '/image/qqface/'}); $('#mface').qqFace({id : 'facebox', assign : 'rmsg', path:'/image/qqface/'}); /* $('#class_one_id').change(function(){ alert(123213); var id = parseInt($(this).val() , 10); if(id == 0) return false; $('.hidden_son_class span').each(function( index , dom ){ if( dom.attr('cid') == id ) { } }); }); */ //转载文章 var turn_url = "/blog/viewClassPart.html"; $('#repost_bar').click(function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var id = $(this).attr('bid'); asyncbox.open({ id : 'turn_class_thickbox', url : turn_url, title : '转载文章', width : 330, height : 131, scroll : 'no', data : { 'id' : id }, callback : function(action){ if(action == 'close'){ $.cover(false); } } }); }); /* //转发文章 $('#repost_bar').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var bid = $(this).attr('bid'); var url = $(this).attr('url'); asyncbox.confirm('转载文章','确认', function(action){ if(action == 'ok'){ $.ajax({ type:"POST", url:url, data: { 'bid' : bid }, dataType: 'json', success:function(msg){ if(msg.error == 0){ showSucceedMsg('转发成功！', '消息提示'); }else if(msg.error == 1){ //location.href = '/index.php?r=site/login'; showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); }else{ showErrorMsg(msg.error_content, '消息提示'); } } }); } }); }); */ });

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6