原生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 相关文章推荐
js特效,页面下雪的小例子
Jun 17 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
javascript基础知识讲解
Jan 11 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 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购物车实现代码
2011/10/10 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
python处理按钮消息的实例详解
2017/07/11 Python
python实现分页效果
2017/10/25 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
Python中的元组介绍
2019/01/28 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
什么是servlet链?
2014/07/13 面试题
二年级班级文化建设方案
2014/05/10 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
办公室个人总结
2015/02/28 职场文书
大客户经理岗位职责
2015/04/09 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
基于PyQt5制作一个群发邮件工具
2022/04/08 Python