An example of an ajax response object retrieved using the hasOwnProperty method in Js

Students who often use baidu search will not ignore the drop-down index of the input box, it is so convenient, however, unique conditions make this asynchronous technology more or less face some tests, the high concurrency of the server side requests urged their front end siege must be as much as possible to reduce the number of ajax. It may sound irrelevant to this article, but it's not. First of all, let's make an advertisement for baidu for free. Type the word "front end" on the home page of baidu, and you can easily see the response sent by using chromebug. The result is as follows:

window.bdsug.sug({q:' The front end ';,p:false,s:[' The front-end development ',' Front end engineer ',' The FSB ',' Front-end development engineer ',' The front frame ',' Front-end bus frequency ',' Front face exam ',' The front-end analysis ',' Front-end development tools ',' The front-end observation ']});

Baidu is trying to return a sug with obj parameter method, to apply colours to a drawing of the drop-down data, when you are in the case of not refresh the page to input "front end" again, a similar request has not happened, suggesting that they are likely to set up a cache object, its purpose is to temporarily store the request object, when typing the same words, will first retrieve the cached objects button, after the success of the match, directly read the value of the object, and no longer sends a request to the server so that it can effectively save the cost.

Here's the real protagonist: the hasOwnProperty method.

I'm sure jser's are no strangers to hasOwnProperty, and I'm just selling water by the river.

It is the exclusive property of an object to determine whether an attribute exists in an object's key and returns a Boolean value. Here's an example:

var test0 = Array.prototype.hasOwnProperty('split'); //False, because there is no split method in the array 

var test1 = String.prototype.hasOwnProperty('split'); //True, because split is the built-in method of the String object 

When you know this, as if it's not enough to see hasOwnProperty's power, here's a quick replay of the baidu drop:

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

 if(data.hasOwnProperty(val)){ //If the submitted value exists in the data object, the request 
 is not sent
  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({ //For clarity, use jquery's ajax example here 

   url : url + '&p=3&cb=window.bdsug.sug&sid=1421_1513_1541_1542_1582&t=1353756355137', //The last parameter t is a timestamp 

   dataType : 'jsonp',

   type : 'GET',

   success : function(res){

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

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

    if(len > 0){

     data[val] = msg; //Cache search results 

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

      console.log(msg[i]); //Print out the result of the request 

     }

    }

   }, error : function(){

    alert('error');

   }

  });

 }

};

As a result, the memory footprint of the cache object data will increase as the number of key values is stored. So I would say that it is inevitable that to save server requests you must sacrifice the rest, and the fact that the space occupied by the cache object is usually negligible because it is not "resident" and will be destroyed as soon as the page is refreshed. Another solution, however, is to give the object a peak value, such as a maximum of 100 key-value pairs, and avoid this problem by deleting the first 10 stored keys with the delete operator or by not storing them at all.

HasOwnProperty method is particularly popular in object detection. Of course, those who are interested can also learn about propertyIsEnumerable method. It is an enhanced version of hasOwnProperty, which can detect its own property and enumerability.