原生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学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
vue实现分页组件
Jun 16 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
小程序如何构建骨架屏
May 29 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
php常用字符函数实例小结
2016/12/29 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
vue接口请求加密实例
2020/08/11 Javascript
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
如何在Django项目中引入静态文件
2019/07/26 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
《开国大典》教学反思
2014/04/19 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
重阳节简报
2015/07/20 职场文书
总经理聘用协议书
2015/09/21 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书