Verhindern Sie das Browser-Caching des AJAX-Aufrufergebnisses

Wenn ich dynamische Inhalte mit lade $.get(), wird das Ergebnis im Browser zwischengespeichert.

Das Hinzufügen einer zufälligen Zeichenfolge in QueryString scheint dieses Problem zu lösen (ich verwende es new Date().toString()), aber dies fühlt sich wie ein Hack an.

Gibt es einen anderen Weg, um dies zu erreichen? Oder, wenn nur eine eindeutige Zeichenfolge dies erreichen kann, andere Vorschläge als new Date()?

Ich verwende new Date().getTime(), um Kollisionen zu vermeiden, es sei denn, Sie haben mehrere Anfragen innerhalb derselben Millisekunde:

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

Bearbeiten: Diese Antwort ist mehrere Jahre alt. Es funktioniert immer noch (daher habe ich es nicht gelöscht), aber es gibt bessere / sauberere Möglichkeiten, dies jetzt zu erreichen . Ich bevorzuge diese Methode, aber diese Antwort ist auch nützlich, wenn Sie das Caching für jede Anforderung während der Lebensdauer einer Seite deaktivieren möchten .

Im Folgenden wird verhindert, dass alle zukünftigen AJAX-Anforderungen zwischengespeichert werden, unabhängig davon, welche jQuery-Methode Sie verwenden ($ .get, $ .ajax usw.).

$.ajaxSetup({ cache: false });

JQuerys $ .get () speichert die Ergebnisse zwischen. Anstatt

$.get("myurl", myCallback)

Sie sollten $ .ajax verwenden, damit Sie das Caching deaktivieren können:

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

Alle Antworten hier hinterlassen einen Fußabdruck auf der angeforderten URL, der in den Zugriffsprotokollen des Servers angezeigt wird.

Ich brauchte eine Header-basierte Lösung ohne Nebenwirkungen und stellte fest, dass dies durch das Einrichten der unter So steuern Sie das Zwischenspeichern von Webseiten in allen Browsern genannten Header erreicht werden kann . .

Das Ergebnis, zumindest für Chrome, wäre:

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

Eine andere Möglichkeit besteht darin, im Code, der die Antwort auf einen Ajax-Aufruf generiert, keine Cache-Header von der Serverseite bereitzustellen:

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

Persönlich bin ich der Meinung, dass die Abfragezeichenfolgenmethode zuverlässiger ist als der Versuch, Header auf dem Server festzulegen. Es gibt keine Garantie dafür, dass ein Proxy oder Browser sie ohnehin nicht einfach zwischenspeichert (einige Browser sind schlechter als andere - sie nennen keine Namen).

Normalerweise verwende Math.random()ich, aber ich sehe nichts falsches daran, das Datum zu verwenden (Sie sollten AJAX-Anfragen nicht schnell genug ausführen, um zweimal denselben Wert zu erhalten).

Befolgen Sie die Dokumentation: http://api.jquery.com/jquery.ajax/

Sie können die cacheEigenschaft verwenden mit:

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

Natürlich werden "Cache-Breaking" -Techniken die Arbeit erledigen, aber dies würde nicht in erster Linie passieren, wenn der Server dem Client anzeigt, dass die Antwort nicht zwischengespeichert werden soll. In einigen Fällen ist es vorteilhaft, Antworten zwischenzuspeichern, manchmal nicht. Lassen Sie den Server die richtige Lebensdauer der Daten bestimmen. Möglicherweise möchten Sie es später ändern. Vom Server aus viel einfacher als von vielen verschiedenen Stellen in Ihrem UI-Code.

Dies hilft natürlich nicht, wenn Sie keine Kontrolle über den Server haben.

Was ist mit einer POST-Anfrage anstelle eines GET ...? (Was du sowieso solltest ...)

Die eigentliche Frage ist, warum Sie dies benötigen, um nicht zwischengespeichert zu werden. Wenn es nicht zwischengespeichert werden soll, weil es sich ständig ändert, sollte der Server angeben, dass die Ressource nicht zwischengespeichert werden soll. Wenn es sich nur manchmal ändert (weil sich eine der Ressourcen, von denen es abhängt, ändern kann) und der Client-Code eine Möglichkeit hat, dies zu wissen, kann er einen Dummy-Parameter an die URL anhängen, die aus einem Hash oder einem Datum der letzten Änderung berechnet wird dieser Ressourcen (das tun wir in Microsoft Ajax-Skriptressourcen, damit sie für immer zwischengespeichert werden können, aber neue Versionen können weiterhin so bereitgestellt werden, wie sie angezeigt werden). Wenn der Client keine Änderungen kennt, sollte der Server die HEAD-Anforderungen ordnungsgemäß verarbeiten und dem Client mitteilen, ob die zwischengespeicherte Version verwendet werden soll oder nicht. Mir scheint, dass das Anhängen eines zufälligen Parameters oder die Anweisung des Clients, niemals zwischenzuspeichern, falsch ist, da die Zwischenspeicherbarkeit eine Eigenschaft der Serverressource ist und daher serverseitig entschieden werden sollte. Eine andere Frage, die Sie sich stellen sollten, ist, ob diese Ressource wirklich über GET bereitgestellt werden soll oder ob sie über POST bereitgestellt werden soll. Das ist eine Frage der Semantik, hat aber auch Auswirkungen auf die Sicherheit (es gibt Angriffe, die nur funktionieren, wenn der Server GET zulässt). POST wird nicht zwischengespeichert.

Vielleicht sollten Sie sich stattdessen $ .ajax () ansehen (wenn Sie jQuery verwenden, wie es aussieht). Schauen Sie sich Folgendes an: http://docs.jquery.com/Ajax/jQuery.ajax#options und die Option "Cache".

Ein anderer Ansatz wäre, zu untersuchen, wie Sie Dinge auf der Serverseite zwischenspeichern.

Eine kleine Ergänzung zu den hervorragenden Antworten: Wenn Sie mit einer Nicht-Ajax-Sicherungslösung für Benutzer ohne Javascript arbeiten, müssen Sie diese serverseitigen Header trotzdem korrekt einstellen. Das ist nicht unmöglich, obwohl ich diejenigen verstehe, die es aufgeben;)

Ich bin sicher, es gibt noch eine andere Frage zu SO, die Ihnen den vollständigen Satz geeigneter Header liefert. Ich bin nicht ganz überzeugt, dass die Antwort von Mäusen alle Basen zu 100% abdeckt.

Für diejenigen unter Ihnen, die die cacheOption für $.ajaxSetup()mobile Safari verwenden, scheint es, dass Sie möglicherweise einen Zeitstempel für POSTs verwenden müssen, da Mobile Safari dies auch zwischenspeichert. Gemäß der Dokumentation zu $.ajax()(auf die Sie verwiesen werden $.ajaxSetup()):

Das Setzen des Caches auf false funktioniert nur bei HEAD- und GET-Anforderungen ordnungsgemäß. Es funktioniert, indem "_ = {Zeitstempel}" an die GET-Parameter angehängt wird. Der Parameter wird für andere Arten von Anforderungen nicht benötigt, außer in IE8, wenn ein POST an eine URL gesendet wird, die bereits von einem GET angefordert wurde.

Wenn Sie diese Option allein einstellen, hilft Ihnen dies in dem oben genannten Fall nicht weiter.

Fügen Sie einfach cache:false;den Ajax hinzu, in dem sich der Inhalt im Laufe der Zeit ändern wird. Und der Ort, an dem sich der Inhalt dort nicht ändert, kann man weglassen. Auf diese Weise erhalten Sie jedes Mal die neue Antwort

Ajax-Caching im Internet Explorer: Was werden Sie dagegen tun? schlägt drei Ansätze vor:

1. Fügen Sie der Abfragezeichenfolge ein Cache-Busting-Token hinzu, z. B.? Date = [timestamp]. In jQuery und YUI können Sie sie anweisen, dies automatisch zu tun.
2. Verwenden Sie POST anstelle von GET
3. Senden Sie einen HTTP-Antwortheader, der es Browsern ausdrücklich verbietet, ihn zwischenzuspeichern

Jetzt ist es einfach, die Cache-Option in Ihrer Ajax-Anfrage zu aktivieren / deaktivieren

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

Wenn Sie IE 9 verwenden, müssen Sie vor Ihrer Controller-Klassendefinition Folgendes verwenden:

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

öffentliche Klasse TestController: Controller

Dadurch wird verhindert, dass der Browser zwischengespeichert wird.

Details zu diesem Link: http://dougwilsonsa.wordpress.com/2011/04/29/disabling-ie9-ajax-response-caching-asp-net-mvc-3-jquery/

Eigentlich hat das mein Problem gelöst.

Wie @Athasach sagte, funktioniert es laut den jQuery-Dokumenten $.ajaxSetup({cache:false})nur für GET- und HEAD-Anforderungen.

Sie sind Cache-Control: no-cachesowieso besser dran, einen Header von Ihrem Server zurückzusenden. Es bietet eine sauberere Trennung von Bedenken.

Dies würde natürlich nicht für Service-URLs funktionieren, die nicht zu Ihrem Projekt gehören. In diesem Fall können Sie in Betracht ziehen, den Dienst eines Drittanbieters über den Servercode zu übertragen, anstatt ihn über den Clientcode aufzurufen.

Wenn Sie .net ASP MVC verwenden, deaktivieren Sie das Caching für die Controller-Aktion, indem Sie der Endpunktfunktion das folgende Attribut hinzufügen:

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

Header hinzufügen

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

Math.random() an die Anforderungs-URL anhängen