原生js实现对Ajax的封装(仿jquery)
作者:邢泽川 时间:2024-04-22 12:57:06
前言
众所周知,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,封装
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Pyinstaller打包Pytorch框架所遇到的问题
2023-02-17 06:26:58
![](https://img.aspxhome.com/file/2023/5/134765_0s.png)
基于Python实现扑克牌面试题
2023-11-21 18:05:21
Pycharm无法打开双击没反应的问题及解决方案
2021-09-06 07:34:30
![](https://img.aspxhome.com/file/2023/4/90574_0s.png)
使用Python爬虫爬取小红书完完整整的全过程
2022-03-23 05:12:44
![](https://img.aspxhome.com/file/2023/4/114534_0s.png)
Python3多线程版TCP端口扫描器
2021-07-13 21:25:45
python实现上传文件到linux指定目录的方法
2023-02-05 03:03:56
![](https://img.aspxhome.com/file/2023/9/120349_0s.png)
Go的固定时长定时器和周期性时长定时器
2023-06-27 12:44:23
日常收集整理php正则表达式(超常用)
2024-05-03 15:35:49
Python获取一个用户名的组ID过程解析
2021-09-04 15:40:05
mysql unix准换时间格式查找指定日期数据代码
2024-01-16 00:35:24
python 实现数组list 添加、修改、删除的方法
2021-10-21 16:27:34
Vue中watch使用方法详解
2024-04-30 10:40:45
![](https://img.aspxhome.com/file/2023/4/130094_0s.gif)
JavaScript入门教程(4) js浏览器对象
2024-06-07 16:00:52
详解JavaScript 高阶函数
2024-04-18 09:30:14
php在windows环境下获得cpu内存实时使用率(推荐)
2023-11-15 04:44:23
Python中的defaultdict模块和namedtuple模块的简单入门指南
2022-01-21 07:10:20
sql server2008调试存储过程的完整步骤
2024-01-22 04:12:57
![](https://img.aspxhome.com/file/2023/1/125701_0s.png)
极力推荐10个短小实用的JavaScript代码段
2024-06-05 09:12:40
python 的生产者和消费者模式
2021-09-18 07:19:45
![](https://img.aspxhome.com/file/2023/7/115497_0s.png)
python使用pymongo与MongoDB基本交互操作示例
2023-11-27 03:33:19
![](https://img.aspxhome.com/file/2023/5/88025_0s.png)