ブラウザがAJAX呼び出し結果をキャッシュしないようにする

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

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

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

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

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

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

以下は、使用するjQueryメソッド（$ .get、$。ajaxなど）に関係なく、今後のすべてのAJAXリクエストがキャッシュされるのを防ぎます。

$.ajaxSetup({ cache: false });

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

$.get("myurl", myCallback)

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

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

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

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

結果は、少なくともChromeで機能する場合、次のようになります。

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

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

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

個人的には、クエリ文字列メソッドはサーバーにヘッダーを設定するよりも信頼性が高いと感じています-プロキシまたはブラウザーがそれをとにかくキャッシュしないという保証はありません（一部のブラウザーは他よりも悪い-名前を付けない）。

私は通常使用してMath.random()いますが、日付の使用に問題はありません（同じ値を2回取得するのに十分な速さでAJAXリクエストを実行するべきではありません）。

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

このcacheプロパティは次のもので使用できます。

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

もちろん、「キャッシュを壊す」手法は仕事を成し遂げるでしょうが、サーバーがクライアントに応答がキャッシュされるべきではないことを示したなら、これは最初に起こりません。場合によっては、応答をキャッシュすることが有益な場合とそうでない場合があります。サーバーにデータの正しい存続期間を決定させます。後で変更することもできます。UIコードのさまざまな場所から行うよりも、サーバーから行うほうがはるかに簡単です。

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

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

本当の問題は、これをキャッシュしないようにする必要がある理由です。常に変更されるためにキャッシュしない場合は、サーバーはリソースをキャッシュしないように指定する必要があります。それが時々変化するだけの場合（依存するリソースの1つが変化する可能性があるため）、クライアントコードがそれを知る方法を持っている場合、ハッシュまたは最終更新日から計算されるURLにダミーパラメータを追加できます。それらのリソース（これはMicrosoft Ajaxスクリプトリソースで行っていることであり、永久にキャッシュすることができますが、新しいバージョンは表示されたとおりに提供できます）。クライアントが変更を認識できない場合、正しい方法はサーバーがHEADリクエストを適切に処理し、キャッシュされたバージョンを使用するかどうかをクライアントに通知することです。ランダムパラメータを追加したり、キャッシュしないようにクライアントから指示したりするのは間違っているように思えます。キャッシュ可能性はサーバーリソースのプロパティであるため、サーバー側で決定する必要があります。自問するもう1つの質問は、このリソースが本当にGETを通じて提供されるのか、それともPOSTを経由するのかということです。これはセマンティクスの問題ですが、セキュリティにも影響します（サーバーがGETを許可した場合にのみ機能する攻撃があります）。POSTはキャッシュされません。

たぶん、代わりに$ .ajax（）を見る必要があります（jQueryを使用している場合は、このようになります）。見てください：http : //docs.jquery.com/Ajax/jQuery.ajax#optionsとオプション「キャッシュ」。

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

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

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

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

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

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

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

Internet ExplorerのAjaxキャッシング：それについて何をしますか？3つのアプローチを提案します。

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

これで、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);
    }
});

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/

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

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

あなたは送り返す方が良いです Cache-Control: no-cacheとにかくサーバーからヘッダー。これにより、問題を明確に分離できます。

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

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

[OutputCacheAttribute(VaryByParam = "*", Duration = 0, NoStore = true)]

ヘッダーを追加

headers: {
                'Cache-Control':'no-cache'
            }

Math.random() リクエストURLに追加する