Cegah caching browser dari hasil panggilan AJAX

Sepertinya jika saya memuat konten dinamis menggunakan $.get(), hasilnya di-cache di browser.

Menambahkan beberapa string acak di QueryString tampaknya dapat mengatasi masalah ini (saya gunakan new Date().toString()), tetapi ini terasa seperti peretasan.

Apakah ada cara lain untuk mencapai ini? Atau, jika string unik adalah satu-satunya cara untuk mencapai ini, ada saran selain new Date()?

Saya menggunakan new Date().getTime(), yang akan menghindari tabrakan kecuali jika Anda memiliki beberapa permintaan terjadi dalam milidetik yang sama:

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

Sunting: Jawaban ini berumur beberapa tahun. Masih berfungsi (karenanya saya belum menghapusnya), tetapi ada cara yang lebih baik / lebih bersih untuk mencapai ini sekarang . Preferensi saya adalah untuk ini metode, tetapi ini jawabannya juga berguna jika Anda ingin caching menonaktifkan untuk setiap permintaan selama masa halaman.

Berikut ini akan mencegah semua permintaan AJAX di masa mendatang dari di-cache, terlepas dari metode jQuery yang Anda gunakan ($ .get, $ .ajax, dll.)

$.ajaxSetup({ cache: false });

$ .Get () JQuery akan men-cache hasil. Dari pada

$.get("myurl", myCallback)

Anda harus menggunakan $ .ajax, yang memungkinkan Anda untuk mematikan caching:

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

Semua jawaban di sini meninggalkan jejak pada URL yang diminta yang akan muncul di log akses server.

Saya membutuhkan solusi berbasis tajuk tanpa efek samping dan saya menemukan itu dapat dicapai dengan mengatur tajuk yang disebutkan dalam Cara mengontrol caching halaman web, di semua browser? .

Hasilnya, paling tidak berfungsi untuk Chrome, adalah:

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

cara lain adalah dengan tidak menyediakan header cache dari server di dalam kode yang menghasilkan respons terhadap panggilan ajax:

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

Secara pribadi saya merasa bahwa metode kueri string lebih dapat diandalkan daripada mencoba mengatur header di server - tidak ada jaminan bahwa proxy atau browser tidak akan hanya menyimpannya (beberapa browser lebih buruk daripada yang lain - tidak menyebutkan nama).

Saya biasanya menggunakan Math.random()tetapi saya tidak melihat ada yang salah dengan menggunakan tanggal (Anda seharusnya tidak melakukan permintaan AJAX cukup cepat untuk mendapatkan nilai yang sama dua kali).

Berikut dokumentasi: http://api.jquery.com/jquery.ajax/

Anda dapat menggunakan cacheproperti dengan:

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

Tentu saja "pemecahan cache" teknik akan menyelesaikan pekerjaan, tetapi ini tidak akan terjadi di tempat pertama jika server menunjukkan kepada klien bahwa respons tidak boleh di-cache. Dalam beberapa kasus itu bermanfaat untuk tanggapan cache, beberapa kali tidak. Biarkan server memutuskan umur data yang benar. Anda mungkin ingin mengubahnya nanti. Jauh lebih mudah dilakukan dari server daripada dari berbagai tempat di kode UI Anda.

Tentu saja ini tidak membantu jika Anda tidak memiliki kendali atas server.

Bagaimana dengan menggunakan permintaan POST bukannya GET ...? (Yang seharusnya Anda tetap ...)

Pertanyaan sebenarnya adalah mengapa Anda perlu ini tidak di-cache. Jika tidak boleh di-cache karena itu berubah sepanjang waktu, server harus menentukan untuk tidak men-cache sumber daya. Jika kadang-kadang hanya berubah (karena salah satu sumber daya yang bergantung pada dapat berubah), dan jika kode klien memiliki cara untuk mengetahuinya, ia dapat menambahkan parameter dummy ke url yang dihitung dari beberapa hash atau tanggal modifikasi terakhir dari sumber daya tersebut (itulah yang kami lakukan dalam sumber daya skrip Microsoft Ajax sehingga mereka dapat di-cache selamanya tetapi versi baru masih dapat dilayani saat muncul). Jika klien tidak dapat mengetahui perubahan, cara yang benar seharusnya bagi server untuk menangani permintaan HEAD dengan benar dan memberi tahu klien apakah akan menggunakan versi yang di-cache atau tidak. Sepertinya saya suka menambahkan parameter acak atau mengatakan dari klien untuk tidak pernah cache salah karena cacheability adalah properti dari sumber daya server, dan karenanya harus diputuskan sisi server. Pertanyaan lain untuk ditanyakan kepada diri sendiri adalah apakah sumber ini harus benar-benar dilayani melalui GET atau haruskah melalui POST? Itu adalah pertanyaan tentang semantik, tetapi juga memiliki implikasi keamanan (ada serangan yang hanya berfungsi jika server mengizinkan GET). POST tidak akan di-cache.

Mungkin Anda harus melihat $ .ajax () sebagai gantinya (jika Anda menggunakan jQuery, yang terlihat seperti). Lihatlah: http://docs.jquery.com/Ajax/jQuery.ajax#options dan opsi "cache".

Pendekatan lain adalah dengan melihat bagaimana Anda menyimpan sesuatu di sisi server.

Tambahan kecil untuk jawaban luar biasa yang diberikan: Jika Anda menjalankan dengan solusi cadangan non-ajax untuk pengguna tanpa javascript, Anda harus tetap mendapatkan header sisi server yang benar. Ini bukan tidak mungkin, meskipun saya mengerti mereka yang menyerah;)

Saya yakin ada pertanyaan lain pada SO yang akan memberi Anda set lengkap header yang sesuai. Saya tidak sepenuhnya diyakinkan, jawaban tikus mencakup semua basis 100%.

Bagi Anda yang menggunakan cacheopsi $.ajaxSetup()pada Safari seluler, tampaknya Anda mungkin harus menggunakan cap waktu untuk POST, karena Safari seluler juga menyimpan cache. Menurut dokumentasi pada $.ajax()(dari mana Anda diarahkan $.ajaxSetup()):

Mengatur cache ke false hanya akan berfungsi dengan benar dengan permintaan HEAD dan GET. Ini bekerja dengan menambahkan "_ = {timestamp}" ke parameter GET. Parameter tidak diperlukan untuk jenis permintaan lainnya, kecuali di IE8 saat POST dibuat ke URL yang telah diminta oleh GET.

Jadi pengaturan opsi itu sendiri tidak akan membantu Anda dalam kasus yang saya sebutkan di atas.

Pada dasarnya tambahkan saja cache:false;ajax di mana Anda pikir konten akan berubah seiring perkembangannya. Dan tempat di mana konten tidak akan berubah di sana kamu bisa menghilangkan ini. Dengan cara ini Anda akan mendapat respons baru setiap saat

Caching Ajax Internet Explorer: Apa yang Akan Anda Lakukan Tentang Ini? menyarankan tiga pendekatan:

1. Tambahkan token penghilang cache ke string kueri, seperti? Date = [timestamp]. Di jQuery dan YUI Anda dapat memberitahu mereka untuk melakukan ini secara otomatis.
2. Gunakan POST bukan GET
3. Kirim tajuk respons HTTP yang secara khusus melarang browser untuk menyimpannya

Sekarang, mudah untuk melakukannya dengan mengaktifkan / menonaktifkan opsi cache dalam permintaan ajax Anda, seperti ini

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

Jika Anda menggunakan IE 9, maka Anda perlu menggunakan yang berikut di depan definisi kelas controller Anda:

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

TestController kelas publik: Pengendali

Ini akan mencegah browser dari caching.

Detail tentang tautan ini: http://dougwilsonsa.wordpress.com/2011/04/29/disabling-ie9-ajax-response-caching-asp-net-mvc-3-jquery/

Sebenarnya ini memecahkan masalah saya.

Seperti yang dikatakan @Athasach, menurut jQuery docs, $.ajaxSetup({cache:false})tidak akan berfungsi untuk selain permintaan GET dan HEAD.

Anda lebih baik mengirim kembali Cache-Control: no-cachetajuk dari server Anda. Ini memberikan pemisahan keprihatinan yang lebih bersih.

Tentu saja, ini tidak akan berfungsi untuk url layanan yang bukan milik proyek Anda. Dalam hal ini, Anda dapat mempertimbangkan proksi layanan pihak ketiga dari kode server daripada memanggilnya dari kode klien.

Jika Anda menggunakan .net ASP MVC, nonaktifkan caching pada tindakan pengontrol dengan menambahkan atribut berikut pada fungsi titik akhir:

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

tambahkan tajuk

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

tambahkan Math.random() ke url permintaan