//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)的更多相关文章

  1. 封装ajax库,post请求

    http状态码406是服务器无法根据客户端请求的内容特性完成请求 //整站功能方法库封装ajax请求,这里只针对post var methods = { //全站ajax请求状态处理 ajax: fu ...

  2. Blazor组件自做一 : 使用JS隔离封装viewerjs库

    Viewer.js库是一个实用的js库,用于图片浏览,放大缩小翻转幻灯片播放等实用操作 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazo ...

  3. 封装ajax,让调用变得简单优化

    思考一下: 通常我们在使用ajax来发送接口请求时,每一次都会调用ajax固定的元素,比如data.url.method.success.error等.那么我们想一下能不能先把ajax封装起来,在每次 ...

  4. 原生JS封装ajax方法

    http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...

  5. 前后端交互之封装Ajax+SpringMVC源码分析

    为什么需要封装呢?因为用的多,我想将其封装成函数,当我想用它时,只需将那个函数对应的js文件引入即可,而不要重复写很多相同代码,利于开发效率的提高. 无论是$.ajax或$.post.$.get等,在 ...

  6. JavaScript封装Ajax工具函数及jQuery中的ajax,xhr在IE的兼容

    封装ajax工具函数 首先要思考:1.为什么要封装它?提高开发效率2.把一些不确定的情况考虑在其中 a. 请求方式 b. 请求地址 c. 是否异步 d. 发送参数 e. 成功处理 f. 失败处理3.确 ...

  7. 封装ajax支持get、post

    为什么要封装ajax,因为…… for(var i=0;i<20;i++){ $.ajax(……) } 的时候,整个页面都卡死了,于是,我开始找答案. 后来,找到了,就是jquery的ajax属 ...

  8. 自封装ajax

    项目中有时候用不到jq,需要了解xmlhttp原理,自己写一套函数请求和发送数据! /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET ...

  9. 封装Ajax和跨域

    目录 引言 封装ajax 案例:使用自封装ajax 案例:动态加载瀑布流 跨域 引言 对于Ajax现在相信大家已经不会陌生了,无论是原生的XMLHttpRequest方式发送还是通过jQuery框架中 ...

随机推荐

  1. 完全背包---P1679 神奇的四次方数

    P1679 神奇的四次方数 题解 一看这就是个完全背包 m最多不会超过18^4,所以我们把x^4用数组存起来,然后考虑如何填满m,注意存到18^4,不然会像我一样RE... 那么问题就转化成完全背包问 ...

  2. vim 快捷键 清空文件所有内容

    vim清空文件所有内容 在使用vim编辑器的时候,有时候编辑一个文件,而文件内容比较多,如果需要快速清空整个文件,可以使用一下命令: 在命令模式下,首先执行 gg 这里是跳至文件首行 再执行: dG ...

  3. 安装mysql问题解决

    [root@apollo init.d]# /etc/init.d/mysqld startmy_print_defaults: Can't read dir of '/etc/my.cnf.' (E ...

  4. delphi7 treeview + 数据库 实现动态节点维护

    首先说下树节点对应的表的基本结构,必需要有的字段(节点编号,父节点编号,节点名称),其他字段根据你开发的需要添加从添加节点开始,一开始就取出表中最大节点编号,每次添加节点的时候,该节点编号增加1;添加 ...

  5. Spring Aop(八)——advisor标签

    转发地址:https://www.iteye.com/blog/elim-2396274 8 advisor标签 advisor标签是需要定义在aspect标签里面的,其作用与aspect类似,可以简 ...

  6. shell学习笔记3-后台执行命令

    cron 系统调度进程,使用它在每天的某时间或一周.一月的不同时间运行 at 使用它在一个特点的时间允许一些特殊的作业 & 使用它在后台允许一个占用时间不长的进程 Nohup 使用它在后台运行 ...

  7. 【ARM-Linux开发】 uboot启动阶段修改启动参数方法及分析

    作者:围补 本来启动方式这节不是什么复杂的事儿,不过想简单的说清楚明白,还真是不知道怎么组织.毕竟文字跟有声语言表达有别.但愿简单的东西别让我讲的太复杂! Arm板系统文件一般有三个--bootloa ...

  8. NDK学习笔记-文件的拆分与合并

    文件的拆分与合并在开发中经常会用到,上传或是下载的时候都有这样的运用 文件拆分的思路 将文件大小拆分为n个文件 那么,每个文件的大小就是等大小的 如果文件大小被n除不尽,那么就使用n+1个文件来拆分 ...

  9. c++ hex string array 转换 串口常用

    c++ hex string array 转换 效果如下 tset string is follow 0x50 55 0x35 00 10 203040506073031323334ff format ...

  10. vue项目中的父子组件之间的传值。

    首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...