高性能javascript學習筆記系列(6) -ajax

參考 高性能javascript 

       javascript高級程序設計

ajax基礎  ajax技術的核心是XMLHttpRequest對象(XHR),經過XHR咱們就能夠實現無需刷新頁面就能從服務器端讀取數據  

var xhr = new XMLHttpRequest(); //只支持IE7以及更高的版本
xhr.onreadystatechange = function() {
  if(xhr.readyState == 4) {
      if( (xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 ) {
        //成功
      } else {
          //失敗
      }
  }
}；
xhr.open("get","test.html",false);  //第三個參數表明發送同步請求仍是異步請求 false表明同步  true表明異步  open方法選擇請求的類型 請求的URL 是否發送異步請求
xhr.send(null);

上面是一個簡單的建立XHR對象 而且發送get請求的例子

readyState屬性  表示請求/響應過程的當前活動階段

• 0：初始化階段 還沒有調用open方法
• 1：啓動  已經調用open()方法 還沒有調用send方法
• 2：發送  已經調用send方法，可是未收到響應
• 3：接收 已經接收到部分的響應數據
• 4: 完成  已經接收到所有的響應數據，並且能夠在客戶端使用

在接收到響應後，響應的數據會自動的填充XHR對象的屬性 

responseText 做爲響應主體被返回的文本

status 響應的HTTP狀態

statusText HTTP狀態的說明

請求數據

  （1）XHR   缺點XHR沒法從外域請求數據  get請求的數據數據會被瀏覽器緩存起來

   （2）動態腳本注入(jsonp)  在頁面中建立一個腳本標籤而且設置它的src屬性 而後將它添加到頁面中  它能夠從外域請求數據，可是動態腳本控制提供的控制是有限的，不能設置頭信息，參數傳遞的方式也只能GET方式,不能設置請求的超時處理或者重試 響應的消息必須是可執行的js代碼 也就是你想請求的任何格式的數據都必需要封裝在一個回調函數中

   (3) Multipart XHR (MXHR) 容許客戶端只用一個HTTP請求就能夠從服務端向客戶端傳送多個資源，經過在服務端將資源打包成雙方約定的字符串分割的長字符串發送給客戶端，而後在客戶端去處理這個長字符串，根據提供它的mime-type類型和其餘信息解析出每一個資源  可是經過這種方式獲取的數據沒法被瀏覽器緩存，可是這種方式能很好的減小http請求

發送數據

  (1)XHR  能夠選擇post 和 get兩種方式向服務端發送數據  get請求是將請求信息包含在url中  post請求將請求信息包含在請求體中，下面是一個簡單的發送post請求的函數

function xhrPost(url,params,callback) {
  var req = new XMLHttpRequest();

  req.onerror = function(){
      setTimeout(function(){
          xhrPost(url,params,callback);
      },1000);
  }    //請求失敗

  req.onreadystatechange = function() {
      if(req.readyState == 4) {
        if(callback && typeof callback === 'function') {
            callback();
        }    
      }
  }
  req.post("POST",url,true);
  req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
  //數據返回服務器的編碼類型時url編碼  服務器端知道如何解析數據
  req.setRequestHeader("Content-Length",params.length); 
  req.send(params.join('&'));
}

（2）Beacons   經過js建立一個新的Image對象，並把src屬性設置爲服務器上的腳本url(url中包含着須要向服務器端傳送的數據)    可是這種方式只能發送get請求，而且在服務端接收到數據想要獲取響應信息的方式也有限 

提升ajax性能

  緩存數據

   （1）客戶端發送響應的請求頭確保響應會被瀏覽器緩存起來

在請求頭中設置expires字段  規定在特定的時間以前 訪問該url使用緩存

    （2）在客戶端將獲取的信息緩存到本地，從而避免再次的發起請求

經過將url和請求的數據作成鍵值對的方式存儲在本地

var localCache = {}

function xhrRequest(url,callback) {
  if(localCache[url]) {
      callback.success(localCache[url]);
      return;
  }    

  var req = new XMLHttpRequest();
  req.onerror = function() {
      callback.error();
  }

  req.onreadystatechange = function() {
    if(req.readyState == 4 ) {
      if(req.responseText == "" || req.status == '404') {
          callback.error();
          return;
      }
      localCache[url] = req.responseText;
      callback.success(req.responseText);
    }
  }
  req.open("GET",url,true);
  req.send(null);
}