Ajax,jQuery ajax,axios和fetch的區別

Ajax：

Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創建交互式網頁應用的網頁開發技術。

Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

通過在後臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

Ajax技術核心就是XMLHttpRequest對象。

（1）設置請求參數（請求方式，請求頁面的相對路徑，是否異步發送請求）

（2）設置回調函數，一個處理服務器響應的函數，使用 onreadystatechange ，類似函數指針

（3）獲取異步對象的readyState 屬性：該屬性存有服務器響應的狀態信息。每當 readyState 改變時，onreadystatechange 函數就會被執行。

（4）判斷響應報文的狀態，若爲200說明服務器正常運行並返回響應數據。

（5）讀取響應數據，可以通過 responseText 屬性來取回由服務器返回的數據。

var xhr = new XMLHttpRequest();    			// 創建Ajax對象
xhr.open('get', 'aabb.php', true);			// xhr發送請求
xhr.send(null);
xhr.onreadystatechange = function() { 		// xhr獲取響應
    if(xhr.readyState == 4) {
        if(xhr.status == 200) {
            console.log(xhr.responseText);
        }
    }
}
 /* ajax返回的狀態:
     0：（未初始化）請求還沒有建立（open執行前） 
     1：（載入）請求建立了還沒發送（執行了open） 
     2：（載入完成）請求正式發送,send()方法執行完成，已經接收到全部響應內容（執行了send） 
     3：（交互）請求已受理，有部分數據可以用，但還沒有處理完成,正在解析響應內容
     4：（完成）響應內容解析完成，可以在客戶端調用了 
*/

Jquery Ajax：

是jQuery框架中的發送後端請求技術，由於jQuery是基於原始的基礎上做的封裝，所以，jquery Ajax自然也是對原始ajax的封裝

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

優缺點：

本身是針對MVC的編程,不符合現在前端MVVM的浪潮
基於原生的XHR開發，XHR本身的架構不清晰，已經有了fetch的替代方案
JQuery整個項目太大，單純使用ajax卻要引入整個JQuery非常的不合理（採取個性化打包的方案又不能享受CDN服務）

Fetch：

fetch號稱是AJAX的替代品，是在ES6出現的，使用了ES6中的promise對象。Fetch是基於promise設計的。Fetch的代碼結構比起ajax簡單多了，參數有點像jQuery ajax。

但是，一定記住fetch不是ajax的進一步封裝，而是原生js。Fetch函數就是原生js，沒有使用XMLHttpRequest對象。

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

你還可以通過Request構造器函數創建一個新的請求對象，你還可以基於原有的對象創建一個新的對象。新的請求和舊的並沒有什麼不同，但你可以通過稍微調整配置對象，將其用於不同的場景。例如：

var req = new Request(URL, {method: 'GET', cache: 'reload'});
fetch(req).then(function(response) {
  return response.json();
}).then(function(json) {
  insertPhotos(json);
});

fetch和ajax 的主要區別

1、fetch()返回的promise將不會拒絕http的錯誤狀態，即使響應是一個HTTP 404或者500

2、在默認情況下 fetch不會接受或者發送cookies

fetch的配置

Promise fetch(String url [, Object options]);
Promise fetch(Request req [, Object options]);

Axios：

axios不是原生JS的，需要進行安裝，它不但可以在客戶端使用，而且可以在nodejs端使用。Axios也可以在請求和響應階段進行攔截。同樣也是基於promise對象的。

https://blog.csdn.net/Roselane_Begger/article/details/88936818

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

優缺點：

從 node.js 創建 http 請求
支持 Promise API
客戶端支持防止CSRF
提供了一些併發請求的接口（重要，方便了很多的操作）

Ajax,jQuery ajax,axios和fetch的區別