原生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 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 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
体育彩票排列三组选三算法分享
2014/03/07 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
python中doctest库实例用法
2020/12/31 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
简历的自荐信
2013/12/19 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
入党介绍人考察意见
2015/06/01 职场文书
毕业典礼致辞
2015/07/29 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
整理Python中常用的conda命令操作
2021/06/15 Python
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS