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. windows下后台启动PHP,Nginx,Redis(使用RunHiddenConsole)

    启动命令(红色代码可选): 启动PHP RunHiddenConsole D:/phpStudy/PHPTutorial/php/php-5.6.27-nts/php-cgi.exe -b 127.0 ...

  2. 利用mysqldump 与 nginx定时器 定时备份mysql库

    1.安装mysqldump(如果备份远程mysql库,本地不用安装mysql 也可以单独使用) yum -y install holland-mysqldump.noarch 2.编写备份脚本 首先这 ...

  3. kali linux 更换国内源报GPG error解决办法

    wget -q -O - https://archive.kali.org/archive-key.asc | apt-key add

  4. python学习之scipy实战1(积分用法)

    import numpy as np def main(): #1-- Integral积分 from scipy.integrate import quad, dblquad, nquad prin ...

  5. php——字符串的""和null,empty的关系

    public function test(){ $test = ""; if($test==null){ echo "test==null <hr>" ...

  6. Django之 rest_framework (一基本组件)

    目录 RESTFUL 序列化 视图三部曲 认证与权限组件 解析器 分页 RESTFUL 一.什么是RESTFUL REST与技术无关代表的是一种软件架构风格,REST是Representational ...

  7. SpringMVC实现文件上传功能

    文件上传 文件上传要求form表单的请求方式必须为post,并且添加属性enctype="multipart/form-data" SpringMVC中将上传的文件封装到Multi ...

  8. CF1500D Tiles for Bathroom (递推+大讨论)

    题目大意:给你一个n*n的矩阵,现在问对于每个k\le n,求出所有k*k的子矩阵中,元素种类数不超过q的矩阵个数,n\le 1500, q\le 10 先考虑最暴力的做法: 对于每个格子,求出以它为 ...

  9. HashMap:为什么容量总是为2的n次幂

    HashMap:为什么容量总是为2的n次幂1).HashMap是根据key的hash值决定key放到哪个桶中,通过tab[i = (n - 1) & hash]公式计算得出 这里的n是Hash ...

  10. Linux 的目录结构是怎样的?

    这个问题,一般不会问.更多是实际使用时,需要知道.Linux 文件系统的结构层次鲜明,就像一棵倒立的树,最顶层是其根目录:Linux的目录结构常见目录说明: /bin:存放二进制可执行文件(ls,ca ...