Javascript 防止多个ajax调用

我正在使用以下代码通过ajax从服务器上获取加载内容。但在一个特殊的情况下，我有几个完全相同的链接。在这种情况下，如何防止代码对同一url进行多个服务器/ajax调用，但替换不同的div

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("");
        }
    });
});

---

创建一个数组来存储具有两个属性的对象，

LinkURL

和

DivID

。无论何时进行ajax调用，都要检查数组中是否已经存在该链接

如果不可用：进行调用，获取结果，将条目添加到数组中，并使用相应的

DivID

---

如果该项已经在数组中：（这意味着我们已经调用了此url），则获取该项的

DivID

，并获取该Div的内容。

您可以使用响应缓存

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')]);
    }
});

这是因为jQuery XHR对象的设计方式。它们是，这意味着您可以向它们添加任意数量的回调。这还意味着您可以随时添加回调，而无需在实际的

.ajax（）

调用的选项中添加回调

一旦实现了这样的承诺（即请求成功）或被拒绝（即HTTP请求失败），所有适当的回调都会被调用

---

这意味着您可以为您拥有的每个

.js ajaxfill

元素添加一个单独的回调，并且仍然只发出一次实际请求。

这不会替换多个div's@WebDeveloper我就是这样理解你的问题的。（“防止我的代码对同一url进行多个服务器/ajax调用”）。如果您只想阻止多个网络往返，只需使用适当的缓存头，浏览器将使用其缓存对同一URL进行请求。这些调用是快速连续进行的，因此不会出现服务器缓存的情况header@WebDeveloper对让服务器发送缓存头（

缓存控制

），浏览器将不会发出两次相同的请求。根本不需要更改您的JavaScript。抱歉，如果我提出了一个noob问题，但为了澄清我自己，第二个电话甚至在我回答第一个之前就已经发出了。它还能用吗

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("");
        });
});