摘要：在接收響應(yīng)期間持續(xù)不斷地觸發(fā)。在請求發(fā)生錯(cuò)誤時(shí)觸發(fā)。在通信完成或者觸發(fā)或事件后觸發(fā)。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)?；跇?biāo)準(zhǔn)被廣泛支持。破壞程序的異常處理機(jī)制。

原文（我的GitHub）：https://github.com/liangfengbo/frontend-ability/issues/1

理解Ajax的工作原理

Ajax核心-XMLHttpRequest對象

封裝Ajax方法

Ajax優(yōu)缺點(diǎn)

Ajax適應(yīng)場景

Ajax系列面試題總結(jié)

1. w3chool官網(wǎng)：Ajax 是一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。
2. 我的理解：無須刷新頁面即可從服務(wù)器取得數(shù)據(jù)的技術(shù)。

Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個(gè)中間層,使用戶操作與服務(wù)器響應(yīng)異步化。并不是所有的用戶請求都提交給服務(wù)器,像—些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給Ajax引擎自己來做, 只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎代為向服務(wù)器提交請求。

Ajax技術(shù)的核心是XMLHttpRequest對象。

IE5 XHR對象是通過MSXML庫中的一個(gè)ActiveX對象實(shí)現(xiàn)的，所以要考慮做兼容。

IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR對象

new ActiveXObject(versions);

new XMLHttpRequest();

/**
 * 創(chuàng)建Ajax
 * @param options
 */
function Ajax(options) {
  // 新建一個(gè)對象，用途接受XHR對象
  var xhr = null;

  // 第一步創(chuàng)建XMLHttpRequest對象 || 同時(shí)兼任IE
  // 首先檢測原生XHR對象是否存在，如果存在則返回它的新實(shí)例
  if (typeof XMLHttpRequest != "undefined") {
    xhr = new XMLHttpRequest();

    // 然后如果原生對象不存在，則檢測ActiveX對象
  } else if (typeof ActiveXObject != "undefined") {

    // 如果存在,則創(chuàng)建他的對象,但這個(gè)對象需要一個(gè)傳入?yún)?shù),如下:
    if (typeof arguments.callee.activeXString != "string") {
      // 對象版本
      var versions = [
        "Microsoft.XMLHTTP",
        "Msxml2.XMLHTTP.7.0",
        "Msxml2.XMLHTTP.6.0",
        "Msxml2.XMLHTTP.5.0",
        "Msxml2.XMLHTTP.4.0",
        "MSXML2.XMLHTTP.3.0",
        "MSXML.XMLHTTP"
      ], i, len;

      for (i = 0, len = versions.length; i < len; i++) {
        try {
          // 需要versions數(shù)組中的某個(gè)項(xiàng),數(shù)組的7個(gè)項(xiàng)分別對應(yīng)7個(gè)版本.
          new ActiveXObject(versions[i]);

          // arguments是javascript函數(shù)的內(nèi)置對象,代表傳入?yún)?shù)的集合，
          // callee就代表對象本身即new createXHR
          arguments.callee.activeXString = versions[i];
          break;

        } catch (e) {
          // 跳過
        }
      }
    }
    // 直到循環(huán)創(chuàng)建成功為止,然后給自己添加一個(gè)屬性叫activeXString
    xhr = new ActiveXObject(arguments.callee.activeXString);

  } else {
    // 如果這兩種對象都不存在，就拋出一個(gè)錯(cuò)誤
    throw new Error("No XHR object available");
  }

  /**
   ** options形參解析：
   * data 發(fā)送的參數(shù)，格式為對象類型
   * url 發(fā)送請求的url，服務(wù)器地址（api）
   * async 否為異步請求，true為異步的，false為同步的
   * method http連接的方式，包括POST和GET兩種方式
   */
  options = options || {};
  options.success = options.success || function () {
  };
  options.fail = options.fail || function () {
  };

  var data = options.data,
       url = options.url,
       async = options.async === undefined ? true : options.async,
       method = options.method.toUpperCase(),
       dataArr = [];

  // 遍歷參數(shù)
  for (var k in data) {
    dataArr.push(k + "=" + data[k]);
  }

  // GET請求
  if (method === "GET") {
    url = url + "?" + dataArr.join("&");
    xhr.open(method, url.replace(/?$/g, ""), async);
    xhr.send();
  }

  // POST請求
  if (method === "POST") {
    xhr.open(method, url, async);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(dataArr.join("&"));
  }

  // 響應(yīng)接收完畢后將觸發(fā)load事件
  xhr.onload = function () {

    /**
     * XHR對象的readyState屬性
     * 0：未初始化。尚未調(diào)用open()方法。
     * 1：啟動(dòng)。已經(jīng)調(diào)用open()方法，但尚未調(diào)用send()方法。
     * 2：發(fā)送。已經(jīng)調(diào)用send()方法，但尚未接收到響應(yīng)。
     * 3：接收。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)。
     * 4：完成。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在客戶端使用了。
     */
    if (xhr.readyState == 4) {
      // 得到響應(yīng)
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        // 處理成功數(shù)據(jù)
        var res;
        if (options.success && options.success instanceof Function) {
          res = xhr.responseText;
          if (typeof res === "string") {
            res = JSON.parse(res);
            options.success.call(xhr, res);
          }
        }
      } else {
        // 處理錯(cuò)誤數(shù)據(jù)
        if (options.fail && options.fail instanceof Function) {
          options.fail.call(xhr, res)
        }
      }

    } else {
      // 拋出檢測XHR對象的readyState屬性
      console.log("XHR was readyState：", xhr.readyState);
    }
  }
}

Ajax({
  url: "http://localhost:3000/api/v1/article",
  method: "GET",
  async: true,
  success: function (res) {
    console.log("successful", res);
  },
  fail: function (err) {
    console.log("fail", err);
  }
})

successful {code: 200, msg: "查詢文章列表成功！", data: {…}}

AJAX最大優(yōu)點(diǎn)就是能在不刷新整個(gè)頁面的前提下與服務(wù)器通信維護(hù)數(shù)據(jù)。這使得Web應(yīng)用程序更為迅捷地響應(yīng)用戶交互，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒有改變的信息，減少用戶等待時(shí)間，帶來非常好的用戶體驗(yàn)。

AJAX使用異步方式與服務(wù)器通信，不需要打斷用戶的操作，具有更加迅速的響應(yīng)能力。優(yōu)化了Browser和Server之間的溝通，減少不必要的數(shù)據(jù)傳輸、時(shí)間及降低網(wǎng)絡(luò)上數(shù)據(jù)流量。

AJAX可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。并且減輕服務(wù)器的負(fù)擔(dān)，AJAX的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請求和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)，提升站點(diǎn)性能。

AJAX基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載瀏覽器插件或者小程序，但需要客戶允許JavaScript在瀏覽器上執(zhí)行。隨著Ajax的成熟，一些簡化Ajax使用方法的程序庫也相繼問世。同樣，也出現(xiàn)了另一種輔助程序設(shè)計(jì)的技術(shù)，為那些不支持JavaScript的用戶提供替代功能。

Ajax使WEB中的界面與應(yīng)用分離（也可以說是數(shù)據(jù)與呈現(xiàn)分離），有利于分工合作、減少非技術(shù)人員對頁面的修改造成的WEB應(yīng)用程序錯(cuò)誤、提高效率、也更加適用于現(xiàn)在的發(fā)布系統(tǒng)。

在動(dòng)態(tài)更新頁面的情況下，用戶無法回到前一個(gè)頁面狀態(tài)，因?yàn)闉g覽器僅能記憶歷史記錄中的靜態(tài)頁面。一個(gè)被完整讀入的頁面與一個(gè)已經(jīng)被動(dòng)態(tài)修改過的頁面之間的差別非常微妙；用戶通常會(huì)希望單擊后退按鈕能夠取消他們的前一次操作，但是在Ajax應(yīng)用程序中，這將無法實(shí)現(xiàn)

JAX技術(shù)給用戶帶來很好的用戶體驗(yàn)的同時(shí)也對IT企業(yè)帶來了新的安全威脅，Ajax技術(shù)就如同對企業(yè)數(shù)據(jù)建立了一個(gè)直接通道。這使得開發(fā)者在不經(jīng)意間會(huì)暴露比以前更多的數(shù)據(jù)和服務(wù)器邏輯。Ajax的邏輯可以對客戶端的安全掃描技術(shù)隱藏起來，允許黑客從遠(yuǎn)端服務(wù)器上建立新的攻擊。還有Ajax也難以避免一些已知的安全弱點(diǎn)，諸如跨站點(diǎn)腳步攻擊、SQL注入攻擊和基于Credentials的安全漏洞等等

對搜索引擎的支持比較弱。如果使用不當(dāng)，AJAX會(huì)增大網(wǎng)絡(luò)數(shù)據(jù)的流量，從而降低整個(gè)系統(tǒng)的性能。

至少從目前看來，像Ajax.dll，Ajaxpro.dll這些Ajax框架是會(huì)破壞程序的異常機(jī)制的。關(guān)于這個(gè)問題，曾在開發(fā)過程中遇到過，但是查了一下網(wǎng)上幾乎沒有相關(guān)的介紹。后來做了一次試驗(yàn)，分別采用Ajax和傳統(tǒng)的form提交的模式來刪除一條數(shù)據(jù)……給我們的調(diào)試帶來了很大的困難

一些手持設(shè)備（如手機(jī)、PDA等）現(xiàn)在還不能很好的支持Ajax，比如說我們在手機(jī)的瀏覽器上打開采用Ajax技術(shù)的網(wǎng)站時(shí)，它目前是不支持的。

表單驅(qū)動(dòng)的交互

深層次的樹的導(dǎo)航

快速的用戶與用戶間的交流響應(yīng)

類似投票、yes/no等無關(guān)痛癢的場景

對數(shù)據(jù)進(jìn)行過濾和操縱相關(guān)數(shù)據(jù)的場景

普通的文本輸入提示和自動(dòng)完成的場景

部分簡單的表單

搜索

基本的導(dǎo)航

替換大量的文本

對呈現(xiàn)的操縱

Ajax并不算是一種新的技術(shù)，全稱是asychronous javascript and xml，可以說是已有技術(shù)的組合，主要用來實(shí)現(xiàn)客戶端與服務(wù)器端的異步通信效果，實(shí)現(xiàn)頁面的局部刷新，早期的瀏覽器并不能原生支持ajax，可以使用隱藏幀（iframe）方式變相實(shí)現(xiàn)異步效果，后來的瀏覽器提供了對ajax的原生支持

使用ajax原生方式發(fā)送請求主要通過XMLHttpRequest(標(biāo)準(zhǔn)瀏覽器)、ActiveXObject(IE瀏覽器)對象實(shí)現(xiàn)異步通信效果

基本步驟：

var xhr =null;//創(chuàng)建對象 

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

xhr.open(“方式”,”地址”,”標(biāo)志位”);//初始化請求 

xhr.setRequestHeader(“”,””);//設(shè)置http頭信息 

xhr.onreadystatechange =function(){}//指定回調(diào)函數(shù) 

xhr.send();//發(fā)送請求 

js框架（jQuery/EXTJS等）提供的ajax API對原生的ajax進(jìn)行了封裝，熟悉了基礎(chǔ)理論，再學(xué)習(xí)別的框架就會(huì)得心應(yīng)手，好多都是換湯不換藥的內(nèi)容

同步：阻塞的

張三叫李四去吃飯，李四一直忙得不停，張三一直等著，直到李四忙完兩個(gè)人一塊去吃飯，瀏覽器向服務(wù)器請求數(shù)據(jù)，服務(wù)器比較忙，瀏覽器一直等著（頁面白屏），直到服務(wù)器返回?cái)?shù)據(jù)，瀏覽器才能顯示頁面

異步：非阻塞的

張三叫李四去吃飯，李四在忙，張三說了一聲然后自己就去吃飯了，李四忙完后自己去吃，瀏覽器向服務(wù)器請求數(shù)據(jù)，服務(wù)器比較忙，瀏覽器可以自如的干原來的事情（顯示頁面），服務(wù)器返回?cái)?shù)據(jù)的時(shí)候通知瀏覽器一聲，瀏覽器把返回的數(shù)據(jù)再渲染到頁面，局部更新

理解跨域的概念：協(xié)議、域名、端口都相同才同域，否則都是跨域

出于安全考慮，服務(wù)器不允許ajax跨域獲取數(shù)據(jù)，但是可以跨域獲取文件內(nèi)容，所以基于這一點(diǎn)，可以動(dòng)態(tài)創(chuàng)建script標(biāo)簽，使用標(biāo)簽的src屬性訪問js文件的形式獲取js腳本，并且這個(gè)js腳本中的內(nèi)容是函數(shù)調(diào)用，該函數(shù)調(diào)用的參數(shù)是服務(wù)器返回的數(shù)據(jù)，為了獲取這里的參數(shù)數(shù)據(jù)，需要事先在頁面中定義回調(diào)函數(shù)，在回調(diào)函數(shù)中處理服務(wù)器返回的數(shù)據(jù)，這就是解決跨域問題的主流解決方案

對于ajax請求傳遞的參數(shù)，如果是get請求方式，參數(shù)如果傳遞中文，在有些瀏覽器會(huì)亂碼，不同的瀏覽器對參數(shù)編碼的處理方式不同，所以對于get請求的參數(shù)需要使用encodeURIComponent函數(shù)對參數(shù)進(jìn)行編碼處理，后臺(tái)開發(fā)語言都有相應(yīng)的解碼api。對于post請求不需要進(jìn)行編碼

創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個(gè)異步調(diào)用對象

創(chuàng)建一個(gè)新的HTTP請求,并指定該HTTP請求的方法、URL及驗(yàn)證信息

設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù)

發(fā)送HTTP請求

獲取異步調(diào)用返回的數(shù)據(jù)

使用JavaScript和DOM實(shí)現(xiàn)局部刷新

異步加載的方案： 動(dòng)態(tài)插入 script 標(biāo)簽

通過 ajax 去獲取 js 代碼，然后通過 eval 執(zhí)行

script 標(biāo)簽上添加 defer 或者 async 屬性

創(chuàng)建并插入 iframe，讓它異步執(zhí)行 js