0

次のコードを使用して、ロード時に 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("");
        }
    });
});
4

3 に答える 3

0

応答キャッシュを使用できます

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')]);
    }
});
于 2013-04-12T11:59:23.843 に答える
0

LinkURL2 つのプロパティを持つオブジェクトを格納する配列を作成しますDivID。ajax 呼び出しを行うたびに、そのリンクが配列に既に存在するかどうかを確認します。

利用できない場合: 呼び出しを行い、結果を取得し、対応するDivID.

アイテムがすでに配列内にある場合(つまり、この URL を既に呼び出していることを意味します)、DivIDそのエントリの を取得し、その Div のコンテンツを取得します。

于 2013-04-12T11:58:20.543 に答える
0 
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("");
        });
});

これは、jQuery XHR オブジェクトの設計方法により機能します。これらはpromisesです。つまり、好きなだけコールバックを追加できます。また、いつでもコールバックを追加できることも意味します。実際の.ajax()呼び出しのオプションにコールバックを追加する必要はありません。

このような promise が満たされる (つまり、リクエストが成功した) か、拒否された (つまり、HTTP リクエストが失敗した) と、すべての適切なコールバックが呼び出されます。

これは、.js-ajaxfill持っているすべての要素に個別のコールバックを追加しても、実際のリクエストを 1 回だけ行うことができることを意味します。

于 2013-04-12T12:00:48.673 に答える