现在的项目中都在用VUE 以及react 等MVC, MVVM  框架。 丢弃了原始的JQ 。不可能为了个$.ajax();而把JQ引进来吧。

在vue1的开发中 提供了 vueResouce, vue2 出来后明确提出了不在更新vueResouce 而提供axios 的方法。

在react 的开发中提供fetch 封装的方法。等等。但在工作与后台的交互中基本都是form表单的形式。于是自己封装了个

POST,GET,DELETE 的请求方式。当然根据不同的公司,不同的方式。都可以自己扩展。目前这个只是针对自己所在公司而已。

function api(url,opt,methods) {
return new Promise(function(resove,reject){
methods = methods || 'POST';
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
};
var params = [];
for (var key in opt){
if(!!opt[key] || opt[key] === 0){
params.push(key + '=' + opt[key]);
}
};
var postData = params.join('&');
if (methods.toUpperCase() === 'POST') {
xmlHttp.open('POST', url, true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(postData);
}else if (methods.toUpperCase() === 'GET') {
xmlHttp.open('GET', url + '?' + postData, true);
xmlHttp.send(null);
}else if(methods.toUpperCase() === 'DELETE'){
xmlHttp.open('DELETE', url + '?' + postData, true);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
resove(JSON.parse(xmlHttp.responseText));
}
};
});
}
export default api;

原生 js 封装get ,post, delete 请求的更多相关文章

  1. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  2. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  3. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  4. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  5. 原生JS封装创建多级菜单函数

    手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...

  6. 原生JS实现ajax 发送post请求

    1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...

  7. 基于原生JS封装数组原型上的sort方法

    基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...

  8. 原生js封装十字参考线插件(一)

    需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线 横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...

  9. 原生Js封装的动画类

    算法用的是Tween类,需要研究的参考这篇文章: http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html 网页里常用的动画 放大 ...

随机推荐

  1. Oracle 视图view

    在我看来,oracle的视图就是用于将多个表的关联查询结果映射成[临时表],视图与系统表中的数据是实时对应的. 我们可以像操作表的查询一样来操作视图查询. 视图写法: CREATE OR REPLAC ...

  2. 第12章 GPIO输入—按键检测

    第12章     GPIO输入—按键检测 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fi ...

  3. MSP430F5438A的串口

    设置串口,最关键的是波特率的设置,推荐一个网站,很方便地计算波特率,http://software-dl.ti.com/msp430/msp430_public_sw/mcu/msp430/MSP43 ...

  4. 奔跑吧Linux

    刚拿到MiZ702,就被他的"外貌"深深的吸引,核心板加底板的形式让她看上去,强大而神秘-- 华丽的外表之下是否有着与之相当的内含呢,我们拿Linux将其检验一番! 板载的TF卡里 ...

  5. 【转载】VS中的路径宏 vc++中OutDir、ProjectDir、SolutionDir各种路径

    原文:http://www.cnblogs.com/lidabo/archive/2012/05/29/2524170.html 说明 $(RemoteMachine) 设置为“调试”属性页上“远程计 ...

  6. 4556: [Tjoi2016&Heoi2016]字符串

    4556: [Tjoi2016&Heoi2016]字符串 链接 分析: 首先可以二分这个长度.此时需要判断是否存在一个以b结尾的前缀,满足与[c,d]的lcp大于等于mid. 如果我们把串翻转 ...

  7. servelt filter listener 的生命周期

    1. servlet    当第一次请求一个servlet资源时,servlet容器创建这个servlet实例,并调用他的 init(ServletConfig config)做一些初始化的工作,然后 ...

  8. R绘图 第八篇:绘制饼图(ggplot2)

    geom_bar()函数不仅可以绘制条形图,还能绘制饼图,跟绘制条形图的区别是坐标系不同,绘制饼图使用的坐标系polar,并且设置theta="y": coord_polar(th ...

  9. Android AccessibilityService(辅助服务) 使用示例

    1.前言 网上关于Android辅助服务的使用方式已经非常丰富了,所以也不在乎再多我这一篇了:-D.有同学说这是重复造轮子,题主很同意,但反过来说,如果自己没有能力造出轮子,还对重复造轮子嗤之以鼻,那 ...

  10. CodeFirst从零搭建ASP.NETCore2.0

    没时间介绍了,废话不说先上车 以下所有扯淡都是建立在.NETCore2.0环境已经搭建好 右键解决方案>新建项目> 选择Web>ASP.NETCoreWeb应用程序(.NET Cor ...