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); // 嚴謹寫法
/** 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：當 readyState 屬性發(fā)生變化時，調(diào)用的事件處理函數(shù)

• readyState：

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

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

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

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

  類型	解釋
  “ ”	空的 responseType 字符串與默認類型 "text" 相同。
  "arraybuffer"	response 是一個包含二進制數(shù)據(jù)的 JavaScript ArrayBuffer。
  "blob"	response 是一個包含二進制數(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)當帶有授權(quán)信息，如 cookie 或授權(quán) header 頭。xhr.withCredentials=true

• upload：代表上傳進度

其他更多XMLHttpRequest相關(guān)api

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

• 優(yōu)點：

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

• 缺點：

  • 安全問題 AJAX暴露了與服務(wù)器交互的細節(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;

      // 當請求成功或失敗時，改變 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都當做成功的請求，需要封裝去處理
• fetch默認不會帶cookie，需要添加配置項
• fetch不支持abort，不支持超時控制，使用setTimeout及Promise.reject的實現(xiàn)的超時控制并不能阻止請求過程繼續(xù)在后臺運行，造成了量的浪費
• fetch沒有辦法原生監(jiā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的各種問題，而且體積也較小，當之無愧現(xiàn)在最應(yīng)該選用的請求的方式。

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

總結(jié)

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

最新評論