web-dev-qa-db-ja.com

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

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

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

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

javascriptjqueryajaxbrowser-cache
241
Salamander2007

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

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

編集：この答えは数年前のものです。それはまだ動作します（それゆえ私はそれを削除しませんでした）、しかし今これを達成するためのより良い/よりきれいな方法があります。私の好みは this methodですが、 this answerはページの有効期間中にevery requestのキャッシュを無効にしたい場合にも役に立ちます。

225
Mark Bell

次の例では、使用するjQueryメソッド（$ .get、$ .ajaxなど）に関係なく、将来のすべてのAJAX要求がキャッシュされないようにします。

$.ajaxSetup({ cache: false });
503
Peter J

JQueryの$ .get（）は結果をキャッシュします。の代わりに

$.get("myurl", myCallback)

あなたは$ .ajaxを使うべきです。

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

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

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

ここでのすべての答えは要求されたURLに足跡を残します。それはサーバーのアクセスログに現れます。

私は副作用のないヘッダベースのソリューションを必要としていました、そしてそれが すべてのブラウザでWebページのキャッシングを制御する方法？ で述べられているヘッダを設定することによって達成できることがわかりました。

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

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

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

私は通常Math.random()を使用しますが、日付の使用に問題はありません（同じ値を2回取得するためにAJAX要求を速く実行しないでください）。

13
Greg

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

cacheプロパティは、次のものと共に使用できます。

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

GET ...の代わりにPOSTリクエストを使うのはどうですか？ （どちらにしてもいいのですが…）

5
Thomas Hansen

もちろん、 "キャッシュを壊す"テクニックは仕事をやり遂げるでしょう、しかしもし応答がキャッシュされるべきではないとサーバーがクライアントに指示したならば、これはそもそも起こりません。場合によっては、応答をキャッシュすることが有益ですが、そうでないこともあります。サーバーにデータの正しい有効期間を決定させます。後で変更することをお勧めします。 UIコードのさまざまな場所から行うよりも、サーバーから行う方がはるかに簡単です。

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

4
Mark Renouf

多分あなたは代わりに$ .ajax（）を見るべきです（あなたがjQueryを使っているのなら、それはそのように見えます）。見てください： http://docs.jquery.com/Ajax/jQuery.ajax#options とオプション "キャッシュ"。

もう1つの方法は、サーバー側で物事をキャッシュする方法を検討することです。

4
finpingvin

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

SOには別の質問があると思います。それは適切なヘッダーの完全なセットをあなたに与えるでしょう。私は完全に納得のいくマウス回答が100％すべてのベースをカバーするわけではありません。

3
krosenvold

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

キャッシュをfalseに設定すると、HEADおよびGET要求でのみ正しく機能します。 GETパラメータに "_ = {timestamp}"を追加することで動作します。 POSTがすでにGETによって要求されているURLに作成されている場合、IE8を除き、このパラメータは他の種類の要求には必要ありません。

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

3
Athasach

これで、Ajaxリクエストでキャッシュオプションを有効/無効にすることで簡単に実行できます。

$(function () {
    var url = 'your url goes here';
    $('#ajaxButton').click(function (e) {
        $.ajax({
            url: url,
            data: {
                test: 'value'
            },
                cache: true, //cache enabled, false to reverse
                complete: doSomething
            });
        });
    });
    //ToDo after ajax call finishes
    function doSomething(data) {
        console.log(data);
    }
});
2
Omar El Don

基本的にajaxにcache:false;を追加するだけで、進行が進むにつれて内容が変わると思います。内容が変わらないところではこれを省略することができます。このようにしてuは毎回新しい応答を得ます

2
Santosh Upadhayay

Internet ExplorerのAjaxキャッシング：あなたはそれをどうするつもりですか？ は3つのアプローチを提案します：

  1. ？date = [timestamp]のように、キャッシュ無効化トークンをクエリ文字列に追加します。 jQueryとYUIでは、これを自動的に行うように指示できます。
  2. GETの代わりにPOSTを使用
  3. ブラウザによるキャッシュを禁止するHTTPレスポンスヘッダーを送信する
2
Lijo

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

とにかくあなたのサーバからCache-Control: no-cacheヘッダを送り返すほうが賢明です。それは懸念のより明確な分離を提供します。

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

1
rstackhouse

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

[OutputCache（NoStore = true、Duration = 0、VaryByParam = "*"）]

パブリッククラスTestController：Controller

これはブラウザがキャッシュするのを防ぎます。

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

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

1
Net Solver

.net ASP MVCを使用している場合は、エンドポイント関数に次の属性を追加して、コントローラーアクションのキャッシュを無効にします。 ]

1
Marius