防止多个ajax调用

Question

I am using the following code to fetch content from server via ajax on load. But in a particular case i have a few links that are exactly same. In such case how do i prevent my code from making multiple server/ajax calls to the same url but replace different div's.

jQuery('.js-ajaxfill').each(function(i){
    var _this = jQuery(this);
    jQuery.ajax({
        url: _this.data('href'),
        success: function( data ) {
            _this.children('div').replaceWith(data);
        },
        error   : function(jqXHR, textStatus, errorThrown){
            _this.html("");
        }
    });
});

Answer 1

Create an array to store objects with 2 properties, LinkURL and DivID . Whenever you make an ajax call, check whether that link already exist in the Array,

If it is not available : make the call,get the result, Add the entry to the Array with the corresponding the DivID .

If the item is already in the array : (that means we already made call to this url), get the DivID of that entry and get content of that Div.

Answer 2

You can use response caching

var ResponseCache = {};
jQuery('.js-ajaxfill').each(function(i){
    var _this = jQuery(this);
    if(!ResponseCache[_this.data('href')]){
        jQuery.ajax({
            url: _this.data('href'),
            success: function( data ) {
                 ResponseCache[_this.data('href')]=data;
                _this.children('div').replaceWith(data);
            },
            error   : function(jqXHR, textStatus, errorThrown){
                _this.html("");
            }
        });
    }else{
        _this.children('div').replaceWith(ResponseCache[_this.data('href')]);
    }
});

Answer 3

var ajaxfillRequests = {};

jQuery('.js-ajaxfill').each(function () {
    var _this = jQuery(this),
        url = _this.data('href');

    // make a new request only if none has been made to this URL, save the XHR
    if (!(url in ajaxfillRequests)) {
        ajaxfillRequests[url] = jQuery.get(url);
    }

    // add one set of callbacks per processed item to the XHR object
    ajaxfillRequests[url]
        .done(function (data) {
            _this.children('div').replaceWith(data);
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            _this.html("");
        });
});

This works because of the way jQuery XHR objects are designed. They are promises , which means you can add as many callbacks to them as you like. It also means you can add callbacks whenever you like, it's not necessary to add callbacks in the options of the actual .ajax() call.

Once such a promise is fulfilled (ie, the request succeeded) or rejected (ie, the HTTP request failed) all appropriate callbacks are called.

This means you can add an individual callback for every .js-ajaxfill element you have and still make the actual request only once.