原生JS封装自己的AJAX

封装完写了个回调地狱，真是吐了，写不动了，分享一下代码吧

//封装ajax函数
function ajax(obj) {//指定提交方式的默认值obj.type = obj.type || 'get';//设置是否为异步，默认值为异步obj.async = obj.async || true;//设置数据的默认值obj.data = obj.data || null;//根据不同的浏览器创建XHR对象let xhr = null;if (window.XMLHttpRequest) {//非IE浏览器xhr = new XMLHttpRequest();} else {//IE浏览器xhr = new ActiveXObject('Microsoft.XMLHTTP');}//区分get和post，发送HTTP请求if (obj.type === 'post') {xhr.open(obj.type, obj.url, obj.async);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");let data = toData(obj.data);xhr.send(data);} else {let url = obj.url + '?' + toData(obj.data);xhr.open(obj.type, url, obj.async);xhr.send();}//接收返回来的数据xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {if (obj.success) {obj.success(JSON.parse(xhr.responseText));}}} else {if (obj.error) {obj.error(xhr.status);}}}
}//辅助函数，把传进来的对象拼接成url的字符串
function toData(obj) {if (obj === null) {return obj;}let arr = [];for (let i in obj) {let str = i + '=' + obj[i];arr.push(str);}return arr.join('&');
}

写不动是有原因的，看一下这个回调地狱，真的是太恶心了

为了解决回调地狱，ES6新增了Promise，下一篇就讲Promise

原生JS封装自己的AJAX相关推荐

原生JS封装Ajax插件(同域jsonp跨域)
2019独角兽企业重金招聘Python工程师标准>>> 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax ...
js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
H5移动端原生JS封装附件上传服务器
本文主要通过原生的js封装附件上传upload.js.可成功内嵌钉钉,ios和安卓端可正常使用,支持单个.多个附件上传. 一.业务需求封装原生JS附件上传,动态创建附件列表,可对附件列表进行删除和新 ...
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 P ...
jq ajax请求php原声,原生JS与jQuery对AJAX的实现
原生JS与jQuery对AJAX的实现一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ...
原生js封装table组件
使用原生js封装自己的table组件. 思路是通过设置参数,生成对应的表格dom; 源码如下:(初步实现) var XUi = {// table组件tableDom:{common:function ...
animate用法 js原生_原生JS封装animate运动框架的实例
如下所示: div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 5 ...
原生js封装cookie插件
最近迷上了react,用react模拟之前的系统,做登录的时候,发现需要用到cookie,之前用的跟vue搭配的VueCookie,我就在想啊,react应该也会有相应的cookie插件吧!百度一下, ...
原生js封装十字参考线插件(一)
需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...

原生JS封装自己的AJAX

原生JS封装自己的AJAX相关推荐

最新文章

热门文章