it-swarm.com.de

Browser-Caching von jQuery verhindern AJAX call result

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

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

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

245
Salamander2007

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

Edit: 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 this Methode, aber this Antwort ist auch nützlich, wenn Sie das Caching für every Anfragen während der Lebensdauer von deaktivieren möchten Seite.

229
Mark Bell

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

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

Mit $ .get () von JQuery werden die Ergebnisse zwischengespeichert. Anstatt von

$.get("myurl", myCallback)

sie sollten $ .ajax verwenden, um das Caching zu deaktivieren:

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

eine andere Möglichkeit besteht darin, in dem 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 );
23
miceuz

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

Ich brauchte eine Header-basierte Lösung ohne Nebeneffekte und fand, dass dies durch das Einrichten der in So steuern Sie das Caching von Webseiten in allen Browsern? genannten Header erreicht werden kann.

Das Ergebnis für Chrome zumindest wäre:

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

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

Normalerweise benutze ich Math.random(), aber ich sehe nichts falsches an der Verwendung des Datums (Sie sollten nicht schnell genug AJAX) anfordern, um zweimal den gleichen Wert zu erhalten).

13
Greg

Folgen Sie der Dokumentation: http://api.jquery.com/jquery.ajax/

sie können die Eigenschaft cache verwenden mit:

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

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

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

5
Mark Renouf

Wie wäre es mit einer POST Anfrage anstelle von GET ...? (Was du sowieso tun solltest ...)

5
Thomas Hansen

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 prüfen, wie Sie Dinge auf der Serverseite zwischenspeichern.

4
finpingvin

Eine kleine Ergänzung zu den hervorragenden Antworten: Wenn Sie eine Nicht-Ajax-Backup-Lösung für Benutzer ohne Javascript verwenden, müssen Sie die serverseitigen Header trotzdem korrigieren. Das ist nicht unmöglich, obwohl ich die verstehe, die es aufgeben;)

Ich bin sicher, dass es eine andere Frage zu SO gibt, die Ihnen den vollständigen Satz der passenden Überschriften gibt. Ich bin nicht ganz überzeugt, dass die Antwort von Miceus alle Grundlagen zu 100% abdeckt.

3
krosenvold

Für diejenigen unter Ihnen, die die cache -Option von $.ajaxSetup() in Mobile Safari verwenden, muss möglicherweise ein Zeitstempel für POSTs verwendet werden, da Mobile Safari diesen auch zwischenspeichert. Gemäß der Dokumentation zu $.ajax() (an die Sie von $.ajaxSetup() weitergeleitet werden):

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

Wenn Sie diese Option also alleine einstellen, ist dies in dem oben genannten Fall nicht hilfreich.

3
Athasach

Dies ist jetzt ganz einfach, indem Sie die Cache-Option in Ihrer Ajax-Anfrage wie folgt 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);
    }
});
2
Omar El Don

Fügen Sie einfach cache:false; In den Ajax ein, von dem Sie glauben, dass sich der Inhalt mit dem Fortschritt ändert. Und der Ort, an dem sich der Inhalt nicht ändert, kann weggelassen werden. Auf diese Weise erhalten Sie jedes Mal die neue Antwort

2

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

  1. Fügen Sie der Abfragezeichenfolge ein Cache-Busting-Token wie? Date = [timestamp] hinzu. 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 Browsern das Zwischenspeichern ausdrücklich untersagt
2
Lijo

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

Sie sind besser dran, ein Cache-Control: no-cache Header von Ihrem Server trotzdem. Es sorgt für eine sauberere Trennung von Bedenken.

Dies funktioniert natürlich nicht für Service-URLs, die nicht zu Ihrem Projekt gehören. In diesem Fall sollten Sie in Betracht ziehen, den Drittanbieter-Service über den Servercode zu ersetzen, anstatt ihn über den Clientcode aufzurufen.

1
rstackhouse

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

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

public class TestController: Controller

Dies 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 löste dies mein Problem.

1
Net Solver

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 = wahr)]

1
Marius