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


Posted in Javascript onJanuary 08, 2016

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操作,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
JSONP基础知识详解
Mar 19 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 Javascript
javascript弹性运动效果简单实现方法
Jan 08 #Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 #Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 #Javascript
jquery实现简单的遮罩层
Jan 08 #Javascript
javascript多物体运动实现方法分析
Jan 08 #Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 #Javascript
javascript匀速运动实现方法分析
Jan 08 #Javascript
You might like
pw的一个放后门的方法分析
2007/10/08 PHP
php获取mysql数据库中的所有表名的代码
2011/04/23 PHP
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
深入浅出php socket编程
2015/05/13 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
php中的异常和错误浅析
2017/05/03 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
详解Django的CSRF认证实现
2018/10/09 Python
python标记语句块使用方法总结
2019/08/05 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
优秀经理事迹材料
2014/02/01 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis