ajax原理

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

xmlhttprequest（xhr）對(duì)象用于與服務(wù)器交互。通過 xmlhttprequest 可以在不刷新頁面的情況下請(qǐng)求特定 url，獲取數(shù)據(jù)。這允許網(wǎng)頁在不影響用戶操作的情況下，更新頁面的局部內(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)聽請(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)	描述
  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)包含部分?jǐn)?shù)據(jù)。
  4	done	下載操作已完成。

• 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是通過將接收到的數(shù)據(jù)內(nèi)容解析為json的js對(duì)象
  "text"	response 是 domstring 對(duì)象中的文本。
  "ms-stream"	response是流式下載的一部分；此響應(yīng)類型僅允許用于下載請(qǐng)求，并且僅受 internet explorer 支持。

• status：返回一個(gè)無符號(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（已打開） 0
   * loading（載入中） 200
   * done（完成） 200
   */

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

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

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

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

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

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

• 缺點(diǎ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)聽函數(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)聽函數(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開發(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)地獄問題

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)求過程繼續(xù)在后臺(tái)運(yùn)行，造成了量的浪費(fèi)
• fetch沒有辦法原生監(jiān)測請(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ā)的封裝，也沒有fetch的各種問題，而且體積也較小，當(dāng)之無愧現(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)文章希望大家以后多多支持碩編程！