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

起源

該技術(shù)在1998年前后得到了應(yīng)用。允許客戶端腳本發(fā)送HTTP請(qǐng)求（XMLHTTP）的第一個(gè)組件由Outlook Web Access小組寫成。該組件原屬于微軟Exchange Server，并且迅速地成為了Internet Explorer 4.0的一部分。部分觀察家認(rèn)為，Outlook Web Access是第一個(gè)應(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等。對(duì)Mozilla/Gecko的支持使得該技術(shù)走向成熟，變得更為易用。

概念

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

特點(diǎn)（以toutiao.com做示例來(lái)講）

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

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

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

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

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

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

瀏覽器機(jī)制的破壞
在動(dòng)態(tài)更新頁(yè)面的情況下，用戶無(wú)法回到前一個(gè)頁(yè)面狀態(tài)，因?yàn)闉g覽器僅能記憶歷史記錄中的靜態(tài)頁(yè)面

安全問(wèn)題

偽造ajax請(qǐng)求?！救秉c(diǎn)】

如果你使用身份驗(yàn)證, 確定你在請(qǐng)求頁(yè)上檢查!

為 SQL 注入檢查

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

不要假設(shè)每個(gè)請(qǐng)求是真實(shí)的!

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

對(duì)搜索引擎支持較弱

總結(jié)

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

知識(shí)點(diǎn)

XMLHttpRequest是一個(gè)js對(duì)象，可以使用js對(duì)象的方法、事件

流程

發(fā)起請(qǐng)求

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

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

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

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

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

接收響應(yīng)

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

兼容性

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

XMLHttpRequest

ActiveXObject("Microsoft.XMLHTTP")

XMLHttpRequest規(guī)范的升級(jí)

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

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

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

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

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

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

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

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

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

屬性

onreadystatechange 設(shè)置狀態(tài)監(jiān)聽(tīng)函數(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() 取消請(qǐng)求

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

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

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

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

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

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

事件

loadstart

progress

abort

error

load

timeout

loadend

readystatechange

難點(diǎn)

事件觸發(fā)條件

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

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

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

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

loadend 當(dāng)請(qǐng)求結(jié)束（包括請(qǐng)求成功和請(qǐng)求失?。r(shí)觸發(fā)

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

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

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

事件觸發(fā)順序

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

觸發(fā)xhr.onloadstart

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

觸發(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)造一個(gè)Ajax實(shí)例

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);
         }
      }
    }
  };
};

請(qǐng)自己用XMLHttpRequest實(shí)現(xiàn)與服務(wù)端的通信實(shí)例

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