摘要：在接收響應期間持續不斷地觸發。在請求發生錯誤時觸發。在通信完成或者觸發或事件后觸發。已經接收到部分響應數據。基于標準被廣泛支持。破壞程序的異常處理機制。

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

理解Ajax的工作原理

Ajax核心-XMLHttpRequest對象

封裝Ajax方法

Ajax優缺點

Ajax適應場景

Ajax系列面試題總結

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

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

Ajax技術的核心是XMLHttpRequest對象。

IE5 XHR對象是通過MSXML庫中的一個ActiveX對象實現的，所以要考慮做兼容。

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

new ActiveXObject(versions);

new XMLHttpRequest();

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

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

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

    // 如果存在,則創建他的對象,但這個對象需要一個傳入參數,如下:
    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數組中的某個項,數組的7個項分別對應7個版本.
          new ActiveXObject(versions[i]);

          // arguments是javascript函數的內置對象,代表傳入參數的集合，
          // callee就代表對象本身即new createXHR
          arguments.callee.activeXString = versions[i];
          break;

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

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

  /**
   ** options形參解析：
   * data 發送的參數，格式為對象類型
   * url 發送請求的url，服務器地址（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 = [];

  // 遍歷參數
  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("&"));
  }

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

    /**
     * XHR對象的readyState屬性
     * 0：未初始化。尚未調用open()方法。
     * 1：啟動。已經調用open()方法，但尚未調用send()方法。
     * 2：發送。已經調用send()方法，但尚未接收到響應。
     * 3：接收。已經接收到部分響應數據。
     * 4：完成。已經接收到全部響應數據，而且已經可以在客戶端使用了。
     */
    if (xhr.readyState == 4) {
      // 得到響應
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        // 處理成功數據
        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 {
        // 處理錯誤數據
        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最大優點就是能在不刷新整個頁面的前提下與服務器通信維護數據。這使得Web應用程序更為迅捷地響應用戶交互，并避免了在網絡上發送那些沒有改變的信息，減少用戶等待時間，帶來非常好的用戶體驗。

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

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

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

Ajax使WEB中的界面與應用分離（也可以說是數據與呈現分離），有利于分工合作、減少非技術人員對頁面的修改造成的WEB應用程序錯誤、提高效率、也更加適用于現在的發布系統。

在動態更新頁面的情況下，用戶無法回到前一個頁面狀態，因為瀏覽器僅能記憶歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差別非常微妙；用戶通常會希望單擊后退按鈕能夠取消他們的前一次操作，但是在Ajax應用程序中，這將無法實現

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

對搜索引擎的支持比較弱。如果使用不當，AJAX會增大網絡數據的流量，從而降低整個系統的性能。

至少從目前看來，像Ajax.dll，Ajaxpro.dll這些Ajax框架是會破壞程序的異常機制的。關于這個問題，曾在開發過程中遇到過，但是查了一下網上幾乎沒有相關的介紹。后來做了一次試驗，分別采用Ajax和傳統的form提交的模式來刪除一條數據……給我們的調試帶來了很大的困難

一些手持設備（如手機、PDA等）現在還不能很好的支持Ajax，比如說我們在手機的瀏覽器上打開采用Ajax技術的網站時，它目前是不支持的。

表單驅動的交互

深層次的樹的導航

快速的用戶與用戶間的交流響應

類似投票、yes/no等無關痛癢的場景

對數據進行過濾和操縱相關數據的場景

普通的文本輸入提示和自動完成的場景

部分簡單的表單

搜索

基本的導航

替換大量的文本

對呈現的操縱

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

使用ajax原生方式發送請求主要通過XMLHttpRequest(標準瀏覽器)、ActiveXObject(IE瀏覽器)對象實現異步通信效果

基本步驟：

var xhr =null;//創建對象 

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

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

}

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

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

xhr.onreadystatechange =function(){}//指定回調函數 

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

js框架（jQuery/EXTJS等）提供的ajax API對原生的ajax進行了封裝，熟悉了基礎理論，再學習別的框架就會得心應手，好多都是換湯不換藥的內容

同步：阻塞的

張三叫李四去吃飯，李四一直忙得不停，張三一直等著，直到李四忙完兩個人一塊去吃飯，瀏覽器向服務器請求數據，服務器比較忙，瀏覽器一直等著（頁面白屏），直到服務器返回數據，瀏覽器才能顯示頁面

異步：非阻塞的

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

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

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

對于ajax請求傳遞的參數，如果是get請求方式，參數如果傳遞中文，在有些瀏覽器會亂碼，不同的瀏覽器對參數編碼的處理方式不同，所以對于get請求的參數需要使用encodeURIComponent函數對參數進行編碼處理，后臺開發語言都有相應的解碼api。對于post請求不需要進行編碼

創建XMLHttpRequest對象,也就是創建一個異步調用對象

創建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息

設置響應HTTP請求狀態變化的函數

發送HTTP請求

獲取異步調用返回的數據

使用JavaScript和DOM實現局部刷新

異步加載的方案： 動態插入 script 標簽

通過 ajax 去獲取 js 代碼，然后通過 eval 執行

script 標簽上添加 defer 或者 async 屬性

創建并插入 iframe，讓它異步執行 js

同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標準。它最早出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不同源裝載。所謂同源指的是：協議，域名，端口相同，同源策略是一種安全協議，指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

GET：一般用于信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，一般在2000個字符，有的瀏覽器是8000個字符

POST：一般用于修改服務器上的資源，對所發送的信息沒有限制

在以下情況中，請使用 POST 請求：

無法使用緩存文件（更新服務器上的文件或數據庫）

向服務器發送大量數據（POST 沒有數據量限制）

發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

通過異步模式，提升了用戶體驗

優化了瀏覽器和服務器之間的傳輸，減少不必要的數據往返，減少了帶寬占用

Ajax在客戶端運行，承擔了一部分本來由服務器承擔的工作，減少了大用戶量下的服務器負載。

Ajax可以實現異步通信效果，實現頁面局部刷新，帶來更好的用戶體驗；按需獲取數據，節約帶寬資源；

1、ajax不支持瀏覽器back按鈕。

2、安全問題 AJAX暴露了與服務器交互的細節。

3、對搜索引擎的支持比較弱。

4、破壞了程序的異常機制。

get一般用來進行查詢操作，url地址有長度限制，請求的參數都暴露在url地址當中，如果傳遞中文參數，需要自己進行編碼操作，安全性較低。

post請求方式主要用來提交數據，沒有數據長度的限制，提交的數據內容存在于http請求體中，數據不會暴漏在url地址中。

Jsonp并不是一種數據格式9，而json是一種數據格式，jsonp是用來解決跨域獲取數據的一種解決方案，具體是通過動態創建script標簽，然后通過標簽的src屬性獲取js文件中的js腳本，該腳本的內容是一個函數調用，參數就是服務器返回的數據，為了處理這些返回的數據，需要事先在頁面定義好回調函數，本質上使用的并不是ajax技術

Ajax是全稱是asynchronous JavaScript andXML，即異步JavaScript和xml，用于在Web頁面中實現異步數據交互，實現頁面局部刷新。

優點：可以使得頁面不重載全部內容的情況下加載局部內容，降低數據傳輸量，避免用戶不斷刷新或者跳轉頁面，提高用戶體驗

缺點：對搜索引擎不友好；要實現ajax下的前后退功能成本較大；可能造成請求數的增加跨域問題限制；

JSON是一種輕量級的數據交換格式，ECMA的一個子集

優點：輕量級、易于人的閱讀和編寫，便于機器（JavaScript）解析，支持復合數據類型（數組、對象、字符串、數字）

200 - 請求成功

301 - 資源（網頁等）被永久轉移到其它URL

404 - 請求的資源（網頁等）不存在

500 - 內部服務器錯誤

分為4個步驟：

當發送一個 URL 請求時，不管這個 URL 是 Web 頁面的 URL 還是 Web 頁面上每個資源的 URL，瀏覽器都會開啟一個線程來處理這個請求，同時在遠程 DNS 服務器上啟動一個 DNS 查詢。這能使瀏覽器獲得請求對應的 IP 地址。

瀏覽器與遠程 Web 服務器通過 TCP 三次握手協商來建立一個 TCP/IP 連接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試建立起通信，而后服務器應答并接受客戶端的請求，最后由客戶端發出該請求已經被接受的報文。

一旦 TCP/IP 連接建立，瀏覽器會通過該連接向遠程服務器發送 HTTP 的 GET 請求。遠程服務器找到資源并使用 HTTP 響應返回該資源，值為 200 的 HTTP 響應狀態表示一個正確的響應。

此時，Web 服務器提供資源服務，客戶端開始下載資源。

get一般用來進行查詢操作，url地址有長度限制，請求的參數都暴露在url地址當中，如果傳遞中文參數，需要自己進行編碼操作，安全性較低。

post請求方式主要用來提交數據，沒有數據長度的限制，提交的數據內容存在于http請求體中，數據不會暴漏在url地址中。

18、ajax請求時，如何解釋json數據
使用eval() 或者JSON.parse() 鑒于安全性考慮，推薦使用JSON.parse()更靠譜，對數據的安全性更好。

JavaScript高級程序設計第三版
AJAX工作原理及其優缺點
Ajax原理以及優缺點
Ajax的工作原理
Ajax系列面試題總結01