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测试页面：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
          chapter 3
                    src="prototype.js" >
         
          function test() {
              // 创建Ajax.Request对象，发起一个Ajax请求
              var myAjax = new Ajax.Request(
                  'data.html', // 请求的URL
                  {
                      method: 'get', // 使用GET方式发送HTTP请求
                      onComplete: showResponse // 指定请求成功完成时需要执行的方法
                  }
              );
          }
        
          function showResponse(response) {
              $('divResult').innerHTML = response.responseText;
          }
         
      
      
      
      
      
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类的应用示例
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
          chapter 3
                    src="prototype.js" >
         
          function test() {
              var myAjax = new Ajax.Updater(
                  'divResult', // 更新的页面元素
                  'data.html', // 请求的URL
                  {
                      method: 'get'
                  }
              );
          }
         
      
      
      
      
      
此外，Ajax.Updater类还有另外一个功
能，如果请求的页面内容中包括JavaScript脚本，Ajax.Updater类可以执行其中的脚本，只需要在Ajax操作选项中增加属性
“evalScripts: true”即可。对例2-11中的data.html进行修改，在其中加入JavaScript脚本，如例2-13所示。
例2-13 data.html
sayHi = function() {
      alert("Hello, " + $F('name') + "!");
}
调用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：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
          chapter 3
                    src="prototype.js" >
         
          var str='';
          var intcount=0;
          function test() {
              var myAjax = new Ajax.PeriodicalUpdater(
                  'divResult', // 定时更新的页面元素
                  'script1.html', // 请求的URL
                  {
                      method: 'get', // HTTP请求的方式为GET
                      evalScripts: true, // 是否执行请求页面中的脚本
                      frequency: 1, // 更新的频率
                      decay: 1 // 衰减系数
                  }
              );
          }

         
      
      
      
      
      
      
script1.html:
// Ajax.PeriodicalUpdater调用函数计数
// 在元素divResult2中增加一行结果，并记录当前时间和
// Ajax.PeriodicalUpdater的调用次数
intcount++;
str = $('divResult2').innerHTML;
$('divResult2').innerHTML = str + "count = " + intcount+ ": " + new Date() + "
";

例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对象应用示例
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
          chapter 3
                    src="prototype.js" >
         
          function test() {
              var myAjax = new Ajax.Request(
                  'data.html',
                  {
                      method: 'get',
                      onComplete: showResponse
                  }
              );
          }
        
          function showResponse(response) {
              $('divResult').innerHTML = response.responseText;
          }      
        
          var handle = {
              onCreate: function() {
                  Element.show('loading'); // 当创建Ajax请求时，显示loading
              },
              onComplete: function() {
                  // 当请求成功返回时，如果当前没有其他正在运行中的Ajax请求，隐藏loading
                  if (Ajax.activeRequestCount == 0) {
                      Element.hide('loading');
                  }
              }
          };
          // 将handle注册到全局的Ajax.Responders对象中，使其生效
          Ajax.Responders.register(handle);
         
      
      
      
      
      
          Loading...
      
      
例2-15中定义了一个handle对象，其中包含onCreate和onComplete函数。页面中发出任何一个Ajax请求时都会调用onCreate方法，而请求完成时都会调用onComplete方法。例2-15的运行结果如图2-5所示。