js实现对ajax请求面向对象的封装

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
在js中使用ajax请求一般包含三个步骤:

  •               1、创建XMLHttp对象
  •               2、发送请求:包括打开链接、发送请求
  •               3、处理响应

在不使用任何的js框架的情况下,要想使用ajax,可能需要向下面一样进行代码的编写

<span style="font-size:14px;">var xmlHttp = xmlHttpCreate();//创建对象
xmlHttp.onreadystatechange = function(){//响应处理
  if(xmlHttp.readyState == 4){
    console.info("response finish");
    if(xmlHttp.status == 200){
       console.info("reponse success");
      console.info(xmlHttp.responseText);
    }
  }
}
xmlHttp.open("get","TestServlet",true);//打开链接 

xmlHttp.send(null);//发送请求 

function xmlHttpCreate() {
  var xmlHttp;
  try {
    xmlHttp = new XMLHttpRequest;// ff opera
  } catch (e) {
    try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");// ie
    } catch (e) {
      try {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) { 

      }
    }
  }
  return xmlHttp;
} 

console.info(xmlHttpCreate());</span> 

如果在比较复杂的业务逻辑里面使用这种ajax请求,会使得代码很臃肿,不方便重用,并且可以看到,可能在服务器响应成功后要处理一个业务逻辑操作,这个时候不得不把操作写在onreadystatechage方法里面。
为了方便代码的重用我们可以做出如下处理;

  •       1、服务器响应成功后,要处理的业务逻辑交给开发人员自己处理 
  •       2、对请求进行面向对象的封装  

处理之后看起来应该像下面这个样子:

<pre code_snippet_id="342814" snippet_file_name="blog_20140513_2_2489549" name="code" class="javascript">window.onload = function() {
  document.getElementById("hit").onclick = function() {
    console.info("开始请求");
    ajax.post({
        data : 'a=n',
        url : 'TestServlet',
        success : function(reponseText) {
          console.info("success : "+reponseText);
        },
        error : function(reponseText) {
          console.info("error : "+reponseText);
        }
    });
  }
} 

var ajax = {
  xmlHttp : '',
  url:'',
  data:'',
  xmlHttpCreate : function() {
    var xmlHttp;
    try {
      xmlHttp = new XMLHttpRequest;// ff opera
    } catch (e) {
      try {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");// ie
      } catch (e) {
        try {
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) { 

        }
      }
    }
    return xmlHttp;
  },
  post:function(jsonObj){
    ajax.data = jsonObj.data;
    ajax.url = jsonObj.url;
    //创建XMLHttp对象,打开链接、请求、响应
    ajax.xmlHttp = ajax.xmlHttpCreate();
    ajax.xmlHttp.open("post",ajax.url,true);
    ajax.xmlHttp.onreadystatechange = function(){
      if(ajax.xmlHttp.readyState == 4){
        if(ajax.xmlHttp.status == 200){
          jsonObj.success(ajax.xmlHttp.responseText);
        }else{
          jsonObj.error(ajax.xmlHttp.responseText);
        }
      }
    }
    ajax.xmlHttp.send(ajax.data);
  }
};

上述代码实现了类似jquery中的ajax操作,希望对大家的学习有所帮助。

(0)

相关推荐

  • JS面向对象编程详解

    序言 在JavaScript的大世界里讨论面向对象,都要提到两点:1.JavaScript是一门基于原型的面向对象语言 2.模拟类语言的面向对象方式.对于为什么要模拟类语言的面向对象,我个人认为:某些情况下,原型模式能够提供一定的便利,但在复杂的应用中,基于原型的面向对象系统在抽象性与继承性方面差强人意.由于JavaScript是唯一一个被各大浏览器支持的脚本语言,所以各路高手不得不使用各种方法来提高语言的便利性,优化的结果就是其编写的代码越来越像类语言中的面向对象方式,从而也掩盖了JavaSc

  • js面向对象的写法

    本文归纳了js面向对象的几种常见写法,分享给大家供大家参考,具体内容如下 1.工厂方式 var Circle = function() { var obj = new Object(); obj.PI = 3.14159; obj.area = function( r ) { return this.PI * r * r; } return obj; } var c = new Circle(); alert( c.area( 1.0 ) ); 2.比较正规的写法 function Circle

  • JS实现简单面向对象的颜色选择器实例

    本文实例讲述了JS实现简单面向对象的颜色选择器.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • 初探JavaScript 面向对象(推荐)

    类的声明 1. 构造函数 function Animal() { this.name = 'name' } // 实例化 new Animal() 2. ES6 class class Animal { constructor() { this.name = 'name' } } // 实例化 new Animal() 类的继承 1. 借助构造函数实现继承 原理:改变子类运行时的 this 指向,但是父类原型链上的属性并没有被继承,是不完全的继承 function Parent() { this

  • JS 面向对象之继承---多种组合继承详解

    这一次要讲 组合.原型式.寄生式.寄生组合式继承方式. 1. 组合继承:又叫伪经典继承,是指将原型链和借用构造函数技术组合在一块的一种继承方式. 下面来看一个例子: function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { alert(this.n

  • js实现对ajax请求面向对象的封装

    AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 在js中使用ajax请求一般包含三个步骤:               1.创建XMLHttp对象               2.发送请求:包括打开链接.发送请求               3.处理响应 在不使用任何的js框架的情况下,要想使用ajax,可能需要向下面一样进行代码的编写 <span style=&qu

  • 原生js实现对Ajax的封装(仿jquery)

    前言 众所周知,jquery在我们日常开发中的使用频率非常高,与js相比,我们省去了冗长的获取元素的代码,不用考虑一些麻烦的兼容问题,更加方便的动画实现,以及更加方便的方法调用让我们觉得jquery真是越用越舒服.但是jquery说到底还是对js的封装,我们不光要用的舒服还要深入理解其中的原理,这样才能更好的使用它. 首先我们封装的函数为了能实现可传入无限多个参数,在使用我们即将封装的函数时,需要使用对象进行传参,形式如下: //data作为参数传入我们下面封装的函数 var data = {

  • 原生js仿jquery实现对Ajax的封装

    前言 与js相比,jquery为我们省去了冗长的获取元素的代码,不用考虑一些麻烦的兼容问题,更加方便的动画实现,以及更加方便的方法调用让我们觉得jquery真是越用越舒服.但是jquery说到底还是对js的封装,我们不光要用的舒服还要深入理解其中的原理,这样才能更好的使用它. 首先我们封装的函数为了能实现可传入无限多个参数,在使用我们即将封装的函数时,需要使用对象进行传参,形式如下: //data作为参数传入我们下面封装的函数 var data = { //数据 user:"yonghu1&qu

  • JS实现对json对象排序并删除id相同项功能示例

    本文实例讲述了JS实现对json对象排序并删除id相同项功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net json排序并删除ID相同项</title> </head> <body> <script type="text/javascript&

  • JS 拦截全局ajax请求实例解析

    你是否有过下面的需求:需要给所有ajax请求添加统一签名.需要统计某个接口被请求的次数.需要限制http请求的方法必须为get或post.需要分析别人网络协议等等,那么如何做?想想,如果能够拦截所有ajax请求,那么问题就会变的很简单!

  • Struts2实现对action请求对象的拦截操作方法

    Struts2的核心功能是action,对于开发人员来说,使用Struts2主要就是编写action,action类通常都要实现com.opensymphony.xwork2.Action接口,并实现该接口中的execute()方法. 该方法如下:   public String execute() throws Exception Struts2并不是要求所有编写的action类都要实现Action接口,也可以直接编写一个普通的Java类作为action,只要实现一个返回类型为String的无

  • js实现对table动态添加、删除和更新的方法

    本文实例讲述了js实现对table动态添加.删除和更新的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999

  • js实现对table的增加行和删除行的操作方法

    如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因

    看到别人写的JS,ajax请求地址后加随机参数,比如XXXX?t= + new Date().getTime(). 一开始搞不懂为什么,网上查了资料,原因是防止浏览器缓存. 浏览器为了提高用户访问同一页面的速度,会对页面数据进行缓存.当url请求地址不变时, 有时候会导致浏览器不发送请求,直接从缓存中读取之前的数据. 如果数据改变了,而没加随机数,读取的数据会跟之前一样. 加上随机数,就是欺骗浏览器url改变了,会每次都向服务器发送请求而不去读缓存

  • jquery和js实现对div的隐藏和显示方法

    jQuery对div的显示和隐藏: 显示: 复制代码 代码如下: $("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 复制代码 代码如下: style="visibility: none;" document.getElementById("typediv1").style.vi

随机推荐