手动封装一个属于自己的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 ...
随机推荐
- 模板继承and自定义模板标签和过滤器
自定义模板标签和 过滤器: 因为模板标签和过滤器只给我们提供了 这么多 无法对我们的使用造成更多的便利 ,剩下的就需要我们自己去创建新的 模板标签和过滤器了 1.在settings中的INSTALLE ...
- Python学习---列表/元组/字典/字符串/set集合/深浅拷贝1207【all】
1.列表 2.元组 3.字典 4.字符串 5.set集合 6.深浅拷贝
- 51nod 1349 最大值
题目看这里 找到每个元素g[i]作为最大值的区间[L,R],那么以他为最大值的区间数有(i-L+1)*(R-i+1)个. 为了加速,以k为最大值的区间数放入H[k],再以此统计一个前缀和,更新入H.那 ...
- h5标签
1.<abbr> 标签指示简称或缩写,比如 "WWW" 或 "NATO". IE 6 或更早版本的 IE 浏览器不支持 <abbr> 标 ...
- DP入门——01背包 & 完全背包
01背包: 采药: https://www.luogu.org/problemnew/show/P1048 #include <iostream> #include <algorit ...
- docker-7-常用软件的安装
1.总体步骤 搜索镜像 拉取镜像 查看镜像 启动镜像 停止容器 移除容器 2.安装tomcat docker hub上面查找tomcat镜像:docker search tomcat 从doc ...
- Python 多线程 start()和run()方法的区别(三)
上一篇文章最后只是简单介绍了start()方法和run()方法,这篇文章再详细地看下start()和run()的区别. 在实例调用的函数中加入打印当前线程的名字,分别用start()方法和run()方 ...
- List泛型的应用
在我看一个源程序的时候看到这个例子使用了IList<T>返回类型,因为上午刚刚总结过List<T>的详细用法,突然出现了IList<T>,感觉很奇怪,于是上网搜集了 ...
- jquery mobile changepage的三种传参方法介绍
本来觉得changePage 那么多option,传几个参数应该没问题结果翻遍国内外网站,基本方法只有三种 1,显性传参,就是利用url这个地址把参数带上,然后到changepage后的新页面,用函数 ...
- 改变random.seed()种子值，获取不同的随机值
random.seed() random.seed()是随机数种子,也就是为随机数提供算法,完全相同的种子产生的随机数列是相同的, 所以如果想产生不同的随机数就需要用当前时间作为种子 一般情况下see ...