XMLHTTP对象封装技术

南烟J

南烟J

2016-02-19 21:46

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

      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);   
   }

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  最后不得不说的是中文编码问题,prototype对传递的参数都进行了编码转换工作,每个传递值通过encodeURIComponent 进行了处理.编码会被转换成utf-8,在后台获取request时,应该统一使用request.setCharacterEncoding("UTF-8")对request设置编码,而不必管页面的编码格式是什么.如果使用post方法进行传递数据,则会自动执行:
      request.setHeader('Content-type','application/x-www-form-urlencoded').确保传递数据编码格式的正确.

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  http://blog.csdn.net/lemonfamily/archive/2007/01/30/1498248.aspx

展开更多 50%)
分享

猜你喜欢

XMLHTTP对象封装技术

Web开发
XMLHTTP对象封装技术

XMLHTTP 对象及其方法

电脑网络
XMLHTTP 对象及其方法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

XMLHTTP 对象及其方法简介

电脑网络
XMLHTTP 对象及其方法简介

用XMLHTTP对象Post表单

Web开发
用XMLHTTP对象Post表单

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

XMLHTTP对象应用开发初体验

Web开发
XMLHTTP对象应用开发初体验

Java数据对象技术JDO

Java JAVA基础
Java数据对象技术JDO

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

如何向Win10预览版ISO镜像中添加语言包?

如何向Win10预览版ISO镜像中添加语言包?

VB中文件操作的两种方式

VB中文件操作的两种方式
下拉加载更多内容 ↓