原生js仿jquery实现对Ajax的封装


Posted in Javascript onOctober 04, 2016

前言

与js相比,jquery为我们省去了冗长的获取元素的代码,不用考虑一些麻烦的兼容问题,更加方便的动画实现,以及更加方便的方法调用让我们觉得jquery真是越用越舒服。但是jquery说到底还是对js的封装,我们不光要用的舒服还要深入理解其中的原理,这样才能更好的使用它。

首先我们封装的函数为了能实现可传入无限多个参数,在使用我们即将封装的函数时,需要使用对象进行传参,形式如下:

//data作为参数传入我们下面封装的函数
var data = {
       //数据
       user:"yonghu1",
       pass:'12345',
       age:18,
       //回调函数
       success:function (data){
        alert(data);
       }
      }

函数封装:

1、封装一个辅助函数,把传进来的对象拼接成url的字符串

function toData(obj){
  if (obj == null){
    return obj;
  }
  var arr = [];
  for (var i in obj){
    var str = i+"="+obj[i];
    arr.push(str);
  }
  return arr.join("&");
}

2、封装Ajax

function ajax(obj){
  //指定提交方式的默认值
  obj.type = obj.type || "get";
  //设置是否异步,默认为true(异步)
  obj.async = obj.async || true;
  //设置数据的默认值
  obj.data = obj.data || null;
  if (window.XMLHttpRequest){
    //非ie
    var ajax = new XMLHttpRequest();
  }else{
    //ie
    var ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }
  //区分get和post
  if (obj.type == "post"){
    ajax.open(obj.type,obj.url,obj.async);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    var data = toData(obj.data);
    ajax.send(data);
  }else{
    //get test.php?xx=xx&aa=xx
    var url = obj.url+"?"+toData(obj.data);
    ajax.open(obj.type,url,obj.async);
    ajax.send();
  }

  ajax.onreadystatechange = function (){
    if (ajax.readyState == 4){
        if (ajax.status>=200&&ajax.status<300 || ajax.status==304){
          if (obj.success){
            obj.success(ajax.responseText);
          }
        }else{
          if (obj.error){
            obj.error(ajax.status);
          }
        }
      }
   }  
}

总结

以上就是原生js仿jquery实现对Ajax封装的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
Angularjs 基础入门
Dec 26 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
json定义及jquery操作json的方法
Oct 03 #Javascript
javascript中异常处理案例(推荐)
Oct 03 #Javascript
switch语句的妙用(必看篇)
Oct 03 #Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 #Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 #Javascript
JavaScript对象创建模式实例汇总
Oct 03 #Javascript
js实现的光标位置工具函数示例
Oct 03 #Javascript
You might like
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
js实现瀑布流的三种方式比较
2020/06/28 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
python二叉树的实现实例
2013/11/21 Python
Python文件去除注释的方法
2015/05/25 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
护理实习自我鉴定
2013/12/14 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
商场收银员岗位职责
2015/04/07 职场文书
首席执行官观后感
2015/06/03 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
青年教师听课心得体会
2016/01/15 职场文书