javascript 学习(5)_H5之家 - 中国HTML5教程资源分享第一站

/**
* 这个函数就 Ruby 了。我觉得它的作用主要有两个
* 1. 大概是 document.getElementById(id) 的最简化调用。
* 比如：$("aaa") 将返回上 aaa 对象
* 2. 得到对象数组
* 比如: $("aaa","bbb") 返回一个包括id为"aaa"和"bbb"两个input控件对象的数组。
*/
function $() {
var elements = new Array();

for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);

    if (arguments.length == 1)
      return element;

    elements.push(element);
}

return elements;
}

Ajax::prototype 源码解读之 prototype.js 二[转载]
/**
* 定义 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();

/**
* 定义四种事件(状态)，参考
*/
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.Version);

      if (this.options.method == 'post') {
        this.transport.setRequestHeader('Connection', 'close');
        this.transport.setRequestHeader('Content-type',
          'application/x-www-form-urlencoded');
      }

      this.transport.send(this.options.method == 'post' ?
        this.options.parameters + '&_=' : null);

    } catch (e) {
    }
},

onStateChange: function() {
    var readyState = this.transport.readyState;
   /**
    * 如果不是 Loading 状态，就调用回调函数
     */
    if (readyState != 1)
      this.respondToReadyState(this.transport.readyState);
},

/**
   * 回调函数定义在 this.options 属性中，比如:
      var option = {
         onLoaded : function(req) {...};
         ......
      }
      new Ajax.Request(url, option);
   */
respondToReadyState: function(readyState) {
    var event = Ajax.Request.Events[readyState];
    (this.options['on' + event] || Ajax.emptyFunction)(this.transport);
}
});