在之前了解并学习了Ajax的基础知识后,有些朋友可能觉得零碎的Ajax学起来有些繁琐,用起来也不太方便.那么我们为什么不能用函数将它封装起来,在我们需要它的时候便直接使用呢？那今天就让我们学习下Ajax的函数封装吧

Ajax封装

问题:发送一次请求代码过多,发送多次请求代码冗余且重复
解决方案:将请求代码封装到函数中,发送请求时调用函数即可

function ajax(options){// 存储默认值var defaults ={type:'get',url:'',data:{},header:{'Content-Type':'application/json'},success: function(){},error:function(){}}// 使用options对象中的属性覆盖defaults对象中的属性Object.assign(defaults,options);// 创建ajax对象var xhr = new XMLHttpRequest();// 拼接请求参数的变量var params = '';// 循环用户传递进来的对象格式参数for(var attr in defaults.data){   // 将参数转换为字符串格式params += attr + '=' + defaults.data[attr] + '&';}params = params.substring(0,params.length);console.log(params);if(defaults.type == 'get'){defaults.url = defaults.url + '?'+params;}// 配置ajax对象xhr.open(defaults.type,defaults.url);// 发送请求 if(defaults.type == 'post'){   // 设置请求参数的类型var contentType = defaults.header['Content-Type'];xhr.setRequestHeader('Content-Type',contentType);if(contentType == 'application/json'){xhr.send(JSON.stringify(defaults.data));}else{xhr.send(params);}   }else{//发送请求xhr.send();}// 监听xhr对象下面的onload事件// 当xhr对象接受完相应数据后触发xhr.onload = function(){// xhr.getResponseHeader()// 获取响应头中的数据var cotn = xhr.getResponseHeader('Content-Type');var  responseText = xhr.responseText;if(cotn.includes('application/json')){responseText = JSON.parse(responseText);}// 当http状态码为200时if(xhr.status == 200){   // 请求成功 调佣处理成功情况的函数defaults.success(responseText,xhr);}else{// 请求失败 调佣处理失败情况的函数defaults.error(responseText,xhr);}}·}/*请求参数要考虑的问题:1. 请求参数位置的问题将请求参数传递到ajax函数内部,在函数内部根据请求方式的不同将请求参数放置在不同的位置get放在请求地址的后面post放在send方法中2.请求参数格式的问题application/x-www-form-urlencodededapplication/json1. 传递对象数据类型对于函数的调用者更加友好2. 在函数内部对象数据类型转换为字符串数据类型更加方便*/

如果有朋友们觉得学习本篇文章没有太大的收获,想要了解更多的话,可以上b站获得更清晰明了的视频讲解哦ajax学习（众所周知,b站是一个学习网站）

Ajax封装2.0版相关推荐

data后缀文件解码_封装ThinkPHP6.0通用文件上传
php中文网最新课程每日17点准时技术干货分享本文为php中文网认证作者:"wpj"投稿,欢迎加入php中文网有偿投稿计划! 本文实例讲述了封装ThinkPHP6通用文件上传方 ...
java原生封装_[Java教程]原生AJAX封装
[Java教程]原生AJAX封装 0 2016-07-12 13:00:08 回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出!1 var ajaxHelper = { 2 ...
Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
MvcPager 免费开源分页控件3.0版发布！
MvcPager 3.0版在原2.0版的基础上进行了较大的升级,对MvcPager脚本插件重写并进行了大量优化.修复了部分bug并新增了客户端Javascript API等功能,使用更方便,功能更强大 ...
JS弹窗确认Ajax封装方法
2019独角兽企业重金招聘Python工程师标准>>> 代码示例: var modification = {method: function () {//开始发送数据 $.post ...
《2023中国企业数智化转型升级服务全景图/产业图谱1.0版》重磅发布
‍ 数据猿出品本次"数据猿2023年度三大媒体策划活动--<2023企业数智化转型升级服务全景图/产业图谱1.0版>"的发布,是数据猿在2022年3.0版本的基础上, ...
Javascript ajax封装并重载
看来我要把博客给弄起来,发现整天敲代码,有时候跟人沟通都成问题了,要多写点东西,整理整理忙乱的思绪.最近有幸接触WEB前端页面,看到项目里大伙写的JS代码头疼不已,而本人很懒又有严重的代码洁癖,一点点 ...
一步一步在 Windows 10 用 visual studio 2019 编译 zmqpp 4.2.0 版
伸手党可以到 zmqpp库windows编译结果-C++文档类资源-CSDN下载去下载 zmqpp 是 libzmq 的高级 C++ 封装,不但提供了针对 libzmq C 接口的 C++ 封装,还 ...
晨枫U盘维护工具V2.0版(转)
-- 珠海晨枫工作室制作教程:HDD模式 | ZIP模式 | U+写入模式 | 本地硬盘安装 | 重装封装光盘[光盘版/量产] 更新说明: 2009.1.10: 1.增加支持更多的启动模式,现在支持 ...

Ajax封装2.0版

Ajax封装

Ajax封装2.0版相关推荐

最新文章

热门文章