快捷導(dǎo)航

Js中使用hasOwnProperty方法檢索ajax響應(yīng)對象的例子

更新時間：2014年12月08日 11:06:47 投稿：junjie

這篇文章主要介紹了Js中使用hasOwnProperty方法檢索ajax響應(yīng)對象的例子,本文介紹的技巧就是hasOwnProperty方法在ajax請求中的使用,需要的朋友可以參考下

經(jīng)常使用百度搜索的同學(xué)，一定不會忽視輸入框的下拉索引，它是如此方便，然而得天獨厚的條件使得這項異步技術(shù)多少面臨些考驗，高并發(fā)的服務(wù)端請求督促著他們的前端攻城師必須盡可能地減少發(fā)送ajax的次數(shù)。聽起來似乎與本文無關(guān)，但并不是這樣。首先就暫且讓我們?yōu)榘俣让赓M做個廣告吧。在百度首頁輸入“前端”一詞，利用chromebug可以很輕松地看到所發(fā)送的響應(yīng)，結(jié)果顯示如下：

復(fù)制代碼代碼如下:

window.bdsug.sug({q:'前端';,p:false,s:['前端開發(fā)','前端工程師','前端總線','前端開發(fā)工程師','前端框架','前端總線頻率','前端面試題','前端分析','前端開發(fā)工具','前端觀察']});

百度試圖通過返回一個帶有obj參數(shù)的sug方法，來進(jìn)行對下拉數(shù)據(jù)的渲染，當(dāng)你在不刷新頁面的情況下再次輸入“前端”，類似的請求并沒有發(fā)生，這說明他們很可能建立了一個緩存對象，它的作用是臨時存儲請求過來的object，當(dāng)后面輸入同樣的詞匯時，會首先檢索緩存對象的鍵，匹配成功后，直接讀取該對象的值，并不再向服務(wù)端發(fā)送請求，這樣就可以有效地節(jié)約成本了。

拋磚引玉，接下來談?wù)務(wù)嬲闹鹘牵篽asOwnProperty方法。

相信jser們對hasOwnProperty并不陌生，我在此也只是江邊賣水了。

它是對象的專屬，用來判斷一個屬性是否存在于某對象的鍵中，return的是一個boolean值。這是一個例子：

復(fù)制代碼代碼如下:

var test0 = Array.prototype.hasOwnProperty('split'); //false，因為數(shù)組不存在split方法

var test1 = String.prototype.hasOwnProperty('split'); //true，因為split是String對象的內(nèi)置方法

當(dāng)你知道這些的時候，似乎還不足以看到hasOwnProperty的作用力，那么下面簡單地重現(xiàn)一下百度下拉的例子：

復(fù)制代碼代碼如下:

var data = {}, saveObj = function(val){

 if(data.hasOwnProperty(val)){ //如果提交的值存在于data對象中，則不發(fā)送請求

  var len = data[val].length;

  for(var i = 0; i < len; i++){

   console.log(data[val][i]);

  }

 }else{

  var url = 'http://suggestion.baidu.com/su?wd=' + val;

  $.ajax({ //為了示例清晰，此處用jquery的ajax為例

   url : url + '&p=3&cb=window.bdsug.sug&sid=1421_1513_1541_1542_1582&t=1353756355137', //最后面一個參數(shù)t是一個時間戳

   dataType : 'jsonp',

   type : 'GET',

   success : function(res){

    var msg = res.data, len = msg.length;

    msg == null && (msg = []);

    if(len > 0){

     data[val] = msg; //緩存搜索結(jié)果

     for(var i = 0; i < len; i++){

      console.log(msg[i]); //打印出請求結(jié)果

     }

    }

   }, error : function(){

    alert('error');

   }

  });

 }

};

有同事質(zhì)疑，這樣一來，緩存對象data占用的內(nèi)存將會隨著存儲鍵值的越多而越大。那么我想說這是不可避免的，要節(jié)約服務(wù)端的請求，就必然要犧牲其它，而事實上緩存對象占據(jù)的空間通常情況下是可以忽略的，因為它并非“常駐內(nèi)存”，一旦頁面刷新它將銷毀。然而我們可以給出另一個解決方案，給此對象約定一個峰值，比如最多它只允許存儲100個鍵值對，當(dāng)超過100的數(shù)量時，通過delete運算符刪除前十條存儲的鍵或者干脆就不存儲，這樣就可以避免此問題了。

hasOwnProperty方法在對象的檢測中用得尤為普遍，當(dāng)然有興趣的同學(xué)也可以去了解下propertyIsEnumerable方法，它是hasOwnProperty的增強版，能檢測自有屬性且該屬性的可枚舉性，本文就不再做詳細(xì)說明了。

您可能感興趣的文章: