原生js实现对Ajax的封装(模仿jquery)
2017-01-21 21:52
756 查看
本文转载自 http://www.jianshu.com/p/cd77f723990f
前言
众所周知,jquery在我们日常开发中的使用频率非常高,与js相比,我们省去了冗长的获取元素的代码,不用考虑一些麻烦的兼容问题,更加方便的动画实现,以及更加方便的方法调用让我们觉得jquery真是越用越舒服。但是jquery说到底还是对js的封装,我们不光要用的舒服还要深入理解其中的原理,这样才能更好的使用它。
首先我们封装的函数为了能实现可传入无限多个参数,在使用我们即将封装的函数时,需要使用对象进行传参,形式如下:
函数封装:
1.封装一个辅助函数,把传进来的对象拼接成url的字符串
2.封装Ajax
前言
众所周知,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); } } } } }
相关文章推荐
- 原生js实现对Ajax的封装(仿jquery)
- 原生js和jQuery的AJAX实现
- 原生js封装ajax,实现跨域请求
- 原生js方式实现ajax,并仿jquery方式简单调用
- 原生JS与jQuery对AJAX的实现
- Ajax(原生js实现、jQuery实现、跨域)
- 习惯了使用jQuery的ajax方法,看看原生js使用xmlhttpRequest实现ajax请求
- 原生js实现jQuery常用方法的封装
- 原生js与jquery实现ajax
- 【转】封装原生JS实现Ajax
- Jquery揭秘系列:ajax原生js实现详解(推荐)
- javascript - 封装原生js实现ajax
- JS原生方法实现jQuery的ready()
- 如何实现完美的表单验证?js? jquery? struts? ajax?
- 传统的JavaScript实现的Ajax 与 JQuery封装的Ajax
- 不借助jquery封装好的ajax,你能用js手写ajax框架吗
- 还在为需要ajax而导入jquery吗? 纯js封装ajax操作
- 不用JQuery,原生Javascript实现Ajax功能及相关知识点
- 用纯原生js实现jquery的ready函数(两种实现)
- 原生js实现jquery的getJSON方法