手动封装一个属于自己的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 ...
随机推荐
- 【Oracle】DBMS_STATS.GATHER_TABLE_STATS详解
由于Oracle的优化器是CBO,所以对象的统计数据对执行计划的生成至关重要! 作用:DBMS_STATS.GATHER_TABLE_STATS统计表,列,索引的统计信息(默认参数下是对表进行直 ...
- iOS设计模式 - 原型
iOS设计模式 - 原型 原理图 说明 1. 原型模式指的是从一个已有的对象复制并创建出新的对象 2. 当一个类的实例之间存在差异,而这些差异仅是状态的若干组合,复制原型要比手工实例化更加方便 3. ...
- Linux server配置安装Java,Tomcat服务器
系统:Ubuntu 16.04 dev_desktop 1.Java安装并配置环境变量 (1)从Java官方网站下载最新版JDK: http://www.oracle.com/technetwork/ ...
- Java学习---面向对象的远程方法调用[RMI]
基础知识 分布式计算是一门计算机科学,它研究如何把一个需要非常巨大的计算能力才能解决的问题分成许多小的部分,然后把这些部分分配给许多计算机进行处理,最后把这些计算结果综合起来得到最终的结果. 常见的分 ...
- gitlab自动备份恢复与卸载
一.gitlab数据备份gitlab-rake gitlab:backup:create命令会在/var/opt/gitlab/backups目录下创建一个名称类似为1393513186_gitlab ...
- js的一道经典题目
今天碰到一道题,里面既包含了匿名函数的知识,也包含了预编译,函数的传参(形参),感觉迷迷糊糊的,所以想着做个总结. var foo={n:1}; (function(foo){ console.log ...
- Eclipse+Maven 项目创建
★:jar包下载不了的话可能是镜像里没有这个版本,换个低版本的就行 ★:eclipse工程validating很慢,可以先关掉验证(一般对项目没什么影响) ★:eclipse工程pom.xml文件报错 ...
- 一个简单的使用matplotlib作图的例子
#使用matplotlib作图 import numpy as np import matplotlib.pyplot as plt #x = np.linspace(start, stop, num ...
- 深入剖析php执行原理（4）：函数的调用
本章开始研究php中函数的调用和执行,先来看函数调用语句是如何被编译的. 我们前面的章节弄明白了函数体会被编译生成哪些zend_op指令,本章会研究函数调用语句会生成哪些zend_op指,等后面的章节 ...
- LVS.md
LVS 概述 简介 LVS是Linux Virtual Server的简称,也就是Linux虚拟服务器, 是一个由章文嵩博士发起的自由软件项目,官方站点.现在LVS已经是 Linux标准内核的一部分, ...