摘要：年初，許多事件使得被大眾所接受。這使得應用程序更為迅捷地響應用戶交互，并避免了在網絡上發送那些沒有改變的信息，減少用戶等待時間，帶來非常好的用戶體驗。調用方法后立即觸發，若未被調用則不會觸發此事件。

起源

該技術在1998年前后得到了應用。允許客戶端腳本發送HTTP請求（XMLHTTP）的第一個組件由Outlook Web Access小組寫成。該組件原屬于微軟Exchange Server，并且迅速地成為了Internet Explorer 4.0的一部分。部分觀察家認為，Outlook Web Access是第一個應用了Ajax技術的成功的商業應用程序，并成為包括Oddpost的網絡郵件產品在內的許多產品的領頭羊。2005年初，許多事件使得Ajax被大眾所接受。Google在它著名的交互應用程序中使用了異步通信，如Google討論組、Google地圖、Google搜索建議、Gmail等。對Mozilla/Gecko的支持使得該技術走向成熟，變得更為易用。

概念

Ajax是一種技術方案，但并不是一種新技術。它依賴的是現有的CSS/HTML/Javascript，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對象，是這個對象使得瀏覽器可以發出HTTP請求與接收HTTP響應。

特點（以toutiao.com做示例來講）

無刷新更新數據 √

AJAX最大優點就是能在不刷新整個頁面的前提下與服務器通信維護數據。這使得Web應用程序更為迅捷地響應用戶交互，并避免了在網絡上發送那些沒有改變的信息，減少用戶等待時間，帶來非常好的用戶體驗。

異步與服務器通信 √

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

前端和后端負載平衡 √

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

瀏覽器機制的破壞
在動態更新頁面的情況下，用戶無法回到前一個頁面狀態，因為瀏覽器僅能記憶歷史記錄中的靜態頁面

安全問題

偽造ajax請求。【缺點】

如果你使用身份驗證, 確定你在請求頁上檢查!

為 SQL 注入檢查

保留商務邏輯在服務器上!

不要假設每個請求是真實的!

數據校驗和合理的加密解密

對搜索引擎支持較弱

總結

一句話描述：使用XMLHttpRequest發送http請求并接收響應。

知識點

XMLHttpRequest是一個js對象，可以使用js對象的方法、事件

流程

發起請求

發起一個http請求，方法GET、POST、PUT、DELETE、UPDATE

發送數據

客戶端向服務端發送數據

監聽狀態

監聽整個連接的狀態

接收響應

接收服務端返回的數據

兼容性

IE和其他瀏覽器的實現

XMLHttpRequest

ActiveXObject("Microsoft.XMLHTTP")

XMLHttpRequest規范的升級

【Level1】受同源策略的限制，不能發送跨域請求；

【Level1】不能發送二進制文件（如圖片、視頻、音頻等），只能發送純文本數據；

【Level1】在發送和獲取數據的過程中，無法實時獲取進度信息，只能判斷是否完成；

【Level2】可以發送跨域請求，在服務端允許的情況下；

【Level2】支持發送和接收二進制數據；

【Level2】新增formData對象，支持發送表單數據；

【Level2】發送和獲取數據時，可以獲取進度信息；

【Level2】可以設置請求的超時時間；

希望這個環節大家手里準備紙和筆，邊聽編記，這個環節過后讓大家重新屢一下順序和重點。

屬性

onreadystatechange 設置狀態監聽函數

readyState 連接狀態【狀態值為1、2、3、4之一】

responseText 響應的文本

responseXML 響應的XML

status 狀態碼，如404，200

statusText 狀態文本描述，如NOT FOUND

方法

abort() 取消請求

getAllResponseHeaders() 獲取所有響應頭

getResponseHeader( headerName ) 獲取指定響應頭

open( method, URL, async, userName, password ) 建立一個連接

send( content ) 發送請求. 如果該請求是異步模式(默認),該方法會立刻返回. 相反,如果請求是同步模式,則直到請求的響應完全接受以后,該方法才會返回

【注】所有事件的綁定需要在send之前綁定才可以

setRequestHeader( label, value ) 發送請求頭在send之前

事件

loadstart

progress

abort

error

load

timeout

loadend

readystatechange

難點

事件觸發條件

readystatechange 每當xhr.readyState改變時觸發；但xhr.readyState由非0值變為0時不觸發。

loadstart 調用xhr.send()方法后立即觸發，若xhr.send()未被調用則不會觸發此事件。

progress xhr.upload.onprogress在上傳階段(即xhr.send()之后，xhr.readystate=2之前)觸發，每50ms觸發一次；xhr.onprogress在下載階段（即xhr.readystate=3時）觸發，每50ms觸發一次。

load 當請求成功完成時觸發，此時xhr.readystate=4

loadend 當請求結束（包括請求成功和請求失敗）時觸發

abort 當調用xhr.abort()后觸發

timeout xhr.timeout不等于0，由請求開始即onloadstart開始算起，當到達xhr.timeout所設置時間請求還未結束即onloadend，則觸發此事件

error 在請求過程中，若發生Network error則會觸發此事件（若發生Network error時，上傳還沒有結束，則會先觸發xhr.upload.onerror，再觸發xhr.onerror；若發生Network error時，上傳已經結束，則只會觸發xhr.onerror）。注意，只有發生了網絡層級別的異常才會觸發此事件，對于應用層級別的異常，如響應返回的xhr.statusCode是4xx時，并不屬于Network error，所以不會觸發onerror事件，而是會觸發onload事件

事件觸發順序

觸發xhr.onreadystatechange(之后每次readyState變化時，都會觸發一次)

觸發xhr.onloadstart

觸發xhr.upload.onloadstart【上傳開始】

觸發xhr.upload.onprogress

觸發xhr.upload.onload

觸發xhr.upload.onloadend【上傳結束】

觸發xhr.onprogress

觸發xhr.onload

觸發xhr.onloadend

舉例

使用原生JavaScript構造一個Ajax實例

var ajax = function(param) {
   var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
   var type = (param.type || "get").toUpperCase();
   var url = param.url;
   if (!url) {
      return
   }
   var data = param.data,
       dataArr = [];
   for (var k in data) {
      dataArr.push(k + "=" + data[k]);
   }
   dataArr.push("_=" + Math.random());
   if (type == "GET") {
      url = url + "?" + dataArr.join("&");
      xhr.open(type, url);
      xhr.send();
   } else {
     xhr.open(type, url);
     xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xhr.send(dataArr.join("&"));
   }
   xhr.onload = function() {
   if (xhr.status == 200 || xhr.status == 304) {
      var res;
      if (param.success && param.success instanceof Function) {
         res = xhr.responseText;
         if (typeof res === "string") {
            res = JSON.parse(res);
            param.success.call(xhr, res);
         }
      }
    }
  };
};

請自己用XMLHttpRequest實現與服務端的通信實例

請思考如何結合XMLHttpRequest實現JavaScript文件的加載。