Zapobiegaj buforowaniu wyników połączenia AJAX w przeglądarce

Wygląda na to, że jeśli ładuję zawartość dynamiczną przy użyciu $.get(), wynik jest buforowany w przeglądarce.

Dodanie losowego ciągu znaków w QueryString wydaje się rozwiązać ten problem (używam new Date().toString()), ale wydaje się, że to hack.

Czy jest jakiś inny sposób na osiągnięcie tego? Lub, jeśli unikalny ciąg jest jedynym sposobem na osiągnięcie tego, jakieś sugestie inne niż new Date()?

Używam new Date().getTime(), co pozwoli uniknąć kolizji, chyba że wystąpi wiele żądań w ciągu tej samej milisekundy:

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

Edycja: Ta odpowiedź ma kilka lat. Nadal działa (dlatego go nie usunąłem), ale istnieją teraz lepsze / czystsze sposoby osiągnięcia tego celu . Preferuję tę metodę, ale ta odpowiedź jest również przydatna, jeśli chcesz wyłączyć buforowanie dla każdego żądania w czasie życia strony.

Poniższe zapobiegnie buforowaniu wszystkich przyszłych żądań AJAX, niezależnie od używanej metody jQuery ($ .get, $ .ajax itp.)

$.ajaxSetup({ cache: false });

$ .Get () JQuery zachowa wyniki w pamięci podręcznej. Zamiast

$.get("myurl", myCallback)

powinieneś użyć $ .ajax, który pozwoli ci wyłączyć buforowanie:

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

Wszystkie odpowiedzi tutaj zostawiają ślad na żądanym adresie URL, który pojawi się w dziennikach dostępu serwera.

Potrzebowałem rozwiązania opartego na nagłówkach bez efektu ubocznego i odkryłem, że można to osiągnąć, konfigurując nagłówki wymienione w temacie Kontrolowanie buforowania stron internetowych we wszystkich przeglądarkach? .

Rezultat, działający przynajmniej dla Chrome, byłby następujący:

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

innym sposobem jest brak nagłówków pamięci podręcznej od strony serwera w kodzie, który generuje odpowiedź na wywołanie ajax:

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

Osobiście uważam, że metoda ciągu zapytania jest bardziej niezawodna niż próba ustawienia nagłówków na serwerze - nie ma gwarancji, że serwer proxy lub przeglądarka i tak go nie buforuje (niektóre przeglądarki są gorsze od innych - bez nazw).

Zwykle używam, Math.random()ale nie widzę nic złego w używaniu daty (nie powinieneś robić żądań AJAX wystarczająco szybko, aby uzyskać tę samą wartość dwa razy).

Zgodnie z dokumentacją: http://api.jquery.com/jquery.ajax/

możesz użyć cachenieruchomości z:

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

Oczywiście techniki „łamania pamięci podręcznej” wykonają zadanie, ale nie zdarzyłoby się to przede wszystkim, gdyby serwer wskazał klientowi, że nie należy buforować odpowiedzi. W niektórych przypadkach korzystne jest buforowanie odpowiedzi, czasem nie. Pozwól serwerowi decydować o poprawnym czasie życia danych. Możesz to zmienić później. Znacznie łatwiej jest to zrobić z serwera niż z wielu różnych miejsc w kodzie interfejsu użytkownika.

Oczywiście to nie pomaga, jeśli nie masz kontroli nad serwerem.

Co powiesz na użycie żądania POST zamiast GET ...? (Które i tak powinieneś ...)

Prawdziwe pytanie brzmi: dlaczego nie trzeba tego buforować? Jeśli nie należy go buforować, ponieważ cały czas się zmienia, serwer powinien określić, aby nie buforować zasobu. Jeśli czasem się po prostu zmienia (ponieważ jeden z zasobów, od których zależy, może się zmienić), a jeśli kod klienta ma sposób o tym wiedzieć, może dołączyć parametr zastępczy do adresu URL, który jest obliczany z pewnego skrótu lub daty ostatniej modyfikacji tych zasobów (to właśnie robimy w zasobach skryptu Microsoft Ajax, aby można je było zawsze przechowywać w pamięci podręcznej, ale nowe wersje mogą być nadal wyświetlane, gdy się pojawią). Jeśli klient nie może wiedzieć o zmianach, serwer powinien poprawnie obsługiwać żądania HEAD i informować klienta, czy ma używać wersji buforowanej, czy nie. Wydaje mi się, że dodawanie losowego parametru lub mówienie klientowi, aby nigdy nie buforować, jest błędne, ponieważ buforowanie jest właściwością zasobu serwera i dlatego powinno się decydować po stronie serwera. Innym pytaniem, które należy sobie zadać, jest to, czy ten zasób powinien być rzeczywiście obsługiwany przez GET, czy też powinien przejść przez POST? Jest to kwestia semantyki, ale ma również wpływ na bezpieczeństwo (są ataki, które działają tylko wtedy, gdy serwer pozwala na GET). POST nie zostanie zbuforowany.

Może zamiast tego powinieneś spojrzeć na $ .ajax () (jeśli używasz jQuery, jak to wygląda). Spójrz na: http://docs.jquery.com/Ajax/jQuery.ajax#options i opcję „cache”.

Innym podejściem byłoby przyjrzenie się, jak buforujesz rzeczy po stronie serwera.

Mały dodatek do podanych doskonałych odpowiedzi: Jeśli korzystasz z rozwiązania do tworzenia kopii zapasowych innych niż ajax dla użytkowników bez javascript, będziesz musiał poprawić nagłówki po stronie serwera. Nie jest to niemożliwe, choć rozumiem tych, którzy się poddają;)

Jestem pewien, że jest jeszcze jedno pytanie dotyczące SO, które da ci pełny zestaw odpowiednich nagłówków. Nie jestem do końca przekonany, że odpowiedź myszy obejmuje wszystkie bazy w 100%.

Dla tych z was, którzy korzystają z cacheopcji $.ajaxSetup()mobilnego Safari, może być konieczne użycie znacznika czasu dla testów POST, ponieważ mobilne Safari również to buforuje. Zgodnie z dokumentacją $.ajax()(do której jesteś kierowany $.ajaxSetup()):

Ustawienie wartości false w pamięci podręcznej będzie działać poprawnie tylko z żądaniami HEAD i GET. Działa poprzez dołączenie „_ = {timestamp}” do parametrów GET. Ten parametr nie jest potrzebny w przypadku innych typów żądań, z wyjątkiem IE8, gdy POST jest wysyłany do adresu URL, który został już zażądany przez GET.

Samo ustawienie tej opcji nie pomoże ci w przypadku, o którym wspomniałem powyżej.

Zasadniczo po prostu dodaj cache:false;w ajax, gdzie Twoim zdaniem zawartość się zmieni w miarę postępu. A w miejscu, w którym treść się nie zmieni, możesz to pominąć. W ten sposób otrzymasz nową odpowiedź za każdym razem

Buforowanie Ajax w programie Internet Explorer: co zamierzasz z tym zrobić? sugeruje trzy podejścia:

1. Dodaj token pomijania pamięci podręcznej do ciągu zapytania, na przykład? Date = [timestamp]. W jQuery i YUI możesz im powiedzieć, aby zrobili to automatycznie.
2. Użyj POST zamiast GET
3. Wyślij nagłówek odpowiedzi HTTP, który specjalnie zabrania przeglądarkom buforowania go

Teraz łatwo to zrobić, włączając / wyłączając opcję pamięci podręcznej w żądaniu ajax, podobnie jak to

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

Jeśli używasz IE 9, musisz użyć następujących definicji definicji klasy kontrolera:

[OutputCache (NoStore = true, czas trwania = 0, VaryByParam = „*”)]

TestController: kontroler klasy publicznej

Zapobiegnie to buforowaniu przeglądarki.

Szczegóły tego linku: http://dougwilsonsa.wordpress.com/2011/04/29/disablowanie-ie9-ajax-response-caching-asp-net-mvc-3-jquery/

Właściwie to rozwiązało mój problem.

Jak powiedział @Athasach, zgodnie z dokumentami jQuery: $.ajaxSetup({cache:false}) nie będzie działać dla innych niż żądania GET i HEAD.

Lepiej odeślij Cache-Control: no-cache każdym razie nagłówek z serwera. Zapewnia bardziej przejrzysty podział problemów.

Oczywiście nie działałoby to w przypadku adresów URL usług, które nie należą do Twojego projektu. W takim przypadku możesz rozważyć udostępnienie usługi innej firmy za pomocą kodu serwera zamiast wywoływania jej z kodu klienta.

Jeśli używasz .NET ASP MVC, wyłącz buforowanie akcji kontrolera, dodając następujący atrybut do funkcji punktu końcowego:

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

dodaj nagłówek

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

dołącz Math.random() do adresu URL żądania