原生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 相关文章推荐
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
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
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
javascript 特殊字符串
2009/02/25 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
如何快速上手Vuex
2017/02/14 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
vue组件发布到npm简单步骤
2017/11/30 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
使用Python 统计高频字数的方法
2019/01/31 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
广告学专业毕业生自荐信
2014/05/28 职场文书
影子教师研修方案
2014/06/14 职场文书
大学生就业自荐书
2014/06/16 职场文书
活动主持人开场白
2015/05/28 职场文书
2016年社区文体活动总结
2016/04/06 职场文书