ajax自己封装
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自己封装的更多相关文章
- 原生态AJAX详解和jquery对AJAX的封装
AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...
- 【前端学习笔记04】JavaScript数据通信Ajax方法封装
//Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...
- 原生ajax与封装的ajax使用方法
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
- Ajax入门(二)Ajax函数封装
如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...
- js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)
js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...
- jQuery-实现简单的Ajax请求封装
封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...
- JQ中的Ajax的封装
1.认识JQ中ajax的封装 jQ 对于ajax的封装有两层实现:$.ajax 为底层封装实现:基于 $.ajax ,分别实现了$.get 与$.post 的高层封装实现: 2.Ajax的底 ...
- Ajax的封装。
封装 Ajax 因为Ajax 使用起来比较麻烦,主要就是参数问题,比如到底使用GET 还是POST:到 底是使用同步还是异步等等,我们需要封装一个Ajax 函数,来方便我们调用. 封装支持接收来 ...
- Jquery Ajax简单封装(集中错误、请求loading处理)
Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...
- Ajax的封装,以及利用jquery的ajax获取天气预报
1.Ajax的封装 function ajax(type,url,param,sync,datetype,callback){//第一个参数是获取数据的类型,第二个参数是传入open的url,第三个是 ...
随机推荐
- 安装wkhtmltopdf
思路 在网上查了下前后端都可以将html生成pdf,考虑到实现效果以及效率,最后决定将转化工作在服务端使用PHP完成.本着最好不要额外安装软件的原则,搜索过后分别尝试了 TCPDF MPDF FPDF ...
- java面试:java基础、Io、容器
1.java基础 1.JDK 和JRE有什么区别 JDK:java开发工具包,java开发运行环境.包含了JRE. JRE:java运行环境,包含java虚拟机,java基础类库. 2.jav ...
- Objective-C 基础教程第七章,深入理解Xcode
目录 Object-C 基础教程第七章,深入理解Xcode 0x00 前言 0x01 创建工程界面 0x02 主程序界面 ①顶部 Top Test(测试) Profile(动态分析) Analyze( ...
- Java多线程【三种实现方法】
java多线程 并发与并行 并发:在操作系统中,是指一个时间段中有几个程序都处于已启动运行到运行完毕之间,且这几个程序都是在同一个处理机上运行,但任一个时刻点上只有一个程序在处理机上运行 并行:一组程 ...
- 【KiCad镜像】下载与安装
镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 一.KiCad介绍 KiCad EDA 是一款用于印刷电路板设计的开源自由软件,基于 GPLv3 开源协议. 软件包含工程项目管理.原理图设计.线 ...
- 通过TCP Allocate连接数告警了解promethous-NodeExporter数据采集及相关知识扩散
1.问题由来 近日有环境告警如下:TCP Allocate连接数过多 很多资料告诉我们使用:netstat –ant | grep ^tcp | wc –l命令查询,但查询的值与告警中获取的只相差很大 ...
- (一)【转】asp.net mvc生成验证码
网站添加验证码,主要为防止机器人程序批量注册,或对特定的注册用户用特定程序暴力破解方式,以进行不断的登录.灌水等危害网站的操作.验证码被广泛应用在注册.登录.留言等提交信息到服务器端处理的页面中. ...
- 一条SQL语句执行得很慢的原因有哪些
说实话,这个问题可以涉及到 MySQL 的很多核心知识,可以扯出一大堆,就像要考你计算机网络的知识时,问你"输入URL回车之后,究竟发生了什么"一样,看看你能说出多少了. 之前腾讯 ...
- 如何在自定义端口上运行 Spring Boot 应用程序?
为了在自定义端口上运行 Spring Boot 应用程序,您可以在 application.properties 中指定端口. server.port = 8090
- java-方法引用
/** * 方法引用格式: * 双冒号:: 引用运算符,它所在的表达式被称为方法引用.如果Lambda表达式 * 的函数方案已经存在于某个地方的实现中, * ===>那么可以通过双冒号来引用改方 ...