首先,ajax是一种技术,实现网页部分数据的刷新,那么ajax是怎么实现的呢?先看一下基础版的ajax封装:
var xml=new XMLHttpRequest()
xml.open('get',url,false)
xml.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200||xhr.status==304){
console.log(xhr.responseText)
}
}
}
xml.send()
xml.open('post',url,false)
xml.setRequestHeader('Content-type','application/x-www-urlencoded')
xml.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200||xhr.status==304){
console.log(xhr.responseText)
}
}
}
xml.send()
可以看出这就是XML的基本使用,其实无论jquery的ajax方法,还是axios,都是基于XML进行封装的。
jquery的ajax方法的使用场景和优缺点
使用场景:
一些没有使用框架的项目中,因为基本项目中引入jquery会节省很多操作,而jquery对ajax也进行了封装,能兼容各个浏览器。
优点:
兼容性高,能在各个浏览器中使用,而且简化了使用
增加了对jsonp的支持,可以支持简单的跨域
缺点:
如果有多个请求,且有依赖关系,很容易形成回调地狱
本身是针对MVC的编程,不符合现在MVVM的潮流
如果只使用ajax这个方法,还要引入整个jquery库,得不偿失
axios的使用场景和优缺点
使用场景:
各个支持高级语法的地方,因为axios是基于Promise进行封装的
优点:
支持Promise Api
有请求和发送拦截,可以进行处理
传唤请求数据和响应数据
客户端支持防御XSRF
缺点:
值适用于高版本浏览器
fetch的使用场景和优缺点
fetch是低层次的API,代替XHR,可以轻松处理各种格式,非文本化格式。可以很容易的被其他技术使用,例如Service Workers。但是想要很好的使用fetch,需要做一些封装处理
fetch("http://example.com/movies.json")
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
优势
跨域很简单
fetch({
url:'api/index',
method:'post',
mode:'no-cors',
})
劣势:
fetch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理
fetch默认不会带cookie,需要添加配置项。
fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费。
fetch没有办法原生监测请求的进度,而XHR可以。