目錄

• AJAX原理
• Promise封裝Ajax
• JQ Ajax、Axios、Fetch的核心區別
• JQuery Ajax
• Axios
• Fetch
• 補充：為什么要用axios?
• 總結

AJAX原理

• Ajax的原理簡單來說是在用戶和服務器之間加了—個中間層(AJAX引擎)，通過XmlHttpRequest對象來向服務器發異步請求，從服務器獲得數據，然后用javascript來操作DOM而更新頁面。使用戶操作與服務器響應異步化。
• Ajax的過程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心機制

XMLHttpRequest（XHR）對象用于與服務器交互。通過 XMLHttpRequest 可以在不刷新頁面的情況下請求特定 URL，獲取數據。這允許網頁在不影響用戶操作的情況下，更新頁面的局部內容。XMLHttpRequest 可以用于獲取任何類型的數據，而不僅僅是 XML。甚至支持 HTTP以外的協議（包括 file:// 和 FTP），盡管可能受到更多出于安全等原因的限制。

/** 1. 創建Ajax對象 **/var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");// 兼容IE6及以下版本/** 2. 配置 Ajax請求 **/xhr.open("get", url, true)/** 3. 發送請求 **/xhr.send(null); // 嚴謹寫法/** 4. 監聽請求，接受響應 **/xhr.onreadystatechange = function(){    if(xhr.readyState == 4){if(xhr.status == 200){    success(xhr.responseText);} else {     /** false **/    fail && fail(xhr.status);}    }}

• onreadystatechange：當 readyState 屬性發生變化時，調用的事件處理函數

• readyState：

  值狀態描述0UNSENT代理被創建，但尚未調用 open() 方法。1OPENEDopen() 方法已經被調用。2HEADERS_RECEIVEDsend() 方法已經被調用，并且頭部和狀態已經可獲得。3LOADING下載中； responseText 屬性已經包含部分數據。4DONE下載操作已完成。

• response：返回的包含整個響應實體

• responseText：返回一個DOMString，該 DOMString 包含對請求的響應，如果請求未成功或尚未發送，則返回 null。

• responseType：一個用于定義響應類型的枚舉值（enumerated value）。

  類型解釋“ ”空的 responseType 字符串與默認類型 "text" 相同。"arraybuffer"response 是一個包含二進制數據的 JavaScript ArrayBuffer。"blob"response 是一個包含二進制數據的 Blob 對象。"document"response 是一個 HTMLDocument或XMLDocument"json"response是通過將接收到的數據內容解析為JSON的JS對象"text"response 是 DOMString 對象中的文本。"ms-stream"response是流式下載的一部分；此響應類型僅允許用于下載請求，并且僅受 Internet Explorer 支持。

• status：返回一個無符號短整型（unsigned short）數字，代表請求的響應狀態。

  var xhr = new XMLHttpRequest();console.log("UNSENT", xhr.status);xhr.open("GET", "/server", true);console.log("OPENED", xhr.status);xhr.onprogress = function () {  console.log("LOADING", xhr.status);};xhr.onload = function () {  console.log("DONE", xhr.status);};xhr.send(null);/** * 輸出如下： * * UNSENT（未發送） 0 * OPENED（已打開） 0 * LOADING（載入中） 200 * DONE（完成） 200 */

• withCredentials：一個布爾值，用來指定跨域 Access-Control 請求是否應當帶有授權信息，如 cookie 或授權 header 頭。xhr.withCredentials=true

• upload：代表上傳進度

ajax 有那些優缺點?

• 優點：

  • 通過異步模式，提升了用戶體驗.
  • 優化了瀏覽器和服務器之間的傳輸，減少不必要的數據往返，減少了帶寬占用.
  • Ajax在客戶端運行，承擔了一部分本來由服務器承擔的工作，減少了大用戶量下的服務器負載。
  • Ajax可以實現動態不刷新（局部刷新）

• 缺點：

  • 安全問題 AJAX暴露了與服務器交互的細節。
  • 對搜索引擎的支持比較弱。
  • 不容易調試。

Promise封裝Ajax

promise 封裝實現：

// promise 封裝實現：function getJSON(url) {  // 創建一個 promise 對象  let promise = new Promise(function(resolve, reject) {    let xhr = new XMLHttpRequest();    // 新建一個 http 請求    xhr.open("GET", url, true);    // 設置狀態的監聽函數    xhr.onreadystatechange = function() {      if (this.readyState !== 4) return;      // 當請求成功或失敗時，改變 promise 的狀態      if (this.status === 200) {resolve(this.response);      } else {reject(new Error(this.statusText));      }    };    // 設置錯誤監聽函數    xhr.onerror = function() {      reject(new Error(this.statusText));    };    // 設置響應的數據類型    xhr.responseType = "json";    // 設置請求頭信息    xhr.setRequestHeader("Accept", "application/json");    // 發送 http 請求    xhr.send(null);  });  return promise;}

JQ Ajax、Axios、Fetch的核心區別

JQuery Ajax

Ajax前后端數據通信「同源、跨域」

// 用戶登錄 -> 登錄成功 -> 獲取用戶信息/* 回調地獄 */$.ajax({    url: "http://127.0.0.1:8888/user/login",    method: "post",    data: Qs.stringify({account: "18310612838",password: md5("1234567890")    }),    success(result) {if (result.code === 0) {    // 登錄成功    $.ajax({url: "http://127.0.0.1:8888/user/list",method: "get",success(result) {    console.log(result);}    });}    }});

優缺點：

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

Axios

Axios也是對ajax的封裝，基于Promise管理請求，解決回調地獄問題

axios({    method: "post",    url: "/user/login",    data: {username: "name",password: "password"    }}).then(function (response) {    console.log(response);}).catch(function (error) {    console.log(error);});// 或使用 async await(async function () {    let result1 = await axios.post("/user/login", {username: "name",password: "password"    });    let result2 = await axios.get("/user/list");    console.log(result1, result2);})(); 

優缺點：

• 從瀏覽器中創建 XMLHttpRequest
• 從 node.js 發出 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求和響應數據
• 取消請求
• 自動轉換JSON數據
• 客戶端支持防止CSRF/XSRF

Fetch

Fetch是ES6新增的通信方法，不是ajax，但是他本身實現數據通信，就是基于promise管理的

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

示例：

(async function () {    let result = await fetch("http://127.0.0.1:8888/user/login", {method: "post",headers: {    "Content-Type": "application/x-www-form-urlencoded"},body: Qs.stringify({    name: "name",    password: "password"})    })    let data = result.json();    console.log(data)?    let result2 = await fetch("http://127.0.0.1:8888/user/list").then(response => {return response.json();    });    console.log(result2);})(); 

優缺點：

• fetcht只對網絡請求報錯，對400，500都當做成功的請求，需要封裝去處理
• fetch默認不會帶cookie，需要添加配置項
• fetch不支持abort，不支持超時控制，使用setTimeout及Promise.reject的實現的超時控制并不能阻止請求過程繼續在后臺運行，造成了量的浪費
• fetch沒有辦法原生監測請求的進度，而XHR可以

補充：為什么要用axios?

axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特征：

• 從瀏覽器中創建 XMLHttpRequest
• 從 node.js 發出 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求和響應數據
• 取消請求
• 自動轉換JSON數據
• 客戶端支持防止CSRF/XSRF
• axios既提供了并發的封裝，也沒有fetch的各種問題，而且體積也較小，當之無愧現在最應該選用的請求的方式。

三選一絕必是axios了。其流程圖如下：

總結

到此這篇關于AJAX原理以及axios、fetch區別的文章就介紹到這了,更多相關AJAX原理 axios、fetch區別內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！