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,第三个是 ...
随机推荐
- MariaDB 与Mysql版本对应关系
特定MariaDB版本的完全兼容性 就InnoDB而言,MariaDB 10.2.MariaDB 10.3和MariaDB 10.4是MySQL 5.7的有限替代.然而,在每一个新的MariaDB版本 ...
- JavaScript面向对象—深入ES6的class
JavaScript面向对象-深入ES6的class 前言 在前面一篇中主要介绍了JavaScript中使用构造函数+原型链实现继承,从实现的步骤来说还是比较繁琐的.在ES6中推出的class的关键字 ...
- python之pyc
pyc是一种二进制文件,是由py文件经过编译后,生成的文件,是一种byte code,py文件变成pyc文件后, 加载的速度有所提高,而且pyc是一种跨平台的字节码,是由Python的虚拟机来执行的, ...
- ENVI提取水系并进行生态敏感性分析
4 具体步骤 4.1 DEM数据拼接 (1)打开ENVI软件,选择[File][Open],添加文件夹DEM数据中的影像,操作如图4.1.1所示,结果如图4.1.2. 图4.1.1 添加DEM数据影像 ...
- 基于ECS搭建云上博客(云小宝码上送祝福,免费抽iphone13任务详解)
码上送祝福,带云小宝回家 做任务免费抽iphone13,还可得阿里云新春限量手办 日期:2021.12.27-2022.1.16 云小宝地址:https://developer.aliyun.com/ ...
- 前端好用API之Fullscreen
前情 在前端开发需求中,特别网页有视频需求时,需要做视频全屏功能,或者在某些可视化大屏项目也要做全屏. Fullscreen介绍 让你可以简单地控制浏览器,使得一个元素与其子元素,如果存在的话,可以占 ...
- SpringCloudAlibaba 微服务讲解(一)微服务介绍
微服务介绍 1.1 系统架构的演变 随若互联网的发展,网站应用的规模也在不断的扩大,逬而导致系统架构也在不断的进行变化.从互联 网早起到现在,系统架构大体经历了下面几个过程:单体应用架构一蟻直应用架构 ...
- consumer提交offset原理
1 数据结构 消费者的消费状态是保存在SubscriptionState类中的,而SubscriptionState有个重要的属性那就是assignment保存了消费者消费的partition及其pa ...
- SpringMvc怎么和AJAX相互调用的?
通过Jackson框架就可以把Java里面的对象直接转化成Js可以识别的Json对象.具体步骤如下 : (1)加入Jackson.jar (2)在配置文件中配置json的映射 (3)在接受Ajax方法 ...
- java-idea创建maven管理web项目不能解析EL的解决方法
默认会原样输出: 这是由于这样子创建的web.xml的版本不够高 2.5之前web.xml文件中的头定义中,el表达式默认是忽略不解析的,故需要显示声明解析el表达式 所以我们要修改版本: 再< ...