修改了Prototype框架

    这两天开发批量配置的页面，由于前两天刚刚看了Prototype框架的书，所以想在这个功能中小试牛刀，于是我安排小雷开发后发，我就玩玩页面。

    Prototype是时下功能比较齐全的Ajax框架，虽然不如Dojo框架的Widget多，但是也够我们这次用了，而且这次也是从基础学起，所以就没有用像Dojo这么花哨的框架。

    Prototype框架提供了很多javascript功能扩展和封装，比如说"$"符，css选择器，String的扩展方法，很多数组的扩展方法，实现的HashMap等有用的类。最重要的，做为一个Ajax框架，它提供了ajax调用的封装，包括Ajax.Request，Ajax.Updater，Ajax.PeriodicalUpdater，这３　个类都是非常有用的。Ajax.Request完成最普通的Ajax调用，Ajax.Updater能够指定Ajax响应要更新的界面元素，Ajax.PeriodicalUpdater能够定时发Ajax请求。

    我今天在使用Prototype框架的时候，遇到了两个问题。第一个是我需要用Ajax.PeriodicalUpdater来向后台发请求，并更新界面，但是当后台返回某个数据的时候，要停止发Ajax请求，可是Prototype框架并没有告诉我们怎么在Ajax.PeriodicalUpdater的回调方法中停止继续发Ajax请求。于是开始看Prototype的代码，发现是框架的Ajax.PeriodicalUpdater的updateComplete方法（位置是Prototype.js的854行,Prototype 1.5，后同）处理Ajax响应，那么我在Ajax.PeriodicalUpdater中加入一个属性叫stopTimerFlag，这个属性在初始化Ajax.PeriodicalUpdater对象时给出，修改如下：

initialize: function(container, url, options) {
    this.setOptions(options);
    this.onComplete = this.options.onComplete;

    this.stopTimeFlag = this.options.stopTimerFlag;

    this.frequency = (this.options.frequency || 2);

　 ......

 

然后修改updateComplete方法如下：

updateComplete: function(request) {
    if (this.options.decay) {
      this.decay = (request.responseText == this.lastText ?
        this.decay * this.options.decay : 1);

      this.lastText = request.responseText;

　　 if (this.lastText.indexOf(this.stopTimerFlag) != -1)

      {return;}
    }
    this.timer = setTimeout(this.onTimerEvent.bind(this),
      this.decay * this.frequency * 1000);
  },

这样，当后台决定要停止定时器时，只要将返回给前台的responseText中加入stopTimerFlag就好了。在初始化Ajax.PeriodicalUpdater时按照下面初始化就好了：

var myAjax = new Ajax.PeriodicalUpdater(
    'divResult',
    'script1.html',
    {
     method: 'get',
     evalScripts: true,

　　stopTimerFlag: 'TIMER_FLAG',
     frequency: 1,
     decay: 2
    }

   );

 

    另外一个修改的地方就是，我们可以通过Ajax.Responders.register(handler);来定义全局的Ajax响应方法和创建Ajax请求时要做的事情。但是这样定义的响应方法是在具体的Ajax响应方法之后执行的。而我要通过这个方法来做Ajax错误信息的判断和显示功能，并且当后台返回的是错误信息的时候，执行完这个全局的方法后就不执行具体的方法了。研究了下代码，发现只要改一行，就可以做到：

把Ajax.Request类中的respondToReadyState方法中如下两句换下位置（在Prototype.js的765,766行）：

(this.options['on' + event] || Prototype.emptyFunction)(transport, json);
Ajax.Responders.dispatch('on' + event, this, transport, json);

也就是改为：

Ajax.Responders.dispatch('on' + event, this, transport, json);

(this.options['on' + event] || Prototype.emptyFunction)(transport, json);

就可以了，简单吧：）

 

Ajax现在已经得到了长足的方展，相信使用这项技术的网站和公司会越来越多，Ajax必然是今后的主角。要是我有money，真想开个公司，专门做基于Ajax的web应用（注意，是应用，不只是网站），现在干这个，是绝好的机会~~~~~~~~~~~~