手动封装一个属于自己的AJAX类库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装属于自己的AJAX类库</title>
</head>
<body>
<script>
//自执行函数
~function(){
class ajaxClass{
//=>AJAX四步操作:send ajax
init(){
//这里的this就是实例example
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = ()=>{
if(xhr.readyState===4&&/^(2|3)\d{2}$/.test(xhr.status)){
let result = xhr.responseText;
//dataType的处理
try {
switch (this.dataType.toUpperCase()){
case 'TEXT':
case 'HTML':
break;
case 'JSON':
result = JSON.parse(result);
break;
case 'XML':
result = xhr.responseXML;
}
}catch (e){
console.log(e.message);
}
this.success(result);
}
}
//=>data的处理
if(this.data !==null){
this.formatData();
if(this.isGET){
//如果是get请求
this.url += this.querySymbol()+this.data;
this.data = null;
}
}
//=>cache的处理
this.isGET?this.cacheFn():null;
xhr.open(this.method,this.url,this.async);
xhr.send(this.data);
}
//把传递的对象格式data转换为字符串格式类型
formatData(){
//this指向当前实例example
//检测this.data是否是一个对象
if({}.toString.call(this.data)==='[object Object]'){
let obj = this.data,
str = ``;
for(let key in obj){
str += `${key}=${obj[key]}&`;
}
str = str.replace(/&$/,'');//把末尾的&进行替换
this.data = str;
}
}
cacheFn(){
//this指向当前实例example
!this.cache ?this.url +=`${this.querySymbol}_=${Math.random()}`:null;
}
//符号查询
querySymbol(){
//this孩纸指向当前实例example
return this.url.indexOf('?')>-1?'&':'?';
}
}
//=>参数初始化 init parameters
window.ajax = function ({
url=null,
method='GET',
type=null,
data=null,
dataType='JSON',
cache=true,
async=true,
success=null
}={}) {
let example = new ajaxClass();//example就是ajaxClass的实例
/*['url','method','data','dataType','cache','async','success'].forEach((item)=>{
if(item==='method'){
_this.method = type===null?method:type;
return;
}if(item === 'success'){
_this.success = typeof success === 'function'?success:new Function();
return;
}
_this[item] = eval(item);
})*/
example.url = url;
example.method = type===null?method:type;
example.data = data;
example.dataType = dataType;
example.async = async;
example.success = typeof success === 'function'?success:new Function();
example.isGET = /^(GET|DELETE|HEAD)$/i.test(example.method);
example.init();//执行init方法
return example;
};
}();
ajax({
url:'product.json',
method:'post',
cache:false,
data:{
name:'zhangsan',
age:18
},
dataType:'text',
success: result=>{
console.log(result);
}
})
</script>
</body>
</html>
手动封装一个属于自己的AJAX类库的更多相关文章
- 封装一个类似jquery的ajax方法
//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataT ...
- 手动封装一个node命令集工具
了解NPM安装模块时与项目配置文件中的bin配置发生了什么 了解nodejs在控制台中的运行环境及上下文 基于自定义命令集工具集成Yeoman 一.NPM模块安装内幕与nodejs控制台运行环境 1. ...
- 手动模拟一个类似jquery的ajax请求
var $ = { parms:function(obj){ var str = ''; for(var k in obj){ str +=k+'='+obj[k]+'&'; } str = ...
- 封装一个简易版的ajax操作对象
/** * 发送ajax请求 * @type {Object} * 使用方法如下: * $ajax.request( * method: "post", //请求方式 * url: ...
- 【react】---手动封装一个简易版的redux
export let createStore = (reducer)=>{ //定义默认的state let state; //定义默认的action let actionTypes = &qu ...
- 【react】---手动封装一个简易版的redux---【巷子】
export let createStore = (reducer)=>{ //定义默认的state let state = {}; //定义默认的action let actionTypes ...
- 使用promise手动封装ajax函数
最近在做一个单页应用,node和浏览器仅通过json传输数据,因为是只有自己用等于是锻炼一下自己,所以也不用考虑seo的问题,node端我已经写好了,但是浏览器端想要用ajax原生太麻烦,用封装的函数 ...
- 手动封装AJAX
正常函数的调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 封装一个Ajax工具函数
/*封装一个ajax工具函数*/ window.$ = {}; /*通过$定义一个ajax函数*/ /* * 1. type string 请求的方式 默认是get * 2. url ...
随机推荐
- .net core系列之《对AOP思想的理解及使用AspectCore实现自定义日志拦截》
对于AOP这个名词,相信对于搞过MVC开发的人来说,都很熟悉,里面各种各样的Filter简直是将AOP体现到了极致. 那么什么是AOP呢? AOP(Aspect Oriented Programmin ...
- Oracle案例09——ORA-12154: TNS:could not resolve the connect identifier specified
DG处理的问题还是蛮多的,但这次遇到一个比较奇葩的事情,表面配置.网络都没啥问题,但主备的同步始终有问题,经过多次调整参数.重新部署问题依旧,最终还是求助mos问题得以解决,现将处理过程记录如下: 一 ...
- DAO层,Service层,Controller层、View层介绍
来自:http://jonsion.javaeye.com/blog/592335 DAO层 DAO 层主要是做数据持久层的工作,负责与数据库进行联络的一些任务都封装在此,DAO层的设计首先是设计DA ...
- 实现UIView的无限旋转动画(非CALayer动画)
实现UIView的无限旋转动画(非CALayer动画) 效果: 素材: 源码: // // ViewController.m // Animation // // Created by YouXian ...
- C++类知识总结
c++类 1.初始化const或引用类型数据成员的唯一机会是在构造函数初始化列表中. 2.使用成员初始化列表时成员初始化的次序:第一个成员首先被初始化.然后是第二个,依次类推. 构造函数初始化列表为类 ...
- awk 截取某段时间的日志
好久没有截取nginx/haproxy 中 的日志了,竟有点不熟悉了. 记录一下,以免以后忘记. NGINX 日志格式: 192.168.1.26 - - [14/Sep/2017:16:48:42 ...
- ZT 王国维先生“人生三大境界”的具体含义是什么?
昨夜西风凋碧树.独上高楼,望尽天涯路. 衣带渐宽终不悔,为伊消得人憔悴. 众里寻他千百度,蓦然回首,那人却在,灯火阑珊处. 这三句本来都是言情话相思的佳句,却被王国维用以表现“悬思——苦索——顿悟”的 ...
- [原]Ubuntu 下安装apache+PHP
1.安装apache2 sudo apt-get install apache2 运行如下命令重启:sudo /etc/init.d/apache2 restart 在浏览器里输入http://loc ...
- Alpha Scrum7
Alpha Scrum7 牛肉面不要牛肉不要面 Alpha项目冲刺(团队作业5) 各个成员在 Alpha 阶段认领的任务 林志松:项目发布 陈远军.陈彬:播放器各环境的测试 项目的发布说明 本版本的新 ...
- MySQL查询时强制区分大写和小写
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zyb_icanplay7/article/details/24981791 平时非常少会考虑数据存储 ...