目錄

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

AJAX原理

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

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

/** 1. 創(chuàng)建Ajax對(duì)象 **/var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");// 兼容IE6及以下版本/** 2. 配置 Ajax請(qǐng)求 **/xhr.open("get", url, true)/** 3. 發(fā)送請(qǐng)求 **/xhr.send(null); // 嚴(yán)謹(jǐn)寫法/** 4. 監(jiān)聽(tīng)請(qǐng)求，接受響應(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ā)生變化時(shí)，調(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：返回的包含整個(gè)響應(yīng)實(shí)體

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

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

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

• status：返回一個(gè)無(wú)符號(hào)短整型（unsigned short）數(shù)字，代表請(qǐng)求的響應(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（已打開(kāi)） 0 * LOADING（載入中） 200 * DONE（完成） 200 */

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

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

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

• 優(yōu)點(diǎn)：

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

• 缺點(diǎn)：

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

Promise封裝Ajax

promise 封裝實(shí)現(xiàn)：

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

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

Axios

Axios也是對(duì)ajax的封裝，基于Promise管理請(qǐng)求，解決回調(diào)地獄問(wèn)題

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)缺點(diǎn)：

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

Fetch

Fetch是ES6新增的通信方法，不是ajax，但是他本身實(shí)現(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)缺點(diǎn)：

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

補(bǔ)充：為什么要用axios?

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

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

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

總結(jié)

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