原生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学习之一个简易的日历控件
Mar 24 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
php开发工具有哪五款
2015/11/09 PHP
文本加密解密
2006/06/23 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
Python: glob匹配文件的操作
2020/12/11 Python
德国旅游网站:weg.de
2018/06/03 全球购物
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
医院门卫岗位职责
2013/12/30 职场文书
学校采购员岗位职责
2014/01/02 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
汽车促销活动方案
2014/03/31 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis