javascript - AJAX 呼び出し結果のブラウザキャッシュを防止する

Question

を使用して動的コンテンツをロードする$.get()と、結果がブラウザにキャッシュされるようです。

QueryString にランダムな文字列を追加すると、この問題は解決するようですが (私はを使用しますnew Date().toString())、これはハックのように感じます。

これを達成する他の方法はありますか？または、一意の文字列がこれを達成する唯一の方法である場合、以外の提案はありnew Date()ますか?

score 536 · Accepted Answer

以下は、使用する jQuery メソッド ($.get、$.ajax など) に関係なく、将来のすべての AJAX リクエストがキャッシュされないようにします。

$.ajaxSetup({ cache: false });

score 346 · Accepted Answer

JQuery の $.get() は結果をキャッシュします。それ以外の

$.get("myurl", myCallback)

$.ajax を使用する必要があります。これにより、キャッシュをオフにすることができます。

$.ajax({url: "myurl", success: myCallback, cache: false});

score 249 · Accepted Answer

new Date().getTime()同じミリ秒内に複数のリクエストが発生しない限り、衝突を回避するを使用します。

$.get('/getdata?_=' + new Date().getTime(), function(data) {
    console.log(data); 
});

編集：この回答は数年前のものです。それはまだ機能します（したがって、削除していません）が、これを達成するためのより良い/よりクリーンな方法があります。私の好みはこの方法ですが、この回答は、ページの存続期間中にすべてのリクエストのキャッシュを無効にする場合にも役立ちます。

score 27 · Accepted Answer

ここでのすべての回答は、要求された URL にフットプリントを残し、サーバーのアクセスログに表示されます。

副作用のないヘッダーベースのソリューションが必要でしたが、すべてのブラウザーで Web ページのキャッシュを制御する方法に記載されているヘッダーを設定することで実現できることがわかりました。.

少なくとも Chrome で動作する結果は次のようになります。

$.ajax({
   url: url, 
   headers: {
     'Cache-Control': 'no-cache, no-store, must-revalidate', 
     'Pragma': 'no-cache', 
     'Expires': '0'
   }
});

score 24 · Accepted Answer

もう 1 つの方法は、ajax 呼び出しへの応答を生成するコードで、サーバー側からキャッシュヘッダーを提供しないことです。

response.setHeader( "Pragma", "no-cache" );
response.setHeader( "Cache-Control", "no-cache" );
response.setDateHeader( "Expires", 0 );

score 14 · Accepted Answer

ドキュメントに従う: http://api.jquery.com/jquery.ajax/

cacheプロパティを次のように使用できます。

$.ajax({
    method: "GET",
    url: "/Home/AddProduct?",
    data: { param1: value1, param2: value2},
    cache: false,
    success: function (result) {
        // TODO
    }
});

score 14 · Accepted Answer

個人的には、サーバーにヘッダーを設定しようとするよりもクエリ文字列メソッドの方が信頼性が高いと感じています.プロキシやブラウザがそれをキャッシュしないという保証はありません.

私は通常使用しますMath.random()が、日付を使用しても問題はありません (同じ値を 2 回取得するのに十分な速さで AJAX 要求を行うべきではありません)。

score 6 · Accepted Answer

もちろん、「キャッシュを破る」技術で仕事は完了しますが、サーバーがクライアントに応答をキャッシュすべきではないことを示した場合、これは最初から起こりません。応答をキャッシュすることが有益な場合もあれば、そうでない場合もあります。サーバーにデータの正しい有効期間を決定させます。後で変更することもできます。UI コードのさまざまな場所から行うよりも、サーバーから行う方がはるかに簡単です。

もちろん、サーバーを制御できない場合、これは役に立ちません。

score 5 · Accepted Answer

GET の代わりに POST リクエストを使用するのはどうですか? （とにかくすべきこと...）

score 5 · Accepted Answer

代わりに $.ajax() を確認する必要があるかもしれません (jQuery を使用している場合は、次のようになります)。http://docs.jquery.com/Ajax/jQuery.ajax#optionsとオプション「キャッシュ」をご覧ください。

別のアプローチは、サーバー側で物事をキャッシュする方法を調べることです。

score 4 · Accepted Answer

cacheモバイル Safari でのオプションを使用している$.ajaxSetup()場合、モバイル Safari もキャッシュするため、POST にタイムスタンプを使用する必要があるようです。のドキュメントによると$.ajax()（からの指示があります$.ajaxSetup()）：

キャッシュを false に設定すると、HEAD および GET リクエストでのみ正しく機能します。GET パラメータに「_={timestamp}」を追加することで機能します。このパラメーターは、GET によって既に要求された URL に対して POST が行われる IE8 を除いて、他のタイプの要求には必要ありません。

そのため、上記のケースでは、そのオプションを単独で設定しても役に立ちません。

score 3 · Accepted Answer

与えられた優れた答えへの小さな追加：javascriptを持たないユーザーのために非ajaxバックアップソリューションを実行している場合は、とにかくそれらのサーバー側ヘッダーを正しくする必要があります。これは不可能ではありませんが、私はそれをあきらめるものを理解しています;）

SOには、適切なヘッダーの完全なセットを提供する別の質問があると確信しています。私は完全に有罪判決を受けているわけではありません。

score 2 · Accepted Answer

基本的にcache:false;は、進行状況に応じてコンテンツが変化すると思われる ajax を追加するだけです。そして、コンテンツが変わらない場所は省略できます。このようにして、毎回新しい応答を取得します

score 2 · Accepted Answer

Internet Explorer の Ajax キャッシング: それについてどうするつもりですか? 次の 3 つのアプローチを提案します。

?date=[timestamp] のように、クエリ文字列にキャッシュ無効化トークンを追加します。jQuery と YUI では、これを自動的に行うように指示できます。

GET の代わりに POST を使用する

ブラウザーがキャッシュすることを特に禁止する HTTP 応答ヘッダーを送信する

score 1 · Accepted Answer

@Athasach が言ったように、jQuery ドキュメントによると、$.ajaxSetup({cache:false})GET および HEAD リクエスト以外では機能しません。

Cache-Control: no-cacheとにかく、サーバーからヘッダーを送り返す方がよいでしょう。これにより、懸念事項がより明確に分離されます。

もちろん、これはプロジェクトに属していないサービス URL では機能しません。その場合、サードパーティサービスをクライアントコードから呼び出すのではなく、サーバーコードからプロキシすることを検討してください。

score 0 · Accepted Answer

IE 9 を使用している場合は、コントローラークラス定義の前に以下を使用する必要があります。

[OutputCache(NoStore = true、期間 = 0、VaryByParam = "*")]

public class TestController : コントローラー

これにより、ブラウザがキャッシュされなくなります。

このリンクの詳細: http://dougwilsonsa.wordpress.com/2011/04/29/disabling-ie9-ajax-response-caching-asp-net-mvc-3-jquery/

実際、これで私の問題は解決しました。

javascript - AJAX 呼び出し結果のブラウザ キャッシュを防止する

21 に答える 21

Related

Reference

javascript - AJAX 呼び出し結果のブラウザキャッシュを防止する