Ajax是常用的一門與Web服務器通信的技術，目前發送Ajax請求的主要有4種方式：
- 原生XHR
- jquery中的$.ajax()
- axios
- fetch
至於原生的XHR目前工作中已經很少去手寫它了，前些年我們比較常用的是jquery的ajax請求，但是近些年前端發展很快，jquery包裝的ajax已經失去了往日的光輝，取而代之的是新出現的axios和fetch，兩者都開始搶占“請求”這個前端重要領域。本文結合自己的使用經歷總結一下它們之間的一些區別，並給出一些自己的理解。
1.Jquery ajax
代碼示例：
$.ajax({
type:"GET",
url:url,
data:data,
dataType:dataType
success:function(){},
error:function(){}
})
以上代碼很簡單，我就不多解釋了，這就是jquery對原生XHR的封裝，另外還增加了jsonp的支持，讓ajax請求可以支持跨域請求，但是要注意的是：jsonp請求本質不是XHR異步請求，就是請求了一個js文件，因此在瀏覽器的network面板中的xhr標簽下看不到jsonp的跨域請求，但是在js標簽下能看見。
jsonp請求示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jQuery-AJAX--讀取獲得跨域JSONP數據</title>
<script src="./jquery-1.7.2.js" type="text/javascript"></script>
<style type="text/css">
body,html{font-family: "Microsoft Yahei";}
a{text-decoration: none;}
</style>
</head>
<body>
<h2><a href="javascript:void(0)" class="btnAJAX">點擊AJAX獲取數據JSONP跨域....</a></h2>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".btnAJAX").click(function(){
$.ajax({
type : "get",
async:false,
url : "http://weather.123.duba.net/static/weather_info/101121301.html",
dataType : "jsonp",
jsonp: "", //服務端用於接收callback調用的function名的參數
jsonpCallback:"weather_callback", //callback的function名稱
success : function(json){
console.log(json); //瀏覽器調試的時候用
},
error:function(){
alert('fail');
}
});
});
});
</script>
</body>
</html>
效果如下：
當點擊以上文字時，查看xhr請求，發現並沒有發出xhr請求
再查看js請求，發現js發出了一個請求，因此jsonp本質是js請求而並非xhr 請求，只是$.ajax把jsonp請求封裝到了ajax里面而已。
其實jquery ajax使用起來已經是很方便了，那為什么現在還會被慢慢拋棄呢？個人認為主要原因有以下幾點：
- 要使用jquery ajax必須引入jquery整個大文件，不是很划算
- jquery ajax本身是針對MVC設計模式的編程，與當前流行的基於MVVM模式的vue、react等框架不符合
- jquery ajax本質是基於XHR的封裝，而XHR本身架構不是很清晰，目前已采用fetch代替方案
總結
隨着前端基於MVVM模式的Vue和React新一代框架的興起，以及ES6等新規范的制定，像Jquery這種大而全的JS庫注定是要走向低潮的。
2.Axios
代碼示例：
axios({
method: 'post',
url: '/login',
data: {
username:'martin',
password:'a1234567'
}
})
.then(function (res) {
console.log(res);
})
.catch(function (err) {
console.log(err);
});
這種ajax請求方式是Vue框架的作者尤雨溪開始推薦使用的。其實Axios的本質也是基於原生XHR的封裝，只不過它是基於ES6的新語法Promise的實現版本。並且具有以下幾條特性：
- 從瀏覽器中創建XHR
- 從node.js中創建http請求
- 支持promise API
- 提供了並發請求的接口（重要，方便操作）
- 支持攔截請求和響應
- 支持取消請求
- 客戶端支持防御CSRF攻擊
總結
Axios除了和jquery ajax一樣封裝了原生的XHR，還提供了很多比如：並發請求、攔截等多種接口，同時它的體積還比較小，也沒有下文fetch的各種問題，可以說是目前最佳的ajax請求方式了。
3.Fetch
代碼示例：
try{
var response=await fetch(url);
var data=response.json();
console.log(data);
}catch(e){
console.log('error is'+e);
}
上面說的$.ajax和Axios說到底本質都是對原生XHR的封裝，但是Fetch可以說是新時代XHR的替代品。它的特性如下：
- 更加底層，提供更豐富的API
- 不基於XHR，是ES新規范的實現方式
但是目前Fetch還存在很多問題
1）fetch只對網絡請求報錯，對400，500都當做成功的請求
2）fetch默認不會帶cookie，需要添加配置項
3）fetch沒有辦法原生監測請求的進度，而XHR可以
Fetch在使用上說實話目前還沒有axios和jquery ajax方便,因此我個人在工作中也是使用axios的比較多。說到這里，你可能覺得Fetch就是強行用ES新規范做出來的代替XHR的半成品，事實上我就是這么認為的。但是有一點Fetch做的性能要遠比XHR要好，那就是“跨域的處理”。
因為同源策略的約束，瀏覽器發送的請求是不能隨便跨域的，一定要借助JSONP或者跨域頭來協助跨域，而Fetch可以直接設置mode為“no-cors”來實現跨域訪問，如下所示
fetch('/login.json', {
method: 'post',
mode: 'cors',
data: {name:martin''}
}).then(function() { /* handle response */ });
我們會得到一個type為“opaque”（透明）的response。這個請求是真正抵達過后台的，但是瀏覽器不可以訪問返回的內容，這也就是為什么response中的type為“opaque”（透明）的原因。
總結
Fetch還是一個新時代的半成品，很多地方並不完善，但是也有它的優勢所在，總的來說，就是Fetch技術還需要時間的沉淀，目前還沒有達到axios的性能。
4.大總結
如果你是直接拉到底部的，就只要記住這個結論就可以啦，目前只需要熟練使用Axios就可以啦，Jquery的ajax會逐漸被時代淘汰，Fetch雖然符合前端潮流，但是目前還尚不成熟，沒有Axios使用起來便利。