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 location几个方法小姐
Jul 09 Javascript
jQuery 选择器理解
Mar 16 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 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高级OOP技术演示
2009/08/27 PHP
php中JSON的使用方法
2015/04/30 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
深入理解JavaScript 函数
2016/06/06 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
Python使用MD5加密字符串示例
2014/08/22 Python
python基于socket实现网络广播的方法
2015/04/29 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
python实现复制大量文件功能
2019/08/31 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
浅析Python __name__ 是什么
2020/07/07 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
毕业生的求职信范文分享
2013/12/04 职场文书
预备党员的自我评价
2014/03/12 职场文书
安全承诺书范文
2014/03/26 职场文书
最美家庭活动方案
2014/08/31 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
企业2014年度工作总结
2014/12/10 职场文书
泰山导游词
2015/02/02 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android