ป้องกันการแคชเบราว์เซอร์ของผลการโทร AJAX

ดูเหมือนว่าหากฉันโหลดเนื้อหาแบบไดนามิกโดยใช้$.get()ผลลัพธ์จะถูกแคชในเบราว์เซอร์

การเพิ่มสตริงแบบสุ่มใน QueryString ดูเหมือนว่าจะแก้ปัญหานี้ (ฉันใช้new Date().toString()) แต่รู้สึกเหมือนแฮ็ค

มีวิธีอื่นในการบรรลุเป้าหมายนี้หรือไม่? หรือถ้าสตริงที่ไม่ซ้ำกันเป็นวิธีเดียวที่จะบรรลุเป้าหมายนี้ข้อเสนอแนะอื่น ๆ กว่าnew Date()?

ฉันใช้new Date().getTime()ซึ่งจะหลีกเลี่ยงการชนกันเว้นแต่คุณจะมีคำขอหลายอย่างเกิดขึ้นภายในมิลลิวินาทีเดียวกัน:

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

แก้ไข:คำตอบนี้มีอายุหลายปี ก็ยังคงทำงาน (เพราะฉะนั้นฉันไม่ได้ลบมัน) แต่มีที่ดีกว่า / วิธีการทำความสะอาดของการบรรลุนี้ในขณะนี้ ตั้งค่าของฉันสำหรับการนี้วิธี แต่นี้คำตอบยังจะเป็นประโยชน์ถ้าคุณต้องการที่จะปิดการใช้งานแคชสำหรับทุกคำขอในช่วงชีวิตของหน้า

ข้อมูลต่อไปนี้จะป้องกันคำขอ AJAX ในอนาคตทั้งหมดไม่ให้ถูกแคชไม่ว่าคุณจะใช้วิธีใดใน jQuery ($ .get, $ .ajax ฯลฯ )

$.ajaxSetup({ cache: false });

$ .get () ของ JQuery จะแคชผลลัพธ์ แทน

$.get("myurl", myCallback)

คุณควรใช้ $ .ajax ซึ่งจะช่วยให้คุณปิดการแคช:

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

คำตอบทั้งหมดที่นี่ปล่อยให้รอยเท้าบน URL ที่ร้องขอซึ่งจะปรากฏในบันทึกการเข้าถึงของเซิร์ฟเวอร์

ฉันต้องการโซลูชันที่อิงกับส่วนหัวโดยไม่มีผลข้างเคียงและฉันพบว่าสามารถทำได้โดยการตั้งค่าส่วนหัวที่กล่าวถึงในวิธีการควบคุมหน้าเว็บแคชในเบราว์เซอร์ทั้งหมดหรือไม่ .

ผลลัพธ์ที่ทำงานกับ Chrome ได้อย่างน้อยจะเป็น:

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

อีกวิธีหนึ่งคือให้ไม่มีส่วนหัวแคชจากเซิร์ฟเวอร์ในรหัสที่สร้างการตอบสนองต่อการโทร ajax:

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

โดยส่วนตัวแล้วฉันรู้สึกว่าวิธีสตริงข้อความค้นหามีความน่าเชื่อถือมากกว่าการพยายามตั้งค่าส่วนหัวบนเซิร์ฟเวอร์ - ไม่มีการรับประกันว่าพร็อกซีหรือเบราว์เซอร์จะไม่เพียงแค่แคชมันอย่างไรก็ตามเบราว์เซอร์บางตัวก็แย่กว่าคนอื่น ๆ

ฉันมักจะใช้Math.random()แต่ฉันไม่เห็นอะไรผิดปกติกับการใช้วันที่ (คุณไม่ควรทำการร้องขอ AJAX เร็วพอที่จะรับค่าเดียวกันสองครั้ง)

ติดตามเอกสาร: http://api.jquery.com/jquery.ajax/

คุณสามารถใช้cacheคุณสมบัตินี้กับ:

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

แน่นอนว่าเทคนิค "การแบ่งแคช" จะทำให้งานเสร็จ แต่จะไม่เกิดขึ้นตั้งแต่แรกถ้าเซิร์ฟเวอร์ระบุให้ลูกค้าทราบว่าการตอบสนองไม่ควรถูกแคช ในบางกรณีมันจะมีประโยชน์ในการตอบสนองแคชบางครั้งไม่ ปล่อยให้เซิร์ฟเวอร์เป็นตัวตัดสินอายุการใช้งานที่ถูกต้องของข้อมูล คุณอาจต้องการเปลี่ยนในภายหลัง ทำจากเซิร์ฟเวอร์ได้ง่ายกว่าจากหลาย ๆ ที่ในรหัส UI ของคุณ

แน่นอนว่ามันจะไม่ช่วยถ้าคุณไม่สามารถควบคุมเซิร์ฟเวอร์ได้

แล้วการใช้คำขอ POST แทนที่จะเป็น GET ... (ซึ่งคุณควรจะทำ ... )

คำถามที่แท้จริงคือทำไมคุณไม่ต้องการให้แคชนี้ หากไม่ควรแคชเนื่องจากมีการเปลี่ยนแปลงตลอดเวลาเซิร์ฟเวอร์ควรระบุเพื่อไม่แคชทรัพยากร หากบางครั้งมันเปลี่ยนไป (เพราะทรัพยากรอย่างใดอย่างหนึ่งมันขึ้นอยู่กับสามารถเปลี่ยนแปลงได้) และหากรหัสลูกค้ามีวิธีการรู้เกี่ยวกับมันก็สามารถผนวกพารามิเตอร์ดัมมี่ไปยัง URL ที่คำนวณจากกัญชาบางวันหรือวันที่แก้ไขล่าสุด ของทรัพยากรเหล่านั้น (นั่นคือสิ่งที่เราทำในทรัพยากรสคริปต์ของ Microsoft Ajax เพื่อให้สามารถแคชได้ตลอดไป แต่ยังสามารถแสดงเวอร์ชันใหม่ได้ตามที่ปรากฏ) หากไคลเอนต์ไม่ทราบการเปลี่ยนแปลงวิธีที่ถูกต้องควรสำหรับเซิร์ฟเวอร์เพื่อจัดการคำขอ HEAD อย่างถูกต้องและแจ้งให้ไคลเอ็นต์ทราบว่าจะใช้เวอร์ชันแคชหรือไม่ ดูเหมือนว่าฉันจะต่อท้ายพารามิเตอร์แบบสุ่มหรือการบอกจากไคลเอนต์ว่าแคชไม่ถูกต้องเพราะความสามารถในการแคชเป็นคุณสมบัติของทรัพยากรเซิร์ฟเวอร์และดังนั้นควรตัดสินใจด้านเซิร์ฟเวอร์ คำถามอีกข้อหนึ่งที่ถามตัวเองคือควรให้บริการผ่าน GET หรือผ่าน POST นั่นเป็นคำถามของซีแมนทิกส์ แต่ก็มีผลกระทบด้านความปลอดภัยด้วย (มีการโจมตีที่ทำงานได้ก็ต่อเมื่อเซิร์ฟเวอร์ยอมให้รับ) POST จะไม่ถูกแคช

บางทีคุณควรดูที่ $ .ajax () แทน (ถ้าคุณใช้ jQuery ซึ่งดูเหมือนว่า) ลองดูที่: http://docs.jquery.com/Ajax/jQuery.ajax#optionsและตัวเลือก "แคช"

อีกวิธีหนึ่งคือดูว่าคุณทำสิ่งต่าง ๆ บนฝั่งเซิร์ฟเวอร์

คำตอบที่ยอดเยี่ยมเล็ก ๆ น้อย ๆ ที่ได้รับ: หากคุณกำลังใช้งานโซลูชันสำรองข้อมูลที่ไม่ใช่อาแจ็กซ์สำหรับผู้ใช้ที่ไม่มีจาวาสคริปต์คุณจะต้องแก้ไขส่วนหัวฝั่งเซิร์ฟเวอร์เหล่านั้นให้ถูกต้อง นี่เป็นไปไม่ได้แม้ว่าฉันจะเข้าใจผู้ที่ยอมแพ้ก็ตาม)

ฉันแน่ใจว่ามีคำถามอื่นเกี่ยวกับ SO ที่จะให้ส่วนหัวแบบเต็มที่เหมาะสม ฉันไม่เชื่อว่าการตอบกลับของหนูจะครอบคลุมพื้นฐานทั้งหมด 100%

สำหรับคนที่คุณใช้cacheตัวเลือก$.ajaxSetup()บนมือถือ Safari ดูเหมือนว่าคุณอาจต้องใช้การประทับเวลาสำหรับ POSTs เนื่องจาก Safari มือถือนั้นแคชด้วยเช่นกัน ตามเอกสารประกอบของ$.ajax()(ซึ่งคุณได้รับคำแนะนำจาก$.ajaxSetup()):

การตั้งค่าแคชเป็นเท็จจะทำงานได้อย่างถูกต้องกับคำขอ HEAD และ GET มันทำงานได้โดยการผนวก "_ = {timestamp}" กับพารามิเตอร์ GET ไม่จำเป็นต้องใช้พารามิเตอร์สำหรับคำขอประเภทอื่นยกเว้นใน IE8 เมื่อทำการ POST กับ URL ที่ GET ร้องขอไปแล้ว

ดังนั้นการตั้งค่าตัวเลือกนั้นเพียงอย่างเดียวจะไม่ช่วยคุณในกรณีที่ฉันกล่าวถึงข้างต้น

โดยทั่วไปเพียงเพิ่มcache:false;ใน Ajax ที่คุณคิดว่าเนื้อหาจะเปลี่ยนไปตามความคืบหน้า และสถานที่ที่เนื้อหาจะไม่เปลี่ยนแปลงคุณสามารถละเว้นสิ่งนี้ได้ ด้วยวิธีนี้คุณจะได้รับการตอบสนองใหม่ทุกครั้ง

Ajax Caching ของ Internet Explorer: คุณจะทำอะไรกับมัน แนะนำสามแนวทาง:

1. เพิ่มโทเค็นการจับแคชลงในสตริงแบบสอบถามเช่น? date = [timestamp] ใน jQuery และ YUI คุณสามารถบอกให้พวกเขาทำสิ่งนี้โดยอัตโนมัติ
2. ใช้ POST แทน GET
3. ส่งส่วนหัวตอบกลับ HTTP ที่ห้ามเบราว์เซอร์เพื่อแคชโดยเฉพาะ

ตอนนี้คุณสามารถทำได้โดยการเปิด / ปิดตัวเลือกแคชในคำขอ ajax ของคุณเช่นนี้

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

หากคุณใช้ IE 9 คุณจำเป็นต้องใช้สิ่งต่อไปนี้ด้านหน้าคำจำกัดความของคลาสคอนโทรลเลอร์ของคุณ:

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

TestController ระดับสาธารณะ: ควบคุม

นี่จะเป็นการป้องกันไม่ให้เบราว์เซอร์ทำการแคช

รายละเอียดเกี่ยวกับลิงค์นี้: http://dougwilsonsa.wordpress.com/2011/04/29/disabling-ie9-ajax-response-caching-asp-net-mvc-3-jquery/

ที่จริงแล้วสิ่งนี้สามารถแก้ไขปัญหาของฉันได้

ดังที่ @Athasach กล่าวไว้ตามเอกสาร jQuery $.ajaxSetup({cache:false})จะไม่สามารถทำงานได้นอกเหนือจากคำขอ GET และ HEAD

คุณดีกว่าส่งกลับ Cache-Control: no-cacheหัวจากเซิร์ฟเวอร์ของคุณกลับไป มันให้แยกความกังวลที่สะอาด

แน่นอนว่าสิ่งนี้จะไม่ทำงานสำหรับ URL บริการที่คุณไม่ได้อยู่ในโครงการของคุณ ในกรณีดังกล่าวคุณอาจพิจารณาการให้บริการของบุคคลที่สามจากรหัสเซิร์ฟเวอร์แทนที่จะเรียกจากรหัสลูกค้า

หากคุณใช้. net ASP MVC ให้ปิดใช้งานการแคชกับแอ็คชันคอนโทรลเลอร์โดยการเพิ่มแอ็ตทริบิวต์ต่อไปนี้บนฟังก์ชัน end point:

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

เพิ่มส่วนหัว

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

ต่อท้ายMath.random() URL คำขอ