封装AJAX库(参考JQ)
//jQ方法 $.ajax([URL],[OPTIONS])
$.ajax({
url:'',
data:null,
datatype:'json',
method:'GET',
async:true,
cache:true,
success:()=>{},
error:()=>{}
})
//封装成window对象的一个方法。
(function anonymous(window) {
function AJAX(options) {
return new AJAX.prototype.init(options)
}
let init = function init(options = {}){
let {
url,
method = 'GET', //默认值用等号
data = null,
datatype = 'JSON',
async = true,
cache = true,
success,
error
} = options;
//MOUNT :将配置挂载到实例上
['url', 'method', 'data', 'datatype', 'async', 'cache', 'success',
'error'
].forEach((item) => {
this[item] = eval(item);
});
//SEND :发送请求
this.sendAjax();
};
AJAX.prototype = {
constructor: AJAX,
init,
//发送AJAX请求
sendAjax() {
this.handleDate();
this.handleCache();
let (method, url, async,error,success,data) = this;
//四部曲
let xhr = new XMLHttpRequest();
xhr.open(method, url, async);
xhr.onreadystatechange = () => {
if (!/^(2|3)\d{2}$/.test(xhr.status)) {
error && error(xhr.statusText, xhr);
return;
}
if (xhr.readyState === 4) {
let result = this.handleDataType(xhr);
success && success(result, xhr);
}
};
xhr.send();
},
//处理DATA-TYPE
handleDataType(xhr) {
let dataType = this.dataType.toUpperCase();
result = xhr.responseText;
switch (dataType) {
case 'TEXT':
break;
case 'JSON':
result = JSON.parse(result);
break;
case 'XML':
xhr.responseXML;
break;
}
return result;
},
//处理CACHE
handleCache() {
let {
url,
method,
cache
} = this;
if (/^GET$/i.test(method) && cache === false) {
url += `${check()}_=${+new Date()}`; //
}
},
//处理DATA
handleData(){
let {data,method} = this;
if(!data) return;
let str = '';
if(typeof data === 'object'){
//如果是对象,转换成x-www-form-urlencoded模式的字符串
for(let key in data){
if(data.hasOwnProperty(key)){
str += `${key}=${data[key]}&`;
}
}
data = str.substring(0,str.length-1);
}
//根据请求方式的不同,传递给服务器的也不同
if(/^(GET|DELETE|HEAD|TRACT|OPTIONS)$/i.test(method)){
this.url += `${this.check()}${data}`;
this.data = null;
return;
}
//当请求为POST时
this.data = data;
},
//检测问号
check() {
return this.url.indexOf('?')>-1?'&':'?';
}
}
init.prototype = AJAX.prototype;
window.ajax = AJAX;
})(window)
//直接ajax(options),options为一个对象
封装AJAX库(参考JQ)的更多相关文章
- 封装ajax库,post请求
http状态码406是服务器无法根据客户端请求的内容特性完成请求 //整站功能方法库封装ajax请求,这里只针对post var methods = { //全站ajax请求状态处理 ajax: fu ...
- Blazor组件自做一 : 使用JS隔离封装viewerjs库
Viewer.js库是一个实用的js库,用于图片浏览,放大缩小翻转幻灯片播放等实用操作 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazo ...
- 封装ajax,让调用变得简单优化
思考一下: 通常我们在使用ajax来发送接口请求时,每一次都会调用ajax固定的元素,比如data.url.method.success.error等.那么我们想一下能不能先把ajax封装起来,在每次 ...
- 原生JS封装ajax方法
http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...
- 前后端交互之封装Ajax+SpringMVC源码分析
为什么需要封装呢?因为用的多,我想将其封装成函数,当我想用它时,只需将那个函数对应的js文件引入即可,而不要重复写很多相同代码,利于开发效率的提高. 无论是$.ajax或$.post.$.get等,在 ...
- JavaScript封装Ajax工具函数及jQuery中的ajax,xhr在IE的兼容
封装ajax工具函数 首先要思考:1.为什么要封装它?提高开发效率2.把一些不确定的情况考虑在其中 a. 请求方式 b. 请求地址 c. 是否异步 d. 发送参数 e. 成功处理 f. 失败处理3.确 ...
- 封装ajax支持get、post
为什么要封装ajax,因为…… for(var i=0;i<20;i++){ $.ajax(……) } 的时候,整个页面都卡死了,于是,我开始找答案. 后来,找到了,就是jquery的ajax属 ...
- 自封装ajax
项目中有时候用不到jq,需要了解xmlhttp原理,自己写一套函数请求和发送数据! /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET ...
- 封装Ajax和跨域
目录 引言 封装ajax 案例:使用自封装ajax 案例:动态加载瀑布流 跨域 引言 对于Ajax现在相信大家已经不会陌生了,无论是原生的XMLHttpRequest方式发送还是通过jQuery框架中 ...
随机推荐
- cookie和session的区别及其原理
1.为什么要有cookie/session? HTTP是一种无状态的协议,为了分辨链接是谁发起的,需自己去解决这个问题.不然有些情况下即使是同一个网站每打开一个页面也都要登录一下.而Session和C ...
- 19 个强大、有趣、又好玩的 Linux 命令!
民工哥技术之路 今天 点击上方“民工哥技术之路”选择“置顶或星标” 每天10点为你分享不一样的干货 1. sl 命令 你会看到一辆火车从屏幕右边开往左边…… 安装 $ sudo apt-get ins ...
- iOS如何将RGB565的原始图像数据转为UIImage对象
我们在做一些图像处理时,往往会涉及到RGB565这种图像数据格式.由于其每个像素仅占2个字节,对于不需要像素透明度的情况下使用RGB565既能基本能保证图像的色彩,又能降低图像数据尺寸,节省带宽.因此 ...
- Cobbler安装报错--dhcpd -t failed Exception occured: <class 'cobbler.cexceptions.CX'>
最近想玩一下自动化安装,就研究了一下cobbler,测试环境本来是想用CentOS6.X的,但是后来一想,还是想用CentOS7.X.然后就碰到坑了. 在同步cobbler配置的时候,发现了以下错误: ...
- JavaScript 模块化
当项目越来越大时,会遇到一些问题: 1.命名冲突 2.文件依赖 所有就有了javascript模块化开发概念. 模块化开发的演变: 1.函数块:最开始用全局函数将代码块包括在函数体内,然后把很多函数写 ...
- iOS-保存图片到相册
//保存 UIButton *saveBtn = [[UIButton alloc] init]; // saveBtn.frame = CGRectMake((screenWi ...
- C#中设置自定义控件工具箱图标
在设计自定义控件时,系统默认生成的图标比较单一难看,如何为控件设计自己的图标呢,这里给出了一种基于ToolBoxBitmap 属性设置自定义控件工具箱图标的方法. 1)首先将图标文件名改为自定义控件名 ...
- 使用FRP配置Windows远程控制
一款很好用的内网穿透工具--FRP 前言 使用内网穿透工具--FRP,以及一台云服务器当做服务端,进行简单配置后即可远程访问 配置 FRP 服务端的前提条件是需要一台具有公网 IP 的设备,得益于 F ...
- window环境下zookeeper的安装(自用---仅供参考)
转自: https://www.cnblogs.com/ysw-go/p/11396343.html 第一部分:单机模式 1)下载地址:http://www.pirbot.com/mirrors/ap ...
- 【ARM-Linux开发】"libxml/parser.h: 没有那个文件或目录"解决方案
这是因为在ubuntu上没有安装libxml2-dev,这个包应该是开发用的,而已安装的libxml2应该只是像jre一样的部件. 解决方案:sudo apt-get install libxml2- ...