国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

Ajax: Java BluePrints 和 Rails對(duì)它的封裝

Sun的Java BluePrints上梅蘭竹菊四個(gè)例子 ，示范了Ajax的標(biāo)準(zhǔn)用法--Refreshing Data 、Realtime FoRM Validation 、Auto-completion 、Progress Bar ，俱是Ajax最主要的應(yīng)用。
  不過Blue Prints只示范了標(biāo)準(zhǔn)的做法。而Rails則很變態(tài)的自己做了一個(gè)prototype.conio.net/">面向對(duì)象的Javascript庫(kù)--Prototype。對(duì)Ajax的封裝就是在這上面作的，還比Blue Prints多了一點(diǎn)點(diǎn)想象力，提供了多一點(diǎn)點(diǎn)的擴(kuò)展。
  但是可封裝的代碼不是很多，OO帶來的重用優(yōu)勢(shì)不很明顯，而OO的javascript又太難看懂，所以準(zhǔn)備參考它的做法，改成普通的javascript形式。

 

Java BluePrints里的標(biāo)準(zhǔn)Java Script：

<script type="text/javascript">
var req;  //全局的XMLhttp對(duì)象

//初始化xmlhttp對(duì)象，兼容IE和FIREFOX
function initRequest()
{
  if (window.XMLHttpRequest) {
  req = new XMLHttpRequest();
  } else if (window.ActiveXobject) {
  req = new ActiveXObject("  }
}

//執(zhí)行遠(yuǎn)程訪問的主函數(shù)
function checkForMessage() {
  var url = "foo.do";
  initRequest();
  req.onreadystatechange = processReqChange;  //注冊(cè)CallBack函數(shù)
  req.open("GET", url, true);
}

//遠(yuǎn)程訪問結(jié)束之后的處理函數(shù)
function processReqChange() {
  if (req.readyState == 4) {
  if (req.status == 200) {
  var item = req.responseXML.getElementsByTagName("message")[0];
  window.document.getElementById("td1").innerText = item;
  } else {
  window.status = "No Update  ";
  }
  }
}

  老郁抱怨說幾乎沒有封裝，其實(shí)要封裝也容易，把checkForMessage()改為接受url和callback funcion函數(shù)指針這兩個(gè)參數(shù)的通用函數(shù)，和initRequest()一起放進(jìn)公共文件后，頁(yè)面里就不需要再寫xmlhttp有關(guān)的東西，只專心寫call back處理函數(shù)了，但這樣子也沒省幾行代碼嘛。
  其實(shí)，Ajax里面最重要的部分是分析responseXML并加以應(yīng)用的函數(shù)，Blue Prints里面的代碼還是挺值得參考的。
  如果能把這個(gè)處理也根據(jù)這有數(shù)的幾種應(yīng)用封裝就好了，但這個(gè)好像全世界都沒有什么想象力。Rails好像有一點(diǎn)，但也只是一點(diǎn)。

Rails的封裝
1.OO的JavaScript庫(kù)--Prototype
  Rails閑著沒事，自己做了一個(gè)面向?qū)ο蟮腏avaScript庫(kù)--Prototype,  實(shí)在太變態(tài)了.
  而且通過JavaScript Helper taglib作了進(jìn)一步封裝，如下:(為方便閱讀，對(duì)代碼稍有簡(jiǎn)化) 

  //遠(yuǎn)程后訪問foo.do，完成后調(diào)用processReqChange

 <%= link_to_remote  :complete => "processReqChange(request)", :url => {"foo.do"} %> 

 而頁(yè)面實(shí)際生成的代碼是這樣的，:

 <a onclick="new Ajax.Request(‘list.do‘, {onComplete:function(request){processReqChange(request)}"/>


2. 那點(diǎn)更多的想象力
 
  他的一點(diǎn)想象力就是能夠自動(dòng)把某個(gè)element的innerHtml update成responseText

  使用link_to_remote tag的寫法,完成后直接把responseText更改myDiv的inner Text:

  <%= link_to_remote :update => "myDiv", :url => {"foo.do" } %>

 實(shí)際的頁(yè)面代碼:

 <a onclick="new Ajax.Updater(‘myDIv‘, ‘foo.do);"/>
 

3.更多的事件注冊(cè)
  除了Complete事件，Rails還支持你注冊(cè)loading和interactive事件。

4.Form的不刷新頁(yè)面的透明提交
  Rails還提供form_remote_tag的封裝,代碼如下:
  <%=form_remote_tag :url =>{ "foo.do"}%>

 實(shí)際生成的JavaScript:

  <form onsubmit="new Ajax.Request(‘foo.do‘, {parameters:Form.serialize(this)});">
 
 默認(rèn)把form的所有input框都提交了.

5.最后,奇文共欣賞,疑義相與析, 這個(gè)可愛的 OO的可繼承的javascpit 庫(kù)
（可惜作者說沒有一個(gè)好的工具能幫它注釋這種OO型的代碼并生成JSDoc,也就沒寫文檔了)

  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.Base = function() {};
Ajax.Base.prototype = {
  setOptions: function(options) {
  this.options = {
  method:  ‘post‘,
  asynchronous: true,
  parameters:  ‘‘
  }.extend(options || {});
  }
}

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.transport.open(this.options.method, url, true);
 
  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‘,
  ‘a(chǎn)pplication/x-www-form-urlencoded‘);
  }
 
  this.transport.send(this.options.method == ‘post‘ ?
  this.options.parameters + ‘&_=‘ : null);
 
  } catch (e) {
  } 
  },
 
  onStateChange: function() {
  var readyState = this.transport.readyState;
  if (readyState != 1)
  this.respondToReadyState(this.transport.readyState);
  },
 
  respondToReadyState: function(readyState) {
  var event = Ajax.Request.Events[readyState];
  (this.options[‘on‘ + event] || Ajax.emptyFunction)(this.transport);
  }
});

Ajax.Updater = Class.create();
Ajax.Updater.prototype = (new Ajax.Base()).extend({
  initialize: function(container, url, options) {
  this.container = $(container);
  this.setOptions(options);
 
  if (this.options.asynchronous) {
  this.onComplete = this.options.onComplete;
  this.options.onComplete = this.updateContent.bind(this);
  }
 
  this.request = new Ajax.Request(url, this.options);
 
  if (!this.options.asynchronous)
  this.updateContent();
  },
 
  updateContent: function() {
  if (this.options.insertion) {
  new this.options.insertion(this.container,
  this.request.transport.responseText);
  } else {
  this.container.innerHTML = this.request.transport.responseText;
  }

  if (this.onComplete) {
  setTimeout((function() {this.onComplete(this.request)}).bind(this), 10);
  }
  }
});

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。