jquery封装原生ajax,原生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封装的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。