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

起源

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

概念

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

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

無刷新更新數(shù)據(jù) √

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

異步與服務(wù)器通信 √

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

前端和后端負(fù)載平衡 √

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)，提升站點性能

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

安全問題

偽造ajax請求。【缺點】

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

為 SQL 注入檢查

保留商務(wù)邏輯在服務(wù)器上!

不要假設(shè)每個請求是真實的!

數(shù)據(jù)校驗和合理的加密解密

對搜索引擎支持較弱

總結(jié)

一句話描述：使用XMLHttpRequest發(fā)送http請求并接收響應(yīng)。

知識點

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

流程

發(fā)起請求

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

發(fā)送數(shù)據(jù)

客戶端向服務(wù)端發(fā)送數(shù)據(jù)

監(jiān)聽狀態(tài)

監(jiān)聽整個連接的狀態(tài)

接收響應(yīng)

接收服務(wù)端返回的數(shù)據(jù)

兼容性

IE和其他瀏覽器的實現(xiàn)

XMLHttpRequest

ActiveXObject("Microsoft.XMLHTTP")

XMLHttpRequest規(guī)范的升級

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

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

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

【Level2】可以發(fā)送跨域請求，在服務(wù)端允許的情況下；

【Level2】支持發(fā)送和接收二進制數(shù)據(jù)；

【Level2】新增formData對象，支持發(fā)送表單數(shù)據(jù)；

【Level2】發(fā)送和獲取數(shù)據(jù)時，可以獲取進度信息；

【Level2】可以設(shè)置請求的超時時間；

希望這個環(huán)節(jié)大家手里準(zhǔn)備紙和筆，邊聽編記，這個環(huán)節(jié)過后讓大家重新屢一下順序和重點。

屬性

onreadystatechange 設(shè)置狀態(tài)監(jiān)聽函數(shù)

readyState 連接狀態(tài)【狀態(tài)值為1、2、3、4之一】

responseText 響應(yīng)的文本

responseXML 響應(yīng)的XML

status 狀態(tài)碼，如404，200

statusText 狀態(tài)文本描述，如NOT FOUND

方法

abort() 取消請求

getAllResponseHeaders() 獲取所有響應(yīng)頭

getResponseHeader( headerName ) 獲取指定響應(yīng)頭

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

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

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

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

事件

loadstart

progress

abort

error

load

timeout

loadend

readystatechange

難點

事件觸發(fā)條件

readystatechange 每當(dāng)xhr.readyState改變時觸發(fā)；但xhr.readyState由非0值變?yōu)?時不觸發(fā)。

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

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

load 當(dāng)請求成功完成時觸發(fā)，此時xhr.readystate=4

loadend 當(dāng)請求結(jié)束（包括請求成功和請求失敗）時觸發(fā)

abort 當(dāng)調(diào)用xhr.abort()后觸發(fā)

timeout xhr.timeout不等于0，由請求開始即onloadstart開始算起，當(dāng)?shù)竭_xhr.timeout所設(shè)置時間請求還未結(jié)束即onloadend，則觸發(fā)此事件

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

事件觸發(fā)順序

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

觸發(fā)xhr.onloadstart

觸發(fā)xhr.upload.onloadstart【上傳開始】

觸發(fā)xhr.upload.onprogress

觸發(fā)xhr.upload.onload

觸發(fā)xhr.upload.onloadend【上傳結(jié)束】

觸發(fā)xhr.onprogress

觸發(fā)xhr.onload

觸發(fā)xhr.onloadend

舉例

使用原生JavaScript構(gòu)造一個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實現(xiàn)與服務(wù)端的通信實例

請思考如何結(jié)合XMLHttpRequest實現(xiàn)JavaScript文件的加載。