Ajax是常用的一門與Web服務器通信的技術，目前發送Ajax請求的主要有4種方式：
至于原生的XHR目前工作中已經很少去手寫它了，前些年我們比較常用的是jquery的ajax請求，但是近些年前端發展很快，jquery包裝的ajax已經失去了往日的光輝，取而代之的是新出現的axios和fetch，兩者都開始搶占“請求”這個前端重要領域。本文結合自己的使用經歷總結一下它們之間的一些區別，并給出一些自己的理解。
代碼示例：
以上代碼很簡單，我就不多解釋了，這就是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使用起來已經是很方便了，那為什么現在還會被慢慢拋棄呢？個人認為主要原因有以下幾點：
總結
隨著前端基于MVVM模式的Vue和React新一代框架的興起，以及ES6等新規范的制定，像Jquery這種大而全的JS庫注定是要走向低潮的。
代碼示例：
這種ajax請求方式是Vue框架的作者尤雨溪開始推薦使用的。其實Axios的本質也是基于原生XHR的封裝，只不過它是基于ES6的新語法Promise的實現版本。并且具有以下幾條特性：
總結
Axios除了和jquery ajax一樣封裝了原生的XHR，還提供了很多比如：并發請求、攔截等多種接口，同時它的體積還比較小，也沒有下文fetch的各種問題，可以說是目前最佳的ajax請求方式了。
代碼示例：
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的替代品。它的特性如下：
但是目前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”來實現跨域訪問，如下所示
我們會得到一個type為“opaque”（透明）的response。這個請求是真正抵達過后臺的，但是瀏覽器不可以訪問返回的內容，這也就是為什么response中的type為“opaque”（透明）的原因。
總結
Fetch還是一個新時代的半成品，很多地方并不完善，但是也有它的優勢所在，總的來說，就是Fetch技術還需要時間的沉淀，目前還沒有達到axios的性能。
如果你是直接拉到底部的，就只要記住這個結論就可以啦，目前只需要熟練使用Axios就可以啦，Jquery的ajax會逐漸被時代淘汰，Fetch雖然符合前端潮流，但是目前還尚不成熟，沒有Axios使用起來便利。
