目錄

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

AJAX原理

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

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

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

• onreadystatechange：當(dāng) readyState 屬性發(fā)生變化時，調(diào)用的事件處理函數(shù)

• readyState：

  值狀態(tài)描述0UNSENT代理被創(chuàng)建，但尚未調(diào)用 open() 方法。1OPENEDopen() 方法已經(jīng)被調(diào)用。2HEADERS_RECEIVEDsend() 方法已經(jīng)被調(diào)用，并且頭部和狀態(tài)已經(jīng)可獲得。3LOADING下載中； responseText 屬性已經(jīng)包含部分?jǐn)?shù)據(jù)。4DONE下載操作已完成。

• response：返回的包含整個響應(yīng)實體

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

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

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

• status：返回一個無符號短整型（unsigned short）數(shù)字，代表請求的響應(yīng)狀態(tài)。

  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（未發(fā)送） 0 * OPENED（已打開） 0 * LOADING（載入中） 200 * DONE（完成） 200 */

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

• upload：代表上傳進(jìn)度

ajax 有那些優(yōu)缺點?

• 優(yōu)點：

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

• 缺點：

  • 安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。
  • 對搜索引擎的支持比較弱。
  • 不容易調(diào)試。

Promise封裝Ajax

promise 封裝實現(xiàn)：

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

JQ Ajax、Axios、Fetch的核心區(qū)別

JQuery Ajax

Ajax前后端數(shù)據(jù)通信「同源、跨域」

// 用戶登錄 -> 登錄成功 -> 獲取用戶信息/* 回調(diào)地獄 */$.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);}    });}    }});

優(yōu)缺點：

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

Axios

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

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);})(); 

優(yōu)缺點：

• 從瀏覽器中創(chuàng)建 XMLHttpRequest
• 從 node.js 發(fā)出 http 請求
• 支持 Promise API
• 攔截請求和響應(yīng)
• 轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
• 取消請求
• 自動轉(zhuǎn)換JSON數(shù)據(jù)
• 客戶端支持防止CSRF/XSRF

Fetch

Fetch是ES6新增的通信方法，不是ajax，但是他本身實現(xiàn)數(shù)據(jù)通信，就是基于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);})(); 

優(yōu)缺點：

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

補充：為什么要用axios?

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

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

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

總結(jié)

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