Verhindern, dass die Browser-Caching von jQuery AJAX-Aufruf Ergebnis

https://stackoverflow.com/questions/367786

21-08-2019
|

Frage

Es sieht aus wie wenn ich dynamische Inhalte mit $.get() laden, wird das Ergebnis im Browser zwischengespeichert werden.

in Abfrage-Zeichenfolge einige zufällige Zeichenfolge Hinzufügen scheint dieses Problem zu lösen (ich benutze new Date().toString()), aber das fühlt sich an wie ein Hack.

Gibt es eine andere Möglichkeit, dies zu erreichen? Oder, wenn eindeutige Zeichenfolge ist der einzige Weg, dies zu erreichen, irgendwelche Vorschläge andere als new Date()?

Lösung

Ich benutze new Date().getTime(), die Kollisionen zu vermeiden, wenn Sie mehrere Anfragen haben innerhalb derselben Millisekunde passiert:

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

Edit: Diese Antwort mehr Jahre alt ist. Es funktioniert immer noch (daher habe ich es nicht gelöscht), aber gibt es bessere / sauberere Wege, dies jetzt zu erreichen . Meine Präferenz ist für diese Methode, aber

Andere Tipps

Im Folgenden werden alle zukünftigen AJAX-Anfragen verhindern, dass im Cache gespeichert werden, unabhängig davon, welche Methode Sie verwenden jQuery ($ .get, $ Schnipsel, usw.)

$.ajaxSetup({ cache: false });

jQuerys $ .get () wird die Ergebnisse zwischenzuspeichern. Statt

$.get("myurl", myCallback)

Sie sollten $ Schnipsel verwenden, die es Ihnen erlaubt, schalten Sie das Caching aus:

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

Eine andere Weise ist kein Cache-Header von Server-Seite in dem Code zu schaffen, der die Antwort auf Ajax-Aufruf erzeugt:

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

Alle Antworten hier lassen einen Fußabdruck auf die angeforderte URL, die oben in den Zugriffsprotokollen des Servers angezeigt.

Ich brauchte eine Header-basierte Lösung ohne Nebenwirkung und ich fand es kann durch die Einrichtung der Header erwähnten in Wie Web-Seiten-Caching zu steuern, in allen Browsern? .

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

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

Ich persönlich glaube, dass die Query-String-Methode ist zuverlässiger als zu versuchen, Header auf dem Server festgelegt - es gibt keine Garantie, dass ein Proxy oder Browser wird nicht nur es sowieso Cache (einige Browser sind schlimmer als andere - Namensgebung keine Namen) .

Ich benutze Math.random() in der Regel aber ich habe nichts falsch sehen mit dem Datum (Sie sollten AJAX nicht fordert schnell genug tun, zweimal den gleichen Wert zu erhalten).

Nach der Dokumentation: http://api.jquery.com/jquery.ajax/

können Sie die cache Eigenschaft mit:

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

Natürlich „Cache-breaking“ Techniken werden der Job erledigen, aber das wäre nicht in erster Linie geschehen, wenn der Server an den Client darauf hingewiesen, dass die Antwort nicht zwischengespeichert werden. In einigen Fällen ist es zu Cache-Antworten von Vorteil, manchmal nicht. Lassen Sie den Server die richtige Lebensdauer der Daten entscheiden. Sie können es später ändern möchten. Viel einfacher zu tun, von dem Server als von vielen verschiedenen Orten in Ihrem UI-Code.

Natürlich ist dies nicht hilft, wenn Sie keine Kontrolle über den Server haben.

Was ist eine POST-Anforderung anstelle eines GET ...? (Sie sollten es trotzdem ...)

Die eigentliche Frage ist, warum diese müssen nicht zwischengespeichert werden. Wenn es nicht im Cache gespeichert werden sollte, weil es die ganze Zeit ändert, sollte der Server angeben, um die Ressource nicht zwischenzuspeichern. Wenn es ändert sich nur manchmal (weil eine der Ressourcen hängt es von ändern können), und wenn der Client-Code eine Möglichkeit zu wissen, über sie hat, kann es einen Dummy-Parameter an die URL anhängen, die von einem Hash oder Datum der letzten Änderung berechnet wird diese Ressourcen (das ist, was wir in Microsoft Ajax-Skript Ressourcen zu tun, damit sie für immer im Cache gespeichert werden, aber neue Versionen noch bedient werden können, wie sie erscheinen). Wenn der Kunde nicht von Änderungen wissen kann, sollte der richtige Weg für den Server seine HEAD-Anfragen richtig zu behandeln und dem Client zu sagen, ob die Cache-Version verwendet wird oder nicht. Scheint mir, wie ein zufälligen Parameter angehängt oder von dem Client zu sagen, nie Cache ist falsch, weil Cachebarkeit eine Eigenschaft der Server-Ressource ist, und so serverseitige entschieden werden sollte. Eine andere Frage, sich zu fragen ist, sollte diese Ressource wirklich durch GET bedient werden oder sollte es durch POST gehen? Das ist eine Frage der Semantik, aber es hat auch Auswirkungen auf die Sicherheit (es gibt Angriffe, die nur funktionieren, wenn der Server für GET erlaubt). POST wird nicht gecached erhalten.

Vielleicht sollten Sie bei $ Schnipsel () aussehen stattdessen (wenn Sie jQuery verwenden, die es aussieht). Schauen Sie sich auf: http://docs.jquery.com/Ajax/jQuery.ajax #OPTIONS und die Option "Cache".

Ein weiterer Ansatz wäre zu prüfen, wie Sie die Dinge auf der Server-Seite zwischenspeichern.

Eine kleine Neben den hervorragenden Antworten gegeben: Wenn Sie mit einem Nicht-Ajax-Backup-Lösung für Benutzer ohne Javascript ausgeführt wird, werden Sie diese serverseitige Header korrekt sowieso bekommen. Dies ist nicht unmöglich, obwohl ich solche, die es aufgeben verstehen;)

Ich bin sicher, dass eine andere Frage auf, so gibt es, dass Sie den vollen Satz von Header geben, die geeignet sind. Ich bin nicht ganz conviced miceus Antwort deckt alle Basen 100%.

Für die von Ihnen die cache Möglichkeit $.ajaxSetup() auf mobile Safari verwendet, scheint es, dass Sie einen Zeitstempel für POSTs verwenden müssen können, da mobile Safari das auch zwischenspeichert. Gemäß der Dokumentation auf $.ajax() (die Sie von $.ajaxSetup() gerichtet sind):

Einstellung Cache auf false funktioniert nur korrekt mit HEAD und GET-Anfragen. Es funktioniert durch Anhängen von „_ = {Zeitstempel}“, um die GET-Parameter. Der Parameter wird nicht für andere Arten von Anfragen benötigt werden, außer in IE8, wenn ein POST an eine URL gemacht wird, die bereits von einer GET angefordert wurde.

Einstellung, damit Option allein werden Ihnen nicht im Fall helfen, wie ich oben erwähnt.

Im Grunde nur cache:false; in der Ajax hinzufügen, wo Sie den Inhalt denken, ändert sich der Fortschritt weitergehen. Und der Ort, wo der Inhalt dort ändern wont u kann dies unterlassen. Auf diese Weise wird u die neue Antwort jedes Mal bekommen

Internet Explorer Ajax Caching: Was wollen Sie dagegen tun können ? schlägt drei Ansätze:

einen Cache hinzufügen, um den Query-String Zerschlagung Token, wie? Date = [timestamp]. In jQuery und YUI Sie können ihnen sagen, dies automatisch zu tun.

Verwenden Sie POST statt GET

Senden Sie einen HTTP-Response-Header, die speziell Browser zwischenzuspeichern verbieten

Jetzt ist es einfach, es zu tun, indem die Aktivierung / Deaktivierung Cache-Option in Ihrer Ajax-Anforderung, wie diese

$(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 das Internet Explorer 9 verwenden, dann müssen Sie die folgenden vor dem Controller Klassendefinition verwenden:

[Output (NoStore = true, Dauer = 0, VaryByParam = "*")]

public class Testcontroller: Controller

Dies wird den Browser-Caching verhindern.

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

Eigentlich löste dies mein Problem.

Wie @Athasach sagte, nach dem jQuery docs, $.ajaxSetup({cache:false}) wird nicht für andere arbeiten als GET und HEAD-Anfragen.

Sie sind besser dran, trotzdem einen Cache-Control: no-cache Header vom Server zurückschickt. Es bietet eine saubere Trennung von Bedenken.

Natürlich wäre dies nicht für Service-Urls arbeitet, dass Sie nicht zu einem Projekt gehören. In diesem Fall könnten Sie den Dritten Service von Server-Code Proxying, anstatt sie von Client-Code aufrufen.

Wenn Sie .net ASP MVC verwenden, deaktivieren Sie das Caching auf der Controller-Aktion, indem folgendes Attribut auf der Funktion Endpunkt: [OutputCacheAttribute (VaryByParam = "*", Laufzeit = 0, NoStore = true)]

anhängen Math.random () auf die Anfrage-URL

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow