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


Posted in Javascript onJanuary 22, 2017

前言

众所周知,jquery在我们日常开发中的使用频率非常高,与js相比,我们省去了冗长的获取元素的代码,不用考虑一些麻烦的兼容问题,更加方便的动画实现,以及更加方便的方法调用让我们觉得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);
          }
        }
      }
   }  
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
js遍历json的key和value的实例
Jan 22 #Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 #Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 #Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 #Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 #Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 #Javascript
js实现图片360度旋转
Jan 22 #Javascript
You might like
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
windows下ipython的安装与使用详解
2016/10/20 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
python生成器推导式用法简单示例
2019/10/08 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
Python如何实现邮件功能
2020/05/27 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
python excel和yaml文件的读取封装
2021/01/12 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
实习协议书范本
2014/04/22 职场文书
开发房地产协议书
2014/09/14 职场文书
2014年社区工作总结
2014/11/18 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
python基础之爬虫入门
2021/05/10 Python