$.ajax实现原理（封装ajax）

/*<script>
ajax({
url:"data/data.json",
method:"get",
data:{name:"zf"},
dataType:"json",
cache:false,
async:false,
success:function (res) {
console.log(res);
}
})
</script>*/

//ajax.js

/*
ajax({
url:"请求路径",
type:"请求方式 type和method 一样使用",
dataType:"返回数据的类型 默认是text",
cache:"是否走缓存",
data:"请求的参数,如果是get请求,会将这里的内容拼接到url",
async:是否异步,
success:成功的回调,
error:失败的时候的回调,
complete:不管成功失败都会触发的函数
})

支持的参数
url,
method/type,
data,
dataType,
async,
cache,
success
*/

~function () {
class Ajax{
init(){
let  xhr=new XMLHttpRequest();
xhr.onreadystatechange= () =>{
if(!/^[23]\d{2}$/i.test(xhr.status))return;
if(xhr.readyState==4){
let result=xhr.responseText;
//对参数dataType
try {
switch (this.dataType.toUpperCase()){
case "TEXT":
break;
case "HTML":
break;
case "JSON":
result=JSON.parse(result);
break;
case "XML":
result=xhr.responseXML;
break;
}
}catch (e){
console.log(e);
}
this.success(result);
}
};
//处理data
if(this.data!==null){
this.query();
if(this.isGet){
//get请求需要将数据data拼接到url上
this.url+=this.queryBefore()+this.data;
//this.data没有用了就清空了
this.data=null;
}
}
//cache处理 只有get请求才有必要处理缓存
this.isGet?this.cacheFn():null;
xhr.open(this.method,this.url,this.async);

xhr.send(this.data);
}
query(){
//判断data必须是一个对象的时候去讲其变成字符串
if(this.data&&this.data.toString()=="[object Object]"){
let str=``;
for (let key in this.data){
if(this.data.hasOwnProperty(key)){
str+=`${key}=${this.data[key]}&`;
}
}
//后面多一个&符号
str=str.replace(/&$/g,"");
this.data=str;
}
}
queryBefore(){
//判断url有没有?
return this.url.includes("?")?"&":"?";
}
cacheFn(){
//判断this.cache是true还是false 只有false时候才处理缓存,加一个时间戳
!this.cache?this.url+=`${this.queryBefore()}_t=${(new Date).getTime()}`:null;
}
}
window.ajax=function ({
url=null,
method="GET",
type=null,
data=null,
dataType="JSON",
async=true,
cache=true,
success=null,
} = {}) {
let _this=new Ajax();
["url","method","data","dataType","async","cache","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.isGet=/^GET|DELETE|HEAD$/i.test(_this.method);
_this[item]=eval(item);
});
_this.init();
return _this;
}
}();