旗下导航:搜·么
当前位置:网站首页 > XML教程 > 正文

详解XMLHTTP对象封装手艺的示例代码【XML教程】,XML,HTTP,对象封装

作者:搜教程发布时间:2019-11-27分类:XML教程浏览:74评论:0


导读:ajax手艺的完成重要依赖于xmlhttprequest,但我们在挪用其来举行异步数据的传输时,由于xmlhttp是个短线历程(处置惩罚事宜完成后就烧毁)假如不对该对象举行包装处置...
ajax手艺的完成重要依赖于xmlhttprequest,但我们在挪用其来举行异步数据的传输时,由于xmlhttp是个短线历程(处置惩罚事宜完成后就烧毁)假如不对该对象举行包装处置惩罚的话,就不能不在须要挪用的处所从新构建xmlhttprequest,每次挪用都要写一大段的代码,着实不是个好办法。幸亏如今许多开源的ajax框架都供应了对xmlhttp封装的计划。这里以ajaxtags自带的prototype-1.4.0.js为母版,来看看怎样将xmlhttp对象封装成一个可复用的要领。

在prototype.js中,起首定义了一个变量:Ajax

  var Ajax = {
    getTransport: function() {
     return Try.these(
      function() {return new ActiveXObject('Msxml2.XMLHTTP')},
      function() {return new ActiveXObject('Microsoft.XMLHTTP')},
      function() {return new XMLHttpRequest()}
    ) || false;
  },
   
   activeRequestCount: 0
}

变量返回了一个xmlhttprequest,能够看到,假如我们挪用了Ajax.getTransport(),每次都邑返回一个新的xmlhttprequest对象。

在Ajax变量中定义了一个基本要领Ajax.Base和该基本要领的原型(初始时,每一个剧本要领默许都有个空的原型,该原型会继续Object的原型,假如我们在Object中转变了原型,则一切的剧本要领都邑被转变。) 该基本要领被Ajax.Request所继续,注重的是,假如在Ajax.Request中添补了继续的原型的同名要领或变量,则会完成重载。

Ajax.Base原型中最重要的是setOptions要领,过会我们就会用到。

setOptions: function(options) {
   this.options = {
    method:    'post',
    asynchronous: true,
    parameters:  ''
   }

prototype中对request是经由过程定义Ajax.Request原型(Ajax.Request.prototype)来完成的。但我们并不能直接对Ajax.Request举行挪用,重要原因是Ajax.Request并没有供应一个一致处置惩罚的历程。而且我们能够须要经由过程request 再获得response。(试想一下,客户那里发出一条信息,都一直没与收到复兴,那是会让人觉得很恼火的事~),prototype一样为我们封装好了resoponse(Ajax.Responders),但二者都是互相自力的,怎样把他们举行整合呢?

在 prototype中给我们供应了两个计划,一个是Ajax.Updater,另一个是Ajax.PeriodicalUpdater,两个共同点都是必需传入3个参数:

container:

response数据要转达的位置,该位置经由过程html标签的id举行定义,比方你要把返回的数据输出到html中的某个<div>中,则只要把container改成该id的值就能够了。假如找不到该container,则会发作剧本毛病。

url:

request要求要通报的目的地。该目的地应当是个servlet或jspservlet,由于request对象只能被servlet中的do***要领自动猎取。

options:

构造应当与上面Ajax.Base定义的setOptions()中的option构造雷同,假如为空或不写,则采纳 Ajax.Base定义的初始值(没有通报任何参数时运用)。

二者的区别在与Ajax.Updater返回给container的是完整的responseText,只要在responseText完整获得又没发作非常时才会把内容写到container内里,而PeriodicalUpdater在猎取responseText时,不论是不是已完整获得,就把内容填进container,直到发作非常或完整获得responseText。大多数状况应当运用第一种要领,由于第一种要领在发作非常时会把非常信息显现在container内里,而第二种就不肯定了。

既然已把xmlhttp封装好了,我们只须要设置好前面所说的3个参数就能够了,要注重的是,设置options参数,肯定要根据base中的options构造举行设置,假如我们运用post要领,还能够在opitons中设置postBody属性,把要通报的queryString 放到body中,一个运用post要领举行通报的剧本例子以下:

/*表单提交用post要领*/
function doRequest(container,paraments,url){
   var options ={
    method:    'post',
    asynchronous: true,
    postBody: paraments
   };
   new Ajax.Updater(container,url,options);  
}

末了不能不说的是中文编码题目,prototype对通报的参数都举行了编码转换事情,每一个通报值经由过程encodeURIComponent 举行了处置惩罚.编码会被转换成utf-8,在背景猎取request时,应当一致运用request.setCharacterEncoding("UTF-8")对request设置编码,而没必要管页面的编码花样是什么.假如运用post要领举行通报数据,则会自动实行:

request.setHeader('Content-type','application/x-www-form-urlencoded').确保通报数据编码花样的准确.

以上就是详解XMLHTTP对象封装手艺的示例代码的细致内容,更多请关注ki4网别的相干文章!

标签:XMLHTTP对象封装


欢迎 发表评论: