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 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
js 小贴士一星期合集
Apr 07 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 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
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
jQuery实现图片下载代码
2019/07/18 jQuery
JavaScript常用工具函数库汇总
2020/09/17 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
python 元组的使用方法
2020/06/09 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
J2EE包括哪些技术
2016/11/25 面试题
大学生个人简历中的自我评价
2013/12/27 职场文书
出纳员岗位职责
2014/03/13 职场文书
记账会计岗位职责
2014/06/16 职场文书
2014年公务员工作总结
2014/11/18 职场文书
简历自我评价优缺点
2015/03/11 职场文书
放飞理想主题班会
2015/08/14 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python