Example of using hasOwnProperty method to retrieve ajax response object in JS

Example of using hasOwnProperty method to retrieve ajax response object in JS_javascript skills

WBOY

Release： 2016-05-16 16:28:14

Original

1544 people have browsed it

Students who often use Baidu search will definitely not ignore the drop-down index of the input box. It is so convenient. However, the unique conditions make this asynchronous technology face some challenges. Highly concurrent server requests urge their front-end. Siege engineers must reduce the number of ajax messages as much as possible. It may sound irrelevant to this article, but it's not. First of all, let us make a free advertisement for Baidu. Enter the word "front-end" on the Baidu homepage and use chromebug to easily see the response sent. The results are displayed as follows:

Copy code The code is as follows:

window.bdsug.sug({q:'front-end';,p:false,s:['front-end development','front-end engineer','front-end bus','front-end development engineer','front-end framework','front-end bus Frequency','Front-end interview questions','Front-end analysis','Front-end development tools','Front-end observation']});

Baidu attempts to render the drop-down data by returning a sug method with obj parameters. When you enter the "front end" again without refreshing the page, similar requests do not occur, which shows that they are very A cache object may be established. Its function is to temporarily store the requested object. When the same word is entered later, the key of the cache object will be retrieved first. After the match is successful, the value of the object will be read directly and no more requests will be sent to it. The server sends the request, which can effectively save costs.

Let’s talk about the real protagonist: the hasOwnProperty method.

I believe jser are no strangers to hasOwnProperty. I am just selling water by the river here.

It is exclusive to objects and is used to determine whether an attribute exists in the key of an object. The return value is a boolean value. Here is an example:

Copy code The code is as follows:

var test0 = Array.prototype.hasOwnProperty('split'); //false, because the split method does not exist in the array

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

When you know this, it seems that it is not enough to see the power of hasOwnProperty, so let’s simply reproduce the Baidu drop-down example:

Copy code The code is as follows:

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

if(data.hasOwnProperty(val)){ //If the submitted value exists in the data object, the request will not be 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 the sake of clarity, here we use jquery’s ajax as an example

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 request result

}

}

}, error : function(){

alert('error');

}

});

}

};

Some colleagues questioned that in this way, the memory occupied by cached object data will increase as more key values are stored. Then I want to say that this is inevitable. To save server-side requests, you must sacrifice other things. In fact, the space occupied by the cache object can usually be ignored because it is not "resident in memory". Once the page is refreshed, It will be destroyed. However, we can give another solution and agree on a peak value for this object. For example, it is only allowed to store 100 key-value pairs at most. When the number exceeds 100, delete the first ten stored keys through the delete operator or simply not storage to avoid this problem.

The hasOwnProperty method is particularly commonly used in object detection. Of course, interested students can also learn about the propertyIsEnumerable method. It is an enhanced version of hasOwnProperty and can detect its own properties and the enumerability of the property. This article I won’t explain it in detail anymore.