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中的对象化编程
Jan 16 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
javascript 封装Date日期类实例详解
May 28 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 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
Apache设置虚拟WEB
2006/10/09 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
浅析node.js中close事件
2014/11/26 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
详解小白之KMP算法及python实现
2019/04/04 Python
浅析python redis的连接及相关操作
2019/11/07 Python
在pycharm中实现删除bookmark
2020/02/14 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
不用游标的SQL语句有哪些
2012/09/07 面试题
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
国际政治个人自荐信范文
2013/11/26 职场文书
2014年教师节活动总结
2014/08/29 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
社会实践单位意见
2015/06/05 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
python如何正确使用yield
2021/05/21 Python
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis