手动封装一个属于自己的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 ...
随机推荐
- Docker-commit镜像提交
docker commit:提交容器副本使之成为一个新的镜像 docker commit -a="作者名" -m="提交的描述信息" 容器id 新建的镜像名称: ...
- layui实现checkbox的目录树tree
layui.use([ 'tree' ], function() {$ = layui.jquery;form = layui.form;//获取节点数据getTreeData();}); funct ...
- Linux 下Discuz论坛的搭建
Discuz论坛的搭建[基于LNMP环境搭建成功后] ##创建BBS数据库在本地/远程服务器 mysql -uroot -proot create database bbs; show databas ...
- [BZOJ 1033][ZJOI2008]杀蚂蚁antbuster
1033: [ZJOI2008]杀蚂蚁antbuster Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1200 Solved: 507[Submi ...
- codeforces 1000F One Occurrence（线段树、想法）
codeforces 1000F One Occurrence 题意 多次询问lr之间只出现过一次的数是多少. 题解 将查询按照左端点排序,对于所有值维护它在当前位置后面第二次出现是什么时候,那么查询 ...
- c++我在努力----第三次作业体会
[github地址](https://github.com/kobe96/object-oriented) 这次作业的三大难点 1.类的应用 从我们并没有接触过c++,到掌握如何写一个程序,多个类的引 ...
- 浏览器相关--H5本地存储
因为项目需要,最近研究了一下HTML5本地存储相关的东西,在这简单的记录一下. 浏览器存储主要包括一下几个部分1. cookie2. localStorage3. sessionStorage4. i ...
- vue笔记2
vue项目目录 <pre> ├── build // 构建服务和webpack配置 ├── config // 项目不同环境的配置 ├── dist // 项目build目录 ├── in ...
- Pygame碰撞检测
学习自小甲鱼视频教学(笔记) 功能实现: 在随机位置生成若干个小球以随机速度运动: 若小球运动出左边界则从右边界进入,上下边界同理: 若两小球相碰撞则都以相反速度运动分开. 代码如下: 1.尝试自己写 ...
- list详解
#include <iostream> #include <vector> #include <list> std::list<std::string> ...