prototytpe ajax.js 源码解读

作者在 2007-04-23 06:11:00 发布以下内容

/**

 * 定义 Ajax 对象, 静态方法 getTransport 方法返回一个 XMLHttp 对象

 */

var Ajax = {

  getTransport: function() {

    return Try.these(

      function() {return new ActiveXObject('Msxml2.XMLHTTP')},

      function() {return new ActiveXObject('Microsoft.XMLHTTP')},

      function() {return new XMLHttpRequest()}

    ) || false;

  },


  emptyFunction: function() {}

}


/**

 * 我以为此时的Ajax对象起到命名空间的作用。

 * Ajax.Base 声明为一个基础对象类型

 * 注意 Ajax.Base 并没有使用 Class.create() 的方式来创建,我想是因为作者并不

 * 希望 Ajax.Base 被库使用者实例化。

 * 作者在其他对象类型的声明中,将会继承于它。

 * 就好像 java 中的私有抽象类

 */

Ajax.Base = function() {};

Ajax.Base.prototype = {

  /**

   * extend (见prototype.js中的定义) 的用法真是让人耳目一新

   * options 首先设置默认属性,然后再 extend 参数对象,那么参数对象中也有同名

   * 的属性,那么就覆盖默认属性值。

   * 想想如果我写这样的实现,应该类似如下:

     setOptions: function(options) {

      this.options.methed = options.methed? options.methed : 'post';

      ..........

     }

     我想很多时候,java 限制了 js 的创意。

   */

  setOptions: function(options) {

    this.options = {

      method:       'post',

      asynchronous: true,

      parameters:   ''

    }.extend(options || {});

  }

}

 

/**

 * Ajax.Request 封装 XmlHttp

 */

Ajax.Request = Class.create();


/**

 * 定义四种事件(状态), 参考

 * http://msdn.microsoft.com/workshop/

 * author/dhtml/reference/properties/readystate_1.asp

 */

Ajax.Request.Events =

  ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete'];


/**

 *

 */

Ajax.Request.prototype = (new Ajax.Base()).extend({

  initialize: function(url, options) {

    this.transport = Ajax.getTransport();

    this.setOptions(options);


    try {

      if (this.options.method == 'get')

        url += '?' + this.options.parameters + '&_=';


     /**

      * 此处好像强制使用了异步方式,而不是依照 this.options.asynchronous 的值

      */

      this.transport.open(this.options.method, url, true);


     /**

      * 这里提供了 XmlHttp 传输过程中每个步骤的回调函数

      */

      if (this.options.asynchronous) {

        this.transport.onreadystatechange = this.onStateChange.bind(this);

        setTimeout((function() {this.respondToReadyState(1)}).bind(this), 10);

      }


      this.transport.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

      this.transport.setRequestHeader('X-Prototype-Version', Prototype.Vers

我的日志 | 阅读 1212 次
文章评论,共0条
游客请输入验证码
浏览114677次