Example of retrieving Ajax response objects using the hasOwnProperty method in JS _javascript tips

Often use Baidu search students, will not ignore the input box Drop-down index, it is so convenient, however, the unique conditions make this asynchronous technology to face some of the test, high concurrent service-side request to urge their front-end siege master must minimize the number of times to send Ajax. It doesn't sound like this, but it doesn't. First of all, let us for Baidu for free to do an ad bar. In Baidu first enter the word "front-end", the use of Chromebug can easily see the response sent, the results show as follows:

Copy Code code 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 frame ', ' Front bus frequency ', ' Front end ', ' front-end Analysis ', ' Front-End development tool ', ' Front-end observation ']});

Baidu tried to return a sug method with the obj parameter, to render the Drop-down data, and when you re-enter the "front end" without refreshing the page, similar requests do not occur, indicating that they are likely to create a cache object that temporarily stores requests for object. When the same vocabulary is entered later, the key of the cached object is retrieved first, the value of the object is read directly after the match is successful, and the request is no longer sent to the server, so that the cost can be effectively saved.

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

Believe that the jser are not unfamiliar to hasownproperty, I here is just the river to sell water.

It is the exclusive object that determines whether an attribute exists in the key of an object, and return is a Boolean value. This is an example:

Copy Code code as follows:

var test0 = Array.prototype.hasOwnProperty (' Split '); False because the Split method is not present in the array
var test1 = String.prototype.hasOwnProperty (' Split '); True, because split is a built-in method of a String object

When you know these, it seems not enough to see the force of hasOwnProperty, then the following simple to reproduce the example of Baidu dropdown:

Copy Code code as follows:

var data = {}, Saveobj = function (val) {
if (Data.hasownproperty (val)) {//If the committed 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 example is clear, here is a jquery ajax for example
Url:url + ' &p=3&cb=window.bdsug.sug&sid=1421_1513_1541_1542_1582&t=1353756355137 ',// The last face of a 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 Request results
}
}
}, Error:function () {
Alert (' Error ');
}
});
}
};

Some colleagues have queried that, in this way, the memory consumed by the cached object data will be larger as the value of the storage key is increased. So I would say this is inevitable, to save the service side of the request, it is necessary to sacrifice the other, and the fact that the cache object occupies the space usually can be ignored, because it is not "resident memory", once the page refreshes it will be destroyed. However, we can give another solution, and give this object a peak, such as it only allows storage of 100 key-value pairs, when more than 100 of the number, the delete operator deletes the first 10 stored keys or simply do not store, so you can avoid this problem.

hasOwnProperty method in the detection of objects is particularly common, of course, interested students can also go to understand the next propertyisenumerable method, it is hasOwnProperty enhanced version, can detect its own properties and the property of the enumerable, This article will not be explained in detail.