JS學習筆記10_Ajax

1.Ajax概述

Asynchronous JavaScript + XML，支持js與服務器通訊。在不unload頁面的前提下從服務器獲取新數據，以實現更好的用戶體驗（與傳統的單擊-等待交互不一樣的體驗）。

IE5最早提供了支持，在MSXML庫中新增了XHR對象（XMLHttpRequest），能夠經過new ActiveXObject(str)的方式建立XHR對象，雖然不是很方便，但至少是原生支持

2.XHR對象

XMLHttpRequest，[IE6-]對XHR對象的實現與其它瀏覽器不一樣，但能夠經過對象檢測來建立跨瀏覽器的XHR對象，具體代碼以下：

/*獲取HttpRequest對象，能夠兼容各個瀏覽器 包括IE5.5+*/
function getHttpObject(){
    if(typeof XMLHttpRequest == "undefined"){//若是該對象未定義，則自定義該對象
        XMLHttpRequest = function(){
            try{
                return new ActiveXObject("Msxml2.XMLHTTP.6.0");
            }catch(e){}
            try{
                return new ActiveXObject("Msxml2.XMLHTTP.3.0");
            }catch(e){}
            try{
                return new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e){}
            try{//老版本的 Internet Explorer （IE5 和 IE6）
                return new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){}
             
            return false;
        }
    }
     
    return new XMLHttpRequest();
}

XHR對象的屬性以下：

• responseText：響應體

• responseXML：若是響應內容是」text/xml」或者」application/xml」，這個屬性會保存響應數據的XML DOM文檔

• status：響應的HTTP狀態（404， 200之類的）

• statusText：HTTP狀態說明，不可靠，由於各個瀏覽器不同，直接用status狀態碼最可靠

• readyState：多用於異步請求，雖然同步請求也能用，但沒什麼意義，readyState的5個值以下：

  • 0：未初始化。還沒調用open方法

  • 1：啓動。調用了open沒調用send

  • 2：發送。調用了send還沒收到響應

  • 3：接收。拿到了部分響應數據

  • 4：完成。拿到了全部數據，而且數據已經可用了

3.用XHR對象實現執行回調函數

var xhr = getHttpObject();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){
    if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){//原本只用檢測200成功和304不變但有些瀏覽器會把200錯報成204
      //執行callback
    }
    else{
      //請求失敗
    }
  }
}

注意：必須在open函數以前設置readystatechange事件處理器，以保證全瀏覽器兼容

4.用XHR對象實現get/post請求

//get請求
xhr.open('get', url, false/true);//初始化，false/true ~ 同步/異步
xhr.send(null);//發送請求，null是爲了兼容性
//post請求
xhr.open('post', url, false/true);//同上
xhr.send(str);
/* 能夠在open後send前設置請求頭，好比添加cookie信息
xhr.setRequestHeader(strHeader, strValue);
*/

注意：服務器對post請求和提交web表單的請求處理方式不一致，但能夠經過修改HTTP頭來模擬表單提交

但若是要發送表單數據的話，send的參數str必須是通過序列化的表單數據。此時須要模擬實現序列化函數，比較麻煩，JQuery提供了序列化支持，能夠直接$(‘#mForm’).serialize()序列化表單

5.終止請求

xhr.abort();能夠在響應返回前終止請求，abort以後不會再觸發事件，不容許再訪問xhr的響應相關屬性

注意：終止請求後應該解除XHR對象的引用，不建議重用XHR對象（因爲內存緣由）

6.用post仍是用get？

post請求消耗的資源多，數據傳輸速率也比get請求慢不少

但get請求不安全，並且IE對URI的長度有限制（不超過2048個字節），因此儘可能用get，不行再用post

7.CORS概述

Cross-Origin Resource Sharing，跨源資源共享，Ajax受同源策略限制，經過一些CORS技術能夠打破同源策略限制。例如IE8的XDR對象

其它瀏覽器經過加強XHR對象實現了對CORS的原生支持：把open函數的url參數設置爲絕對URL就行了

因此爲了消除歧義，應該在訪問本地資源時用相對URL，訪問遠程資源時用絕對URL

8.其它跨域技術

1. 圖像Ping

   var img = new Image();
   img.onload = img.onerror = function(){
     //響應返回，執行回調函數
   }
   img.src = url;//一旦設置了src屬性，就會當即請求（加載）圖片，而不是把img元素插入DOM樹後纔開始

   只能發送get請求，且沒法訪服務器的響應文本，多用於跟蹤用戶點擊頁面或動態廣告曝光次數

2. JSONP

JSON with Padding，支持瀏覽器與服務器進行雙向通訊，且可以直接訪問響應文本，但須要服務器端代碼的配合，不易肯定請求失敗與否，並且從其它域加載代碼執行，會存在安全問題

有一篇很不錯的介紹跨域技術的博文

9.CSRF攻擊

Cross-Site Request Forgery，跨站請求僞造，向頁面直接插入Ajax代碼，不存在同源策略限制，從而僞造請求訪問敏感數據。

防範方法有：

1. 要求用SSL鏈接訪問資源

2. 要求每次請求必須附帶上特殊算法計算獲得的驗證碼