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

 更新时间:2016年10月04日 11:12:43   作者:邢泽川  
大家都知道jquery在我们日常开发中的使用频率非常高,但jquery说到底还是对js的封装,我们不能光会使用,只有知道了其中的远离才能更好的使用,所以这篇文章主要介绍的是原生js仿jquery实现对Ajax封装的方法。

前言

与js相比,jquery为我们省去了冗长的获取元素的代码,不用考虑一些麻烦的兼容问题,更加方便的动画实现,以及更加方便的方法调用让我们觉得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);
          }
        }
      }
   }  
}

总结

以上就是原生js仿jquery实现对Ajax封装的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

相关文章

  • javascript 浏览器检测代码精简版

    javascript 浏览器检测代码精简版

    javascript检测浏览器精简版,需要的朋友可以参考下。
    2010-03-03
  • D3.js进阶系列之CSV表格文件的读取详解

    D3.js进阶系列之CSV表格文件的读取详解

    D3.js支持从外部读取数据进行图形交互(Loading External Resources),支持的格式有CSV、txt、Html、tsv、xml文本文件和JSON XML数据结构,下面这篇文章主要给大家介绍了D3.js中CSV表格文件读取的相关资料,需要的朋友可以参考下。
    2017-06-06
  • JavaScript访问CSS属性的几种方式介绍

    JavaScript访问CSS属性的几种方式介绍

    要通过元素访问样式表,那么就应该先确定是哪个元素。直接访问样式表在该样式块里找相应的样式规则,最后在该样式规则里找相应的样式
    2014-07-07
  • 全面解析JavaScript中的valueOf与toString方法(推荐)

    全面解析JavaScript中的valueOf与toString方法(推荐)

    本文给大家介绍JavaScript中的valueOf与toString方法,valueOf() 方法可返回 Boolean 对象的原始值,toString() 方法可把一个逻辑值转换为字符串,并返回结果。对js中valueof和tostring相关知识感兴趣的朋友一起学习吧
    2016-06-06
  • JS提交form表单实例分析

    JS提交form表单实例分析

    这篇文章主要介绍了JS提交form表单的方法,结合实例形式简单分析了页面加载时提交表单及通过链接提交表单的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • Javascript 正则表达式校验数字的简单实例

    Javascript 正则表达式校验数字的简单实例

    下面小编就为大家带来一篇Javascript 正则表达式校验数字的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JS将秒换成时分秒实现代码

    JS将秒换成时分秒实现代码

    将秒换成时分秒的方法有很多,在本文将为大家介绍下,使用js的具体的实现思路,有需要的朋友可以参考下,希望对大家有所帮助
    2013-09-09
  • js拖拽功能实现代码解析

    js拖拽功能实现代码解析

    这篇文章主要为大家详细介绍了js实现拖拽功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JavaScript中日期函数的相关操作知识

    JavaScript中日期函数的相关操作知识

    日期函数是我们经常用到的知识点,下面通过本文给大家介绍JavaScript中日期函数的相关操作知识,非常不错,感兴趣的朋友一起学习吧
    2016-08-08
  • 跟我学习javascript的var预解析与函数声明提升

    跟我学习javascript的var预解析与函数声明提升

    跟我学习javascript的var预解析与函数声明提升,小编对var预解析与函数声明提升知识点也不甚了解,和大家一起学习本篇文章。
    2015-11-11

最新评论