javascript实现简单的ajax封装示例


Posted in Javascript onDecember 28, 2016

本文实例讲述了javascript实现简单的ajax功能封装。分享给大家供大家参考,具体如下:

function ajax(obj){
    var xhr = (function (){//获取xhr对象,为了兼容ie6所以进行了重新封装
  if(typeof XMLHttpRequest !='undefined') {
    return new XMLHttpRequest();
  }else if(typeof ActiveXObject !='undefined') {
    var version = [
      'MSXML2.XMLHttp6.0',
      'MSXML2.XMLHttp3.0',
      'MSXML2.XMLHttp'
    ]
    for(var i in version) {
      try{
        return new ActiveXObject(version[i]);
        break;
      }catch(e){
      //捕获错误进行然后跳出继续循环
      }
    }
  }else{
    throw new Error("您的系统或浏览器不支持XHR对象!");
  }
})();//获取xhr对象
    //默认true开启异步(异步和同步的主要区别是异步在请求的时候后面的脚本可以继续运行,同步的话必须运行完ajax然后才能运行其后面的脚本)
    if(obj.async === true) {
      xhr.onreadystatechange = function() {
        if(xhr.readyState ==4) {
          callback(xhr.responseText);
        }
      }
    }
  var arr=[] ;
  for(var i in obj.data) {arr.push(encodeURIComponent(i)+'='+encodeURIComponent(obj.data[i]));}
  obj.data = arr.join('&');  //这一步要注意一下,不管是get/post 方式提交都必须要对传进来的obj.data进行格式化 最后转化成的格式name=zhang&age=26&wedding=no
  if(obj.method === 'get') {//通过get方式请求的
      obj.url = obj.url.indexOf('?') ==-1 ? obj.url+'?rand='+Math.random()+'&'+obj.data : obj.url+'rand='+Math.random()+'&'+obj.data;
      xhr.open(obj.method,obj.url,obj.async);
      xhr.send(null);
  }
  if(obj.method === 'post') {//通过post方式请求的
      obj.url =obj.url+'?rand='+Math.random();
      xhr.open(obj.method,obj.url,obj.async);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//这是对请求头部的类型重设,post的请求必须要重设;
      xhr.send(obj.data);
  }
  //false开启同步
  if(obj.async === false) {callback(xhr.responseText);}
  function callback (returnTxt) {
      if(xhr.status == 200){
        obj.success(returnTxt);
      }else {
      alert('获取数据错误!错误代号:' + xhr.status + ',错误信息:' + xhr.statusText);
    }
  }
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
JQuery教学之性能优化
May 14 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 #Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 #Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 #Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 #Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 #Javascript
基于JS设计12306登录页面
Dec 28 #Javascript
JS实现搜索框文字可删除功能
Dec 28 #Javascript
You might like
php socket客户端及服务器端应用实例
2014/07/04 PHP
php树型类实例
2014/12/05 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
快速创建python 虚拟环境
2020/11/28 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
体育教师自荐信范文
2013/12/16 职场文书
三八妇女节标语
2014/10/09 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python