聊聊Ajax那些事

瞭解Ajax的起源、概念及特色

• 起源

  該技術在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 注入檢查

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

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

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

  • 對搜索引擎支持較弱

理解Ajax通訊的原理及兼容性

• 總結

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

• 知識點

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

• 流程

  1. 發起請求

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

  2. 發送數據

     客戶端向服務端發送數據

  3. 監聽狀態

     監聽整個鏈接的狀態

  4. 接收響應

     接收服務端返回的數據

• 兼容性

  • IE和其餘瀏覽器的實現

    • XMLHttpRequest

    • ActiveXObject("Microsoft.XMLHTTP")

  • XMLHttpRequest規範的升級

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

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

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

    • 【Level2】能夠發送跨域請求，在服務端容許的狀況下；

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

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

    • 【Level2】發送和獲取數據時，能夠獲取進度信息；

    • 【Level2】能夠設置請求的超時時間；

掌握XmlHttpRequest的屬性及方法【重點】

但願這個環節你們手裏準備紙和筆，邊聽編記，這個環節事後讓你們從新屢一下順序和重點。

• 屬性

  • onreadystatechange 設置狀態監聽函數

  • readyState 鏈接狀態【狀態值爲一、二、三、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事件

  • 事件觸發順序

    1. 觸發xhr.onreadystatechange(以後每次readyState變化時，都會觸發一次)

    2. 觸發xhr.onloadstart

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

    4. 觸發xhr.upload.onprogress

    5. 觸發xhr.upload.onload

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

    7. 觸發xhr.onprogress

    8. 觸發xhr.onload

    9. 觸發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);
           }
        }
      }
    };
  };

思考與練習

1. 請本身用XMLHttpRequest實現與服務端的通訊實例

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