prototype.js

JAVA +MySql小型用户管理系统 运用Strust+Spring+Hibernate 3框架 实现mvc jsp融合JavaScript+Ajax 技术 程序还有待完善

      this.setRequestHeaders();

      var body = this.options.postBody ? this.options.postBody : parameters;
      this.transport.send(this.options.method == 'post' ? body : null);

    } catch (e) {
      this.dispatchException(e);
    }
  },
//设置请求头
  setRequestHeaders: function() {
    var requestHeaders =
      ['X-Requested-With', 'XMLHttpRequest',
       'X-Prototype-Version', Prototype.Version];

    if (this.options.method == 'post') {
      requestHeaders.push('Content-type',
        'application/x-www-form-urlencoded');

      /* Force "Connection: close" for Mozilla browsers to work around
       * a bug where XMLHttpReqeuest sends an incorrect Content-length
       * header. See Mozilla Bugzilla #246651.
       */
      if (this.transport.overrideMimeType)
        requestHeaders.push('Connection', 'close');
    }

    if (this.options.requestHeaders)
      requestHeaders.push.apply(requestHeaders, this.options.requestHeaders);

    for (var i = 0; i < requestHeaders.length; i += 2)
      this.transport.setRequestHeader(requestHeaders[i], requestHeaders[i+1]);
  },

  onStateChange: function() {
    var readyState = this.transport.readyState;
    if (readyState != 1)
      this.respondToReadyState(this.transport.readyState);
  },

  header: function(name) {
    try {
      return this.transport.getResponseHeader(name);
    } catch (e) {}
  },

  evalJSON: function() {
    try {
      return eval(this.header('X-JSON'));
    } catch (e) {}
  },

  evalResponse: function() {
    try {
      return eval(this.transport.responseText);
    } catch (e) {
      this.dispatchException(e);
    }
  },

  respondToReadyState: function(readyState) {
    var event = Ajax.Request.Events[readyState];
    var transport = this.transport, json = this.evalJSON();

    if (event == 'Complete') {
      try {
        (this.options['on' + this.transport.status]
         || this.options['on' + (this.responseIsSuccess() ? 'Success' : 'Failure')]
         || Prototype.emptyFunction)(transport, json);
      } catch (e) {
        this.dispatchException(e);
      }

      if ((this.header('Content-type') || '').match(/^text\/javascript/i))
        this.evalResponse();
    }

    try {
      (this.options['on' + event] || Prototype.emptyFunction)(transport, json);
      Ajax.Responders.dispatch('on' + event, this, transport, json);
    } catch (e) {
      this.dispatchException(e);
    }

    /* Avoid memory leak in MSIE: clean up the oncomplete event handler */
    if (event == 'Complete')
      this.transport.onreadystatechange = Prototype.emptyFunction;
  },

  dispatchException: function(exception) {
    (this.options.onException || Prototype.emptyFunction)(this, exception);
    Ajax.Responders.dispatch('onException', this, exception);
  }
});
///////////////////////////创建XMLHttpRequest，打开与服务器的连接////////////



///////////////////////////////Ajax.Updater－－简化Ajax.Request类//////////////////////////////
/*
简化Ajax.Request类，使用该类无须使用回调函数，该类可将服务器响应自动显示在某个容器中，如果没有指定回调函数，当服务器响应完成时，客户端html页面即不能自动解析服务器响应，也不能对页面本身的结构进行改变
*/
Ajax.Updater = Class.create();
/*Ajax.Updater(containers,url,options)，创建一个Ajax.Updater对象，完成一次Ajax交互，参数与Ajax.Request类构造器中的options基本一致，该参数包含了如下属性：
method：指定发送请求的方法，通常只能是post和get，不能大写
paramters：发送请求参数
onLoading：当XMLHttpRequest对象的redystate状态为1时，触发该属性指定的函数
onLoaded：当XMLHttpRequest对象的readystate状态为2时，触发该属性指定的函数
onIteractive：当XMLHttpRequest对象的readystate状态为3时，触发该属性指定的函数
onComplete：当XMLHttpRequest对象的readystate状态为4时，触发该属性指定的函数
onSuccess：当服务器响应成功时，触发该属性指定的函数
onFailure：当服务器响应失败时，触发该属性指定的函数
evalScripte：该属性值只能为true，false，用于指定是否执行服务器响应中的javascript脚本
*/
Object.extend(Object.extend(Ajax.Updater.prototype, Ajax.Request.prototype), {
  initialize: function(container, url, options) {
/*
服务器响应将在containers属性所确定的html元素中显示出来，如果该对象是一个直接的html元素，则无论成功与否，都将显示该元素。containers还可以是一个包含两个属性（success和failure）的对象，成功时，在success指定的html元素中显示服务器响应，失败时与成功的情况相似。
*/
 	this.containers = {
      success: container.success ? $(container.success) : $(container),
      failure: container.failure ? $(container.failure) :
        (container.success ? null : $(container))
    }

    this.transport = Ajax.getTransport();
    this.setOptions(options);

    var onComplete = this.options.onComplete || Prototype.emptyFunction;
    this.options.onComplete = (function(transport, object) {
      this.updateContent();
      onComplete(transport, object);
    }).bind(this);

    this.request(url);
  },

  updateContent: function() {
    var receiver = this.responseIsSuccess() ?
      this.containers.success : this.containers.failure;
    var response = this.transport.responseText;

    if (!this.options.evalScripts)
      response = response.stripScripts();

    if (receiver) {
      if (this.options.insertion) {
        new this.options.insertion(receiver, response);
      } else {
        Element.update(receiver, response);
      }
    }

    if (this.responseIsSuccess()) {
      if (this.onComplete)
        setTimeout(this.onComplete.bind(this), 10);
    }
  }
});
///////////////////////////////Ajax.Updater－－简化Ajax.Request类//////////////////////////////////



///////////////////////Ajax.PeriodicalUpdater－－周期性的Ajax.Updater类/////////////////////////
/*
一个周期性的Ajax.Updater类，用于周期性地向服务器发送请求
*/
Ajax.PeriodicalUpdater = Class.create();
Ajax.PeriodicalUpdater.prototype = Object.extend(new Ajax.Base(), {
  initialize: function(container, url, options) {
    this.setOptions(options);
    this.onComplete = this.options.onComplete;

    this.frequency = (this.options.frequency || 2);//两次发送ajax请求之间的时间间隔
    this.decay = (this.options.decay || 1);//如果服务器的两次响应完全相同，则减慢发送请求的频率，如果服务器响应有n次完成相同，则发送请求的时间间隔为frequency*（decay的n-1次方）。该属性的值默认为1.

    this.updater = {};//最后一次使用ajax.updater对象
    this.container = container;//Ajax.Updater类的属性完全相同

    this.url = url;

    this.start();
  },

  start: function() {
    this.options.onComplete = this.updateComplete.bind(this);
    this.onTimerEvent();
  },

  stop: function() {
    this.updater.onComplete = undefined;
    clearTimeout(this.timer);
    (this.onComplete || Prototype.emptyFunction).apply(this, arguments);
  },

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

      this.lastText = request.responseText;
    }
    this.timer = setTimeout(this.onTimerEvent.bind(this),//timer周期性发送ajax请求的定时器对象
      this.decay * this.frequency * 1000);
  },

  onTimerEvent: function() {
    this.updater = new Ajax.Updater(this.container, this.url, this.options);
  }
});
///////////////////////Ajax.PeriodicalUpdater－－周期性的Ajax.Updater类/////////////////////////

/***************************************AJAX************************************************/






/**********************************操作DOM的所有类和方法********************************/

document.getElementsByClassName = function(className, parentElement) {
  var children = ($(parentElement) || document.body).getElementsByTagName('*');
  return $A(children).inject([], function(elements, child) {
    if (child.className.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
      elements.push(child);
    return elements;
  });
}

/*--------------------------------------------------------------------------*/

if (!window.Element) {
  var Element = new Object();
}

Object.extend(Element, {
//判断某个html元素是否可见，如果该对象可见，则放回true，否则返回flase
  visible: function(element) {
    return $(element).style.display != 'none';
  },

//控制传入的多个html元素整体显示。隐藏，即在显示和隐藏之间切换
  toggle: function() {
    for (var i = 0; i < arguments.length; i++) {
      var element = $(arguments[i]);
      Element[Element.visible(element) ? 'hide' : 'show'](element);
    }
  },

//隐藏多个HTML元素，可以多个参数
  hide: function() {
    for (var i = 0; i < arguments.length; i++) {
      var element = $(arguments[i]);
      element.style.display = 'none';
    }
  },
//显示多个html元素，可以多个参数
  show: function() {
    for (var i = 0; i < arguments.length; i++) {
      var element = $(arguments[i]);
      element.style.display = '';
    }
  },
//删除某个html元素
  remove: function(element) {
    element = $(element);
    element.parentNode.removeChild(element);
  },
//设定给定html元素的innerHTML属性
  update: function(element, html) {
    $(element).innerHTML = html.stripScripts();
    setTimeout(function() {html.evalScripts()}, 10);
  },
  
//返回某个HTML元素的height
  getHeight: function(element) {
    element = $(element);
    return element.offsetHeight;
  },

//返回某个HTML元素的所有CSS样式
//element：元素的id属性，或元素本身
  classNames: function(element) {
    return new Element.ClassNames(element);
  },
  
//判断是否某个HTML元素是否有制定的CSS样式
//element：元素的id属性，或元素本身
//className：是CSS样式的名字
  hasClassName: function(element, className) {
    if (!(element = $(element))) return;
    return Element.classNames(element).include(className);
  },
  
//addClassName（），用于为某个HTML元素增加CSS样式
//element：元素的id属性，或元素本身
//className：是CSS样式的名字
  addClassName: function(element, className) {
    if (!(element = $(element))) return;
    return Element.classNames(element).add(className);
  },

//removeClassName(),删除制定的HTML元素的CSS样式
//参数如上
  removeClassName: function(element, className) {
    if (!(element = $(element))) return;
    return Element.classNames(element).remove(className);
  },

  // removes whitespace-only text node children
//如果该元素的某个子元素只有文本值且文本值是空白的，则该子元素被删除
//element：元素的id属性，或元素本身
  cleanWhitespace: function(element) {
    element = $(element);
    for (var i = 0; i < element.childNodes.length; i++) {
      var node = element.childNodes[i];
      if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
        Element.remove(node);
    }
  },
//判断某个元素是否为空或者值包含空字符串
//element：元素的id属性，或元素本身
  empty: function(element) {
    return $(element).innerHTML.match(/^\s*$/);
  },

//将window滚动到对象所在的位置
  scrollTo: function(element) {
    element = $(element);
    var x = element.x ? element.x : element.offsetLeft,
        y = element.y ? element.y : element.offsetTop;
    window.scrollTo(x, y);
  },

//返回某个HTML元素的内联CSS样式的属性值，如果没有制定内联CSS样式，则返回null
  getStyle: function(element, style) {
    element = $(element);
    var value = element.style[style.camelize()];
    if (!value) {
      if (document.defaultView && document.defaultView.getComputedStyle) {
        var css = document.defaultView.getComputedStyle(element, null);
        value = css ? css.getPropertyValue(style) : null;
      } else if (element.currentStyle) {
        value = element.currentStyle[style.camelize()];
      }
    }

    if (window.opera && ['left', 'top', 'right', 'bottom'].include(style))
      if (Element.getStyle(element, 'position') == 'static') value = 'auto';

    return value == 'auto' ? null : value;
  },

//设置某个HTML元素的CSS样式
  setStyle: function(element, style) {
    element = $(element);
    for (name in style)
      element.style[name.camelize()] = style[name];
  },

//获取某个HTML元素的大小，返回值有两个属性，height和width
  getDimensions: function(element) {
    element = $(element);
    if (Element.getStyle(element, 'display') != 'none')
      return {width: element.offsetWidth, height: element.offsetHeight};

    // All *Width and *Height properties give 0 on elements with display none,
    // so enable the element temporarily
    var els = element.style;
    var originalVisibility = els.visibility;
    var originalPosition = els.position;
    els.visibility = 'hidden';
    els.position = 'absolute';
    els.display = '';
    var originalWidth = element.clientWidth;
    var originalHeight = element.clientHeight;
    els.display = 'none';
    els.position = originalPosition;
    els.visibility = originalVisibility;
    return {width: originalWidth, height: originalHeight};
  },

//将某个元素的内联CSS属性style.position设置为relative
  makePositioned: function(element) {
    element = $(element);
    var pos = Element.getStyle(element, 'position');
    if (pos == 'static' || !pos) {
      element._madePositioned = true;
      element.style.position = 'relative';
      // Opera returns the offset relative to the positioning context, when an
      // element is position relative but top and left have not been defined
      if (window.opera) {
        element.style.top = 0;
        element.style.left = 0;