众所周知,目前应用较为广泛的Ajax方式分两种,原生方法(代码一)及jQuery方法(代码二)。
代码一:(在上古时代还要判断IE6是否支持读取方式,目前已经基本灭绝,所以我就省略那一步了。)

var Rotk= new XMLHttpRequest();  
Rotk.onreadystatechange=function(){  
    if (Rotk.readyState==4 && Rotk.status==200){  
        console.log(Rotk.response;);  
    }  
}  
Rotk.open("GET","/files/emil.txt",true);  
Rotk.send();

代码二:

$.ajax({
    type:"GET",
    url:"/files/emil.txt",
    cache:false
}).then(function(mes){
    console.log(mes)
})

其实差距也不大,但是我们都知道,如果只是为了使用Ajax而引入jQuery这种做法是相当愚蠢的,但是原生的Ajax代码太长了,每次使用都来一遍好像也不是什么明智的选择,于是!邪门歪道就来了。
我们可以写这么一个方法:

function zAjax(type,url,data,re){  
var Rotk= new XMLHttpRequest();  
Rotk.onreadystatechange=function(){  
    if (Rotk.readyState==4 && Rotk.status==200){  
        re(Rotk.response)
    }  
}  
Rotk.open(type,url,true);  
Rotk.setRequestHeader("Content-Type", "application/json;charset=utf-8");
Rotk.setRequestHeader("Cache-Control","no-cache");
Rotk.send(data);
}  

那么,怎么使用他呢?

zAjax("GET","/files/emil.txt","",function(res){
    console.log(res);
})

之后每次使用只需要将访问类型,链接,传输数据,按顺序填上,然后使用回调函数,就可以轻松访问了。 也许有同学会问,为什么不使用return呢,直接
var data=zAjax("GET","/files/emil.txt","") 不是更好吗?当初我也有这样的疑问,知乎网友给了我一个非常详细的回答,欢迎前往阅读。
当然,细心的朋友也发现了,我这多了两行:
Rotk.setRequestHeader("Content-Type", "application/json;charset=utf-8");
Rotk.setRequestHeader("Cache-Control","no-cache");
他们分别是设定传输的字符串格式(通常用于POST访问方式)以及清除访问缓存,当然这两行代码看需求添加,但是一定要写在Ajax访问的open之后,send之前才能生效。

评论

本文目前还没有评论……

我要评论

需要登录后才能发言
登录未成功,请修改提交。

× 3