Ajax筆記

Ajax筆記

• 什麼是Ajax？簡單來講，Ajax是無需刷新頁面就能從服務器獲取數據的一種方法。

• Ajax技術的核心是XMLHttpRequest對象（簡稱XHR），XHR爲從服務器獲取數據提供了流暢的接口，再將獲取的數據經過DOM插入頁面中。如今來講，熟練掌握使用XHR對象已經成爲現代web開發人員必須掌握的一種技能。

如今開始Ajax體驗之旅：

1、建立XHR對象

var xhr = new XMLHttpRequest();

• 一行代碼是否是很簡單！此種方法只支持IE7及更高的版本。鑑於如今IE7早期版本用戶羣十分稀少，若是想支持更低版本的IE，可自行查閱書籍或GOOGLE。

2、XHR用法

• open()

  xhr.open("get","liuwen.txt","false");

  • 這中間有三個參數，第一個參數要發送的請求類型，第二個參數是請求的URL，第三個參數是是否異步發送請求的布爾值。

  • 這行代碼會啓動一個針對liuwen.txt的get請求，須要注意的是：1.URL相對於執行代碼的當前頁面（也可使用絕對路徑）2.調用open()方法並不會真正的發送請求，只是啓動等待發送。

• send()

  xhr.send(null);

  • send()接收一個參數，做爲請求主體發送的數據。若是不須要經過請求主體發送數據，則必須傳入null，由於這個參數對某些瀏覽器來講是必須的。send()執行以後，請求就會被髮送到服務器。

• 上述的請求是同步的，javascript代碼會等到服務器響應以後再繼續執行。響應後，響應的數據會自動填充到XHR對象的屬性。以下：

  responseText:做爲響應主體被返回來的文本。
  resposeXML:若是響應的內容類型爲"text/xml"或"application/xml"，這個屬性中將保存包含着響應數據的XML DOM文檔。
  status:響應的HTTP狀態。
  statusText:HTTP狀態說明書。

• 接收到響應後，咱們須要檢查status屬性，肯定響應是否成功返回。

if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
     alert("xhr.responseText");
}else{
     alert("reaquest was unsuccessful: + xhr.status");
}

• 通常來講，將HTTP狀態碼爲200做爲成功標誌，狀態碼304表示請求的資源並無被修改，能夠直接使用瀏覽器中緩存的版本（也等於響應有效）。

• 前面的都是同步請求，可是多數咱們仍是發送異步請求，才能讓Javascript繼續執行而沒必要等待響應，此時須要檢測readyState屬性，該屬性表示請求／響應過程的當前活動階段。當該值爲4，全部數據都已經就緒。

• HTTP頭部信息
  : HTTP頭部信息中部分對開發人員有用，XHR對象提供了操做這兩種頭部信息（請求頭部和響應頭部）的方法。

  • setRequestHeader()能夠設置自定義的請求頭部信息。有兩個參數：頭部字段的名稱和頭部字段的值，在open()以後和send()以前調用。

  • getResponseHeader()傳入頭部字段名稱，能夠取得相應的響應頭部信息。

  • getAllResponseHeaders()能夠取得一個包含全部頭部信息的長字符串。

3、兩種經常使用請求

GET請求是最多見的請求，用於向服務器查詢某些信息。
POST請求使用頻率僅次於GET，用於向服務器發送須要被保存的數據。

• GET請求的效率接近POST的兩倍。

4、安全

• 經過XHR訪問的URL也能夠經過瀏覽器或者服務器來訪問，好比下面這個URL

/getuserinfo.php?id=23

• 若是向這個URL發送請求，能夠推斷會獲得id爲23的用戶的我的數據，可是頗有可能會被別人改爲24，25。任何人的數據均可能被泄漏。所以爲確保XHR的安全性通長的的作法是驗證發送請求者是否有權限訪問相應的信息。
  現有如下幾種方式：

  • 以SSL鏈接來訪問能夠經過XHR請求的資源。（SSL(Secure Sockets Layer 安全套接層),及其繼任者傳輸層安全（Transport Layer Security，TLS）是爲網絡通訊提供安全及數據完整性的一種安全協議。TLS與SSL在傳輸層對網絡鏈接進行加密。）

  • 每一次請求都要附帶驗證碼。
    ps：上述兩種方法必定程度上能夠抵擋CRSF攻擊。

  • 要求發送POST請求而不是GET——很容易改變。

  • 檢查來源URL以肯定是否可信——來源很容易僞造。

  • 基於cookie信息進行驗證——一樣很容易僞造。

• XHR對象也提供了一些安全機制，但實際不可靠。切記！！實際open()還有用戶名和密碼兩個參數，但千萬不要寫在js代碼中，js調試器很容易破解它。