js怎么拿到封装好的ajax,原生js实现对Ajax的封装(仿jquery)

前言

众所周知,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);

}

}

}

}

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值