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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
IE php关于强制下载文件的代码
Aug 23 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
Vue实现手机计算器
Aug 17 Javascript
vue router 动态路由清除方式
May 25 Vue.js
前端面试知识点锦集(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中PDO的错误处理
2011/09/04 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
python发布模块的步骤分享
2014/02/21 Python
python进阶教程之动态类型详解
2014/08/30 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
python3爬取torrent种子链接实例
2020/01/16 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
判断单链表中是否存在环
2012/07/16 面试题
销售找工作求职信
2013/12/20 职场文书
英语系本科生求职信
2014/07/15 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
实习生辞职信范文
2015/03/02 职场文书
刘胡兰观后感
2015/06/16 职场文书
python数字图像处理之图像的批量处理
2022/06/28 Python