一,简介
我之前的博客已经介绍了原生的ajax和jquery封装ajax,这篇博客介绍下新颖的技术typeScript封装下ajax。
二,使用
对比jquery的封装:
$.ajax({
url : 'http://102.37.175.185:3000/index',
type : 'GET',
data : {
uname : uname
},
dataType : 'json'
})
对于jquery封装的四个属性就是url,type,data,dataType。
所以对于typeScript首先封装的就是这四个了
首先先声明一个接口,存储着四个属性
interface Config{
type : string;
url : string;
//可写可不写
data?: string;
dataType : string;
}
然后我通过声明一个函数,接受接口Config里的属性
function ajax(config : Config){
var xhr = new XMLHttpRequest();
xhr.open(config.type,config.url,true);
xhr.send(config.data);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log("成功");
}
}
}
基本和jquery封装的原理一样
接下来就是调用接口传入数据了
ajax({
type : 'GET',
data : 'name = zhang',
url : 'http://102.37.175.185:3000/index',
data : 'json'
})
这个接口通过服务器后台传输过来,通过调用获得数据
基本就是这些,和jquery封装类似,只是相对于jquery更前沿一些,毕竟技术都是更新换代的。
关于封装typeScript的封装ajax就这些,相比之下是不是更好用些!!!