Ngăn chặn bộ nhớ cache của kết quả cuộc gọi AJAX

Có vẻ như nếu tôi tải nội dung động bằng cách sử dụng $.get(), kết quả được lưu trong bộ nhớ cache trong trình duyệt.

Thêm một số chuỗi ngẫu nhiên trong QueryString dường như để giải quyết vấn đề này (tôi sử dụng new Date().toString()), nhưng điều này cảm thấy giống như một vụ hack.

Có cách nào khác để đạt được điều này? Hoặc, nếu chuỗi duy nhất là cách duy nhất để đạt được điều này, bất kỳ đề xuất nào khác ngoài new Date()?

Tôi sử dụng new Date().getTime(), điều này sẽ tránh va chạm trừ khi bạn có nhiều yêu cầu xảy ra trong cùng một mili giây:

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

Chỉnh sửa: Câu trả lời này là vài năm tuổi. Nó vẫn hoạt động (do đó tôi chưa xóa nó), nhưng có nhiều cách tốt hơn / sạch hơn để đạt được điều này ngay bây giờ . Sở thích của tôi là cho này phương pháp, nhưng này câu trả lời cũng rất hữu ích nếu bạn muốn bộ nhớ đệm vô hiệu hóa cho mỗi yêu cầu trong suốt cuộc đời của một trang.

Việc sau đây sẽ ngăn tất cả các yêu cầu AJAX trong tương lai không được lưu vào bộ nhớ cache, bất kể bạn sử dụng phương thức jQuery nào ($ .get, $ .ajax, v.v.)

$.ajaxSetup({ cache: false });

$ .Get () của JQuery sẽ lưu trữ các kết quả. Thay vì

$.get("myurl", myCallback)

bạn nên sử dụng $ .ajax, điều này sẽ cho phép bạn tắt bộ đệm ẩn:

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

Tất cả các câu trả lời ở đây để lại dấu chân trên URL được yêu cầu sẽ hiển thị trong nhật ký truy cập của máy chủ.

Tôi cần một giải pháp dựa trên tiêu đề không có tác dụng phụ và tôi thấy có thể đạt được bằng cách thiết lập các tiêu đề được đề cập trong Cách kiểm soát bộ đệm ẩn trang web, trên tất cả các trình duyệt? .

Kết quả, hoạt động cho Chrome ít nhất, sẽ là:

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

một cách khác là không cung cấp tiêu đề bộ đệm từ máy chủ trong mã tạo phản hồi cho lệnh gọi ajax:

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

Cá nhân tôi cảm thấy rằng phương thức chuỗi truy vấn đáng tin cậy hơn so với việc cố gắng đặt các tiêu đề trên máy chủ - không có gì đảm bảo rằng proxy hoặc trình duyệt sẽ không lưu cache bằng mọi cách (một số trình duyệt còn tệ hơn các trình duyệt khác - không đặt tên).

Tôi thường sử dụng Math.random()nhưng tôi không thấy có gì sai khi sử dụng ngày (bạn không nên thực hiện các yêu cầu AJAX đủ nhanh để nhận được cùng một giá trị hai lần).

Theo tài liệu: http://api.jquery.com/jquery.ajax/

bạn có thể sử dụng cachetài sản với:

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

Tất nhiên các kỹ thuật "phá bộ nhớ cache" sẽ hoàn thành công việc, nhưng điều này sẽ không xảy ra ở nơi đầu tiên nếu máy chủ chỉ ra cho khách hàng rằng phản hồi không nên được lưu vào bộ đệm. Trong một số trường hợp có lợi cho phản hồi bộ đệm, một số lần thì không. Hãy để máy chủ quyết định tuổi thọ chính xác của dữ liệu. Bạn có thể muốn thay đổi nó sau. Dễ dàng thực hiện từ máy chủ hơn từ nhiều nơi khác nhau trong mã UI của bạn.

Tất nhiên điều này không có ích nếu bạn không có quyền kiểm soát máy chủ.

Còn việc sử dụng yêu cầu POST thay vì NHẬN ... thì sao? (Mà dù sao bạn cũng nên ...)

Câu hỏi thực sự là tại sao bạn cần điều này để không được lưu trữ. Nếu không nên lưu vào bộ đệm vì nó thay đổi liên tục, máy chủ sẽ chỉ định để không lưu trữ tài nguyên. Nếu đôi khi nó chỉ thay đổi (vì một trong những tài nguyên mà nó phụ thuộc có thể thay đổi) và nếu mã máy khách có cách nhận biết về nó, nó có thể nối thêm một tham số giả vào url được tính từ một số băm hoặc ngày sửa đổi cuối cùng trong số các tài nguyên đó (đó là những gì chúng tôi làm trong tài nguyên tập lệnh Microsoft Ajax để chúng có thể được lưu trữ vĩnh viễn nhưng các phiên bản mới vẫn có thể được phục vụ khi chúng xuất hiện). Nếu máy khách không thể biết các thay đổi, cách chính xác là máy chủ sẽ xử lý các yêu cầu CHÍNH đúng cách và cho khách hàng biết có nên sử dụng phiên bản được lưu trong bộ nhớ cache hay không. Dường như với tôi như nối thêm một tham số ngẫu nhiên hoặc thông báo từ máy khách để không bao giờ lưu trữ bộ đệm là sai vì khả năng lưu trữ là một thuộc tính của tài nguyên máy chủ và do đó nên được quyết định phía máy chủ. Một câu hỏi khác để tự hỏi mình là tài nguyên này có thực sự được phục vụ thông qua GET hay nó nên đi qua POST? Đó là một câu hỏi về ngữ nghĩa, nhưng nó cũng có ý nghĩa bảo mật (có những cuộc tấn công chỉ hoạt động nếu máy chủ cho phép GET). POST sẽ không được lưu trữ.

Có lẽ bạn nên xem $ .ajax () thay vào đó (nếu bạn đang sử dụng jQuery, trông giống như vậy). Hãy xem: http://docs.jquery.com/Ajax/jQuery.ajax#options và tùy chọn "bộ đệm".

Một cách tiếp cận khác là xem xét cách bạn lưu trữ mọi thứ ở phía máy chủ.

Một bổ sung nhỏ cho các câu trả lời tuyệt vời được đưa ra: Nếu bạn đang chạy với một giải pháp sao lưu không phải là ajax cho người dùng không có javascript, bạn sẽ phải sửa các tiêu đề phía máy chủ đó. Điều này không phải là không thể, mặc dù tôi hiểu những người từ bỏ nó;)

Tôi chắc chắn có một câu hỏi khác về SO sẽ cung cấp cho bạn bộ tiêu đề đầy đủ phù hợp. Tôi không hoàn toàn trả lời con chuột trả lời bao gồm tất cả các cơ sở 100%.

Đối với những người sử dụng cachetùy chọn $.ajaxSetup()trên Safari trên thiết bị di động, có vẻ như bạn có thể phải sử dụng dấu thời gian cho POST, vì Safari cũng lưu trữ trên thiết bị di động. Theo tài liệu trên $.ajax()(mà bạn được hướng đến từ $.ajaxSetup()):

Đặt cache thành false sẽ chỉ hoạt động chính xác với các yêu cầu CHÍNH và NHẬN. Nó hoạt động bằng cách nối thêm "_ = {dấu thời gian}" vào tham số GET. Tham số này không cần thiết cho các loại yêu cầu khác, ngoại trừ trong IE8 khi POST được tạo cho một URL đã được GET yêu cầu.

Vì vậy, thiết lập tùy chọn đó sẽ không giúp bạn trong trường hợp tôi đã đề cập ở trên.

Về cơ bản chỉ cần thêm cache:false;vào ajax nơi bạn nghĩ nội dung sẽ thay đổi khi tiến trình tiếp tục. Và nơi mà nội dung sẽ không thay đổi ở đó bạn có thể bỏ qua điều này. Bằng cách này, bạn sẽ nhận được phản hồi mới mỗi lần

Bộ nhớ đệm Ajax của nhà thám hiểm Internet: Bạn sẽ làm gì với nó? gợi ý ba cách tiếp cận:

1. Thêm mã thông báo bộ nhớ cache vào chuỗi truy vấn, như? Date = [dấu thời gian]. Trong jQuery và YUI, bạn có thể bảo họ làm điều này tự động.
2. Sử dụng POST thay vì GET
3. Gửi tiêu đề phản hồi HTTP đặc biệt cấm trình duyệt lưu vào bộ đệm

Giờ đây, thật dễ dàng để làm điều đó bằng cách bật / tắt tùy chọn bộ đệm trong yêu cầu ajax của bạn, giống như thế này

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

Nếu bạn đang sử dụng IE 9, thì bạn cần sử dụng phần sau trước định nghĩa lớp trình điều khiển của mình:

[OutputCache (NoStore = true, Thời gian = 0, VaryByParam = "*")]

lớp công khai TestContoder: Trình điều khiển

Điều này sẽ ngăn trình duyệt lưu vào bộ nhớ cache.

Chi tiết về liên kết này: http://dougwilsonsa.wordpress.com/2011/04/29/diseac-ie9-ajax-response-caching-asp-net-mvc-3-jquery/

Trên thực tế điều này đã giải quyết vấn đề của tôi.

Như @Athasach đã nói, theo các tài liệu của jQuery, $.ajaxSetup({cache:false}) sẽ không hoạt động cho các yêu cầu GET và HEAD.

Bạn nên gửi lại Cache-Control: no-cache tiêu đề từ máy chủ của bạn. Nó cung cấp một sự tách biệt rõ ràng hơn của mối quan tâm.

Tất nhiên, điều này sẽ không hoạt động đối với các url dịch vụ mà bạn không thuộc về dự án của bạn. Trong trường hợp đó, bạn có thể xem xét ủy quyền dịch vụ bên thứ ba từ mã máy chủ thay vì gọi nó từ mã máy khách.

Nếu bạn đang sử dụng .net ASP MVC, hãy tắt bộ đệm ẩn trên hành động của bộ điều khiển bằng cách thêm thuộc tính sau vào chức năng điểm cuối:

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

thêm tiêu đề

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

nối Math.random() vào url yêu cầu