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 相关文章推荐
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
javascript求日期差的方法
Mar 02 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
vue环境搭建简单教程
Nov 07 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 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新手上路(六)
2006/10/09 PHP
php实现word转html的方法
2016/01/22 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
点击进行复制的JS代码实例
2013/08/23 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
windows系统下Python环境搭建教程
2017/03/28 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
护士自我鉴定范文
2013/10/06 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
洗车工岗位职责
2014/03/15 职场文书
校庆活动方案
2014/03/31 职场文书
申论倡议书范文
2014/05/13 职场文书
股东授权委托书范文
2014/09/13 职场文书
实习生工作证明范本
2014/09/14 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
优秀团员自我评价
2015/03/10 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技