function paramsSeralize(obj){
if(!obj || typeof !== 'object') return obj;
let res = '';
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
res += `&${key}=${obj[key]}`
}
}
result = result.substring(1);
return result;
}
function ajax (options) {
let params = Object.assign({
method: 'GET',
url: '',
data: null,
params: null
}, options)
let isGet = /^(GET|OPTIONS|HEAD|DELETE)$/i.test(options.method) options.params ? options.params = paramsSeralize(options.params) : null; options.data ? options.data = paramsSeralize(options.data) : null; if(isGet && options.params){
options.url += `${options.url.indexOf('?')>=0 ? '&' : '?'}${options.params}`
} let xhr = new XMLHttpRequest;
xhr.open(options.method, options.url) !isGet ? xhr.setRequestHeader('Content-type','x-www-form-urlencoded') : null; xhr.onreadystatechange = function () {
let { readyState, status, responseText } = xhr;
if (/^2\d{2}/.test(status) && readyState === 4) {
responseText = JSON.stringify(responseText)
options.success && options.success()
}
}
xhr.send(isGet ? null : options.data);
}

使用

ajax({
method: 'GET',
url: '/user/list',
data: {
lx: 1,
number: 2
},
params: {
type: 1
},
success (res) { }
})

ajax自己封装的更多相关文章

  1. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  2. 【前端学习笔记04】JavaScript数据通信Ajax方法封装

    //Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...

  3. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  4. Ajax入门(二)Ajax函数封装

    如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...

  5. js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)

    js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

  6. jQuery-实现简单的Ajax请求封装

    封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...

  7. JQ中的Ajax的封装

    1.认识JQ中ajax的封装      jQ 对于ajax的封装有两层实现:$.ajax 为底层封装实现:基于 $.ajax ,分别实现了$.get 与$.post 的高层封装实现: 2.Ajax的底 ...

  8. Ajax的封装。

    封装 Ajax 因为Ajax 使用起来比较麻烦,主要就是参数问题,比如到底使用GET 还是POST:到 底是使用同步还是异步等等,我们需要封装一个Ajax 函数,来方便我们调用.    封装支持接收来 ...

  9. Jquery Ajax简单封装(集中错误、请求loading处理)

    Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...

  10. Ajax的封装,以及利用jquery的ajax获取天气预报

    1.Ajax的封装 function ajax(type,url,param,sync,datetype,callback){//第一个参数是获取数据的类型,第二个参数是传入open的url,第三个是 ...

随机推荐

  1. JavaScript 数组方法filter和reduce

    前言 在ES6新增的数组方法中,包含了多个遍历方法,其中包含了用于筛选的filter和reduce filter 主要用于筛选数组的filter方法,在使用中,不会改变原数组,同时会将符合筛选条件的元 ...

  2. Excel用Power Query把文件夹下所有文件合并为一个与合并多个表格

    Excel用Power Query把文件夹下所有文件合并为一个与合并多个表格 在 Excel Power Query 未出来之前,把文件夹下所有文件合并为一个与合并同一工作表中的多个工作表,需要用 V ...

  3. BBS项目分布搭建五(评论相关功能实现)

    BBS项目分布搭建五(评论相关) 1. 根评论逻辑实现 # 在models.py文件中 修改: # 7. 评论表 parent = models.ForeignKey(to='self', null= ...

  4. JVM知识梳理

    JDK 是什么? JDK 是用于支持 Java 程序开发的最小环境. Java 程序设计语言 Java 虚拟机 Java API类库 JRE 是什么? JRE 是支持 Java 程序运行的标准环境. ...

  5. 创建一个 20G 的分区,并格式化为 ext4 文件系统

     创建一个 20G 的分区,并格式化为 ext4 文件系统,并完成如下要求: (1)block 大小为 2048,预留空间 20%,卷标为 MYDATA #fdisk /dev/sdb -->n ...

  6. [SPDK/NVMe存储技术分析]013 - libibverbs API应用案例分析

    本文是对论文Dissecting a Small InfiniBand Application Using the Verbs API所做的中英文对照翻译 Dissecting a Small Inf ...

  7. sql server 2000 单主键高效分页存储过程 (支持多字段排序)

    sql server 2000 单主键高效分页存储过程 (支持多字段排序) Create PROC P_viewPage             /*              nzperfect [ ...

  8. Arduino UNO开发板、Arduino CNC Shield V3.0扩展板、A4988驱动板、grbl固件使用教程

    前言 CNC Shield V3.0可用作雕刻机,3D打印机等的驱动扩展板,板上一共有4路步进电机驱动模块的插槽,可驱动4路不进电机,而每一路步进电机都只需要2个IO口,也就是说,6个IO口就可以很好 ...

  9. CF487E Tourists(圆方树+树链剖分+multiset/可删堆)

    CF487E Tourists(圆方树+树链剖分+multiset/可删堆) Luogu 给出一个带点权的无向图,两种操作: 1.修改某点点权. 2.询问x到y之间简单路径能走过的点的最小点权. 题解 ...

  10. jinja2.exceptions.TemplateNotFound 报错处理

    一.检查模板文件夹是否正确. 遇到这个问题,首先需要检查你的模板文件夹命名是否规范,Flask默认会在工程下寻找templates文件夹,这个是默认配置,不能写成template或者其他名字.当然,如 ...