关键代码


function Ajax(type,url,data){return new Promise(function(resolve, reject){let ajax = new XMLHttpRequest();ajax.timeout = 3000if(type === 'get'){let params = ''Object.keys(data).forEach(function(key){params += '&' + key + '=' +data[key]})params = params.replace('&','?')ajax.open(type,url+params,true)ajax.send()}else{ajax.open(type,url,true)ajax.setRequestHeader('content-type','application/json')ajax.send(JSON.stringify(data))}ajax.ontimeout = function (e) {// XMLHttpRequest 超时。在此做某事。reject('请求超时,请稍后再试!')};ajax.onreadystatechange = function(){if(ajax.readyState === 4){let ajaxStatus = ajax.statusif(ajaxStatus !== 200){reject('请求失败,请稍后再试!')}else{resolve(ajax.responseText)}}}})
}export default {Ajax
}

引用

<script type="module">import request from './request.js'function Ajax_test (){return request.Ajax('post','login',{user: 7777,pass: 44444})}</script>

js 封装原生XMLHttpRequest相关推荐

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

    2019独角兽企业重金招聘Python工程师标准>>> 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax ...

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

    实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定 取消按钮可选 调用方法: 1 P ...

  3. js 封装ajax方法吗,原生JS封装ajax方法

    jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...

  4. 原生JS封装ajax以及request

    一.封装原生的xhr为ajax类 xhr以及用法见之前的文章 1.根据url确定请求的头部以及别的信息. var _headerConfig = {};if(url.indexOf('getcaptc ...

  5. H5移动端原生JS封装附件上传服务器

    本文主要通过原生的js封装附件上传upload.js.可成功内嵌钉钉,ios和安卓端可正常使用,支持单个.多个附件上传. 一.业务需求 封装原生JS附件上传,动态创建附件列表,可对附件列表进行删除和新 ...

  6. 原生js封装table组件

    使用原生js封装自己的table组件. 思路是通过设置参数,生成对应的表格dom; 源码如下:(初步实现) var XUi = {// table组件tableDom:{common:function ...

  7. animate用法 js原生_原生JS封装animate运动框架的实例

    如下所示: div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 5 ...

  8. 原生js封装cookie插件

    最近迷上了react,用react模拟之前的系统,做登录的时候,发现需要用到cookie,之前用的跟vue搭配的VueCookie,我就在想啊,react应该也会有相应的cookie插件吧!百度一下, ...

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

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

  10. 原生html中modal,基于原生JS封装的Modal对话框插件

    基于原生JS封装Modal对话框插件 原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ...

最新文章

  1. 搞懂这些框架源码,带你吊打面试官
  2. ActivityGroup是如何对嵌入的Activitys进行管理的
  3. VS直接调试可执行文件main函数.exe输入参数argc(项目--> 属性--> 调试--> 命令参数)
  4. 通配符在泛型中的应用
  5. oracle 使从表中随机取出一行记录数据
  6. Java heap space设置方法记录
  7. GCDWebUploader支持iOS进入后台后仍然可以进行传输
  8. [蓝桥杯][2013年第四届真题]剪格子(dfs)
  9. 安装 pptpd 服务
  10. 【转】TCP和UDP的区别
  11. 《需求工程——软件建模与分析》阅读笔记之一
  12. “请别再说‘华商网不重视技术’”
  13. Google Code Review 浏览评论中的CL
  14. 利用oc门或od门实现线与_TTL,CMOS,OC门,OD门的理解
  15. 电脑自带office查看攻略
  16. reached getOption(“max.print”)
  17. JAVA设计模式之调停者模式
  18. uniapp 手写canvas海报(兼容android/ios/h5/微信小程序)
  19. 网络舆情分析技术 读书笔记1
  20. 2019暑期集训收获感悟

热门文章

  1. docker容器接入canbus
  2. SI4463模块使用心得(无线协议)
  3. PySide从实战开始学习系列(一)认识PySide
  4. python _滑动时间窗
  5. [博应用官网]iTunes备份密码忘记了该如何解决?
  6. Opencv系列1_opencv对单张DCM文件的读取并显示
  7. 易打卡模板微信签到打卡小程序源码
  8. 硬核教程 - 使用Rust编写网游FPS外挂辅助
  9. 区块链开发(四)区块链技术详解PPT
  10. Linux下C语言编程风格和规范