AJAX कॉल परिणाम के ब्राउज़र कैशिंग को रोकें


262

ऐसा लगता है कि यदि मैं गतिशील सामग्री का उपयोग कर लोड करता हूं $.get(), तो परिणाम ब्राउज़र में कैश्ड है।

QueryString में कुछ यादृच्छिक स्ट्रिंग जोड़ने से यह समस्या (I use new Date().toString()) हल होती है , लेकिन यह एक हैक की तरह लगता है।

क्या इसे हासिल करने का कोई और तरीका है? या, यदि अद्वितीय स्ट्रिंग इसे प्राप्त करने का एकमात्र तरीका है, तो इसके अलावा कोई सुझाव new Date()?


आप $.now()प्रत्येक (और नई तारीख) (। GetTime ()) को करने के बजाय लघु संकेतन का उपयोग कर सकते हैं ।
डटसन

1
आपका प्रश्न शीर्षक एक भ्रामक है। क्या आप इसका नाम बदलने पर विचार कर सकते हैं?
0112

4
क्या आपने किसी अन्य उत्तर को स्वीकार करने के रूप में माना है?
M4N

जवाबों:


241

new Date().getTime()जब तक आपके पास एक ही मिलीसेकंड में कई अनुरोध नहीं होंगे, मैं उपयोग करता हूं , जो टकराव से बचेंगे:

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

संपादित करें: यह उत्तर कई साल पुराना है। यह अभी भी काम करता है (इसलिए मैंने इसे हटाया नहीं है), लेकिन अब इसे प्राप्त करने के बेहतर / क्लीनर तरीके हैंइस पद्धति के लिए मेरी प्राथमिकता है , लेकिन यह उत्तर भी उपयोगी है यदि आप किसी पृष्ठ के जीवनकाल में हर अनुरोध के लिए कैशिंग को अक्षम करना चाहते हैं ।


11
मैं केवल डाउनवोट करूंगा क्योंकि यह jQuery को साफ करने के लिए है। पीटर जे द्वारा जवाब में ऐसा करने से आपका समाधान काम करेगा, लेकिन लंबे समय तक बनाए रखना अधिक कठिन है।
निकल्स वुल्फ

11
इसके किस भाग के रखरखाव की आवश्यकता है? जब jQuery क्या करता है की तुलना में?
सनी आर गुप्ता

5
यह ध्यान देने योग्य है कि लायक हो सकता है new Date().getTime()कोड इस तरह उपयोग किया जाता है ... var nocache = new Date().getTime(); var path = 'http://hostname.domain.tld/api/somejsonapi/?cache=' + nocache;। मुझे यह पता लगाने में कुछ मिनट लगे कि मैं खुद बाहर हूँ। बेशक ?cacheकोई भी शब्दांकन हो सकता है जो एपीआई वास्तव में नहीं चाहता है।
डबल्यू जेएल

1
+1 यहां तक ​​कि पीटर जे के जवाब में एक बेहतर दृष्टिकोण होने के कारण यह उत्तर गलत नहीं है और न ही खराब उत्तर है। मुझे विश्वास है कि DV बना हुआ है क्योंकि तुम्हारा पीटर के ऊपर है (जैसा कि स्वीकार किया गया है)। और ओपी 2013 की शुरुआत से एसओ पर दिखाई नहीं देता है
मिशेल एरेस

1
url = url + (-1 === url.indexOf('?') ? '?' : '&') + "__=" + Number(new Date());

513

निम्नलिखित सभी भावी AJAX अनुरोधों को कैश किए जाने से रोकेगा, चाहे आप जो भी jQuery विधि का उपयोग करें ($ .get, $ .ajax, आदि)।

$.ajaxSetup({ cache: false });

7
जांच (फ़िडलर) पर, यह jQuery के समान रूप से किसी भी समय एक टाइमस्टैम्प को जोड़कर आंतरिक रूप से लागू होता है (जैसा कि इन उत्तरों में कहीं और चर्चा की गई है)। मेरे लिए, .ajaxSetup पद्धति क्लीनर है (मेरी राय में।)
पीटर जे।

8
वास्तव में यह दस्तावेज़ तैयार कॉल के अंदर होने की आवश्यकता नहीं है।
पीटर जे।

19
विश्व स्तर पर अजाक्स कैशिंग को अक्षम क्यों करें? मुझे लगता है कि इसे प्रति कॉल के आधार पर किया जाना चाहिए, जैसे कि जोनाथन का जवाब क्या है।
सनी आर गुप्ता

5
जो भी आपके ऐप के लिए काम करता है। जब भी मुझे बिल्कुल AJAX कॉल के लिए ताजा डेटा की आवश्यकता होती है, मैं इस एप्लिकेशन का उपयोग व्यावसायिक ऐप्स में करता रहता हूं। दूसरों के लिए, कैश्ड डेटा ठीक है।
पीटर जे।

1
लिंक विवरण: भविष्य के अजाक्स अनुरोधों के लिए डिफ़ॉल्ट मान सेट करें। इसके उपयोग की अनुशंसा नहीं की जाती है।
itwebdeveloper 16

319

JQuery के $ .get () परिणामों को कैश करेगा। के बजाय

$.get("myurl", myCallback)

आपको $ .ajax का उपयोग करना चाहिए, जो आपको कैशिंग बंद करने की अनुमति देगा:

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

62
+1 यह सही उत्तर है। पीटर जे का वैश्विक रूप से अक्षम कैशिंग का समाधान एक बुरा अभ्यास आईएमओ है।
सलमान वॉन अब्बास

7
यह नोट करना महत्वपूर्ण है कि यह पृष्ठ / अनुरोध के लिए केवल "वैश्विक" है।
पीटर जे

3
+1: कैशिंग अनुरोध प्रकार के लिए विशिष्ट होना चाहिए। कुछ सर्वर अनुरोधों को कैशिंग (जहां सर्वर डेटा स्थिर है) की अच्छी तरह से आवश्यकता हो सकती है, इसलिए अनुरोध के आधार पर अनुरोध पर कैशिंग चुनना केवल इसे बंद करने से बेहतर है
कोडिंग किया गया

1
सही उत्तर के लिए +1 - मैन्युअल हैक के बजाय, jQuery की विधि का उपयोग करके प्रति-कॉल के आधार पर कैशिंग को रोकना।
ब्रेंडन हिल

2
एक और अच्छा जवाब। मुझे कहना है, मेरे लिए, विश्व स्तर पर अधिकांश समय कैश को अक्षम करने से बहुत लाभ हुआ है। यह सब इस बात पर निर्भर करता है कि आपका आवेदन कैसे बनाया गया है। कोई चांदी की गोली नहीं है, लेकिन इस स्थिति में, मैं एक फ़ंक्शन की सिफारिश करूंगा जो कैशिंग के लिए बूलियन, कॉलबैक के लिए फ़ंक्शन और मॉड्यूलरिटी के लिए URL स्वीकार करता है। मैनुअल "हैक" ठीक है, लेकिन अगर आप jQuery का उपयोग कर रहे हैं, तो जब भी संभव हो, उनके कार्यों से चिपके रहें। इससे अब न केवल विकास आसान होगा, बल्कि भविष्य में पुस्तकालय का उन्नयन भी होगा।
एंथनी मेसन

24

यहां सभी उत्तर अनुरोधित URL पर एक पदचिह्न छोड़ते हैं जो सर्वर के एक्सेस लॉग में दिखाई देगा।

मुझे बिना किसी साइड इफ़ेक्ट के हेडर आधारित समाधान की आवश्यकता थी और मैंने पाया कि सभी ब्राउज़रों के बीच वेब पेज कैशिंग को कैसे नियंत्रित किया जाए, इसका उल्लेख हेडर सेट करके किया जा सकता है?

परिणाम, क्रोम के लिए कम से कम काम करना होगा:

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


शायद एक बेवकूफ सवाल है, लेकिन अगर मेरी अजाक्स वापसी छवियों, छवियों कैश्ड हो जाएगा? बड़े पैमाने पर अमेज़न S3 अनुरोधों से बचने के लिए?
Marcelo Agimóvel

MarceloAgimóvel, यह एक अलग SO प्रश्न हो सकता है, जो मुझे विश्वास है।
आइडिन

23

एक अन्य तरीका कोड में सर्वरसाइड से कोई कैश हेडर प्रदान करना है जो कि अजाक्स कॉल की प्रतिक्रिया उत्पन्न करता है:

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

17
गलत। IE में, नो-कैश हेडर को XMLHttpRequest कॉल के लिए अनदेखा किया जाता है, जैसा कि यहां चर्चा की गई है: stackoverflow.com/questions/244918/… डेटटाइम (या मेरी .ajaxSetup विधि) केवल वही हैं जो वास्तव में काम करते हैं।
पीटर जे।

मैंने अभी-अभी अपना कैश नो कैश मंत्र चिपकाया है, यह नहीं कहा गया है कि यह IE विशिष्ट है
चूहों

2
यह सभी ब्राउज़रों के लिए कैशिंग बंद करना चाहिए: response.setHeader ("कैश-कंट्रोल", "अधिकतम-आयु = 0, नो-कैश, नो-स्टोर, पोस्ट-चेक = 0, प्री-चेक = 0");
क्रिस ब्रॉस्की

13

व्यक्तिगत रूप से मुझे लगता है कि सर्वर पर हेडर सेट करने की कोशिश करने की तुलना में क्वेरी स्ट्रिंग विधि अधिक विश्वसनीय है - इसमें कोई गारंटी नहीं है कि एक प्रॉक्सी या ब्राउज़र इसे वैसे भी कैश नहीं करेगा (कुछ ब्राउज़र दूसरों की तुलना में बदतर हैं - बिना किसी नाम के नामकरण)।

मैं आमतौर पर उपयोग करता Math.random()हूं लेकिन मुझे तारीख का उपयोग करने के साथ कुछ भी गलत नहीं दिखता है (आपको दो बार समान मूल्य प्राप्त करने के लिए AJAX अनुरोधों को तेजी से नहीं करना चाहिए)।


2
तिथि () को मिलाएं। गणित (आयामी) () के साथ गेटटाइम () और आप सुरक्षित पक्ष पर होना चाहिए। साइड नोट पर, Ext.Ajax भी getTime () का उपयोग करता है जब अक्षमता निर्दिष्ट होती है।
विविडोस

12

प्रलेखन के बाद: http://api.jquery.com/jquery.ajax/

आप इसके cacheसाथ संपत्ति का उपयोग कर सकते हैं :

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

5

बेशक "कैश-ब्रेकिंग" तकनीकों को काम मिल जाएगा, लेकिन यह पहली बार में नहीं होगा यदि सर्वर ने क्लाइंट को संकेत दिया कि प्रतिक्रिया को कैश नहीं किया जाना चाहिए। कुछ मामलों में प्रतिक्रियाओं को कैश करना फायदेमंद होता है, कुछ बार नहीं। सर्वर को डेटा का सही जीवनकाल तय करने दें। आप इसे बाद में बदलना चाह सकते हैं। अपने यूआई कोड में कई अलग-अलग जगहों की तुलना में सर्वर से बहुत आसान है।

यदि आपके पास सर्वर पर कोई नियंत्रण नहीं है, तो निश्चित रूप से यह मदद नहीं करता है।


5

GET के बजाय POST अनुरोध का उपयोग करने के बारे में क्या ...? (जो आपको वैसे भी चाहिए ...)


मुझे लगता है कि यह एक बेहतर समाधान है, लेकिन दुख की बात है कि मैं (किसी तरह) केवल GET अनुरोध कर सकता हूं। तो .. यह अब के लिए नई तिथि () है। getTime ()
सलामन्डर २००

कृपया अपने उत्तर में कुछ स्पष्टीकरण जोड़ें, ताकि अन्य इससे सीख सकें - एक POST अनुरोध की आवश्यकता क्यों होनी चाहिए?
निको हेस

5

असली सवाल यह है कि आपको कैश न करने के लिए इसकी आवश्यकता क्यों है। यदि इसे कैश नहीं किया जाना चाहिए क्योंकि यह हर समय बदलता है, तो सर्वर को संसाधन को कैश नहीं करने के लिए निर्दिष्ट करना चाहिए। यदि यह कभी-कभी बदलता है (क्योंकि संसाधनों में से एक पर निर्भर करता है तो यह बदल सकता है), और यदि ग्राहक कोड में इसके बारे में जानने का एक तरीका है, तो यह डमी पैरामीटर को उस url में जोड़ सकता है जो कुछ हैश या अंतिम संशोधित तिथि से गणना की जाती है उन संसाधनों में (यही हम Microsoft अजाक्स स्क्रिप्ट संसाधनों में करते हैं ताकि उन्हें हमेशा के लिए कैश किया जा सके लेकिन नए संस्करण अभी भी दिखाए जा सकते हैं) यदि क्लाइंट को परिवर्तनों का पता नहीं चल सकता है, तो सर्वर के लिए HEAD अनुरोधों को ठीक से संभालने का सही तरीका होना चाहिए और क्लाइंट को कैश्ड वर्जन का उपयोग करना है या नहीं यह बताना चाहिए। मुझे लगता है जैसे एक यादृच्छिक पैरामीटर को जोड़ना या क्लाइंट से कभी कैश न करने के लिए कहना गलत है क्योंकि कैचेबिलिटी सर्वर संसाधन की एक संपत्ति है, और इसलिए सर्वर-साइड का फैसला किया जाना चाहिए। स्वयं से पूछने के लिए एक और सवाल यह है कि क्या इस संसाधन को वास्तव में GET के माध्यम से परोसा जाना चाहिए या इसे POST के माध्यम से जाना चाहिए? यह शब्दार्थ का प्रश्न है, लेकिन इसमें सुरक्षा निहितार्थ भी हैं (ऐसे हमले होते हैं जो केवल तभी काम करते हैं यदि सर्वर GET के लिए अनुमति देता है)। POST कैश नहीं होगा।


6
क्या होगा यदि आप प्रॉक्सी सर्वर से गुजर रहे हैं जो आप उनकी कैशिंग नीति को नियंत्रित नहीं करते हैं? क्या होगा अगर आपके ऐप को हर बार एक नया अनुरोध करने की आवश्यकता है? चीजों का जवाब हमेशा काले और सफेद रंग में स्पष्ट नहीं होता है, हमेशा ग्रे क्षेत्र होते हैं।
7wp

सच है, यह हमेशा स्पष्ट कटौती नहीं है। लेकिन इस जवाब को देखकर मुझे अपनी मान्यताओं पर सवाल उठाने और मुझे अपनी समस्या का मूल कारण खोजने में मदद मिली। यह सभी के लिए नहीं हो सकता है, लेकिन इससे मुझे मदद मिली। यदि आप इसे पढ़ रहे हैं, तो आपको इस पर भी विचार करना चाहिए।
जोनाथन ट्रान

इससे मुझे मदद मिली, ResponseCaching डिफ़ॉल्ट रूप से 60 मीटर सर्वर साइड पर सेट हो गया। इसे नो-कैश में बदल दिया और इसने क्लाइंट पर कैशिंग बंद कर दिया।
मैट्टीज

4

हो सकता है कि आपको इसके बजाय $ .ajax () दिखना चाहिए (यदि आप jQuery का उपयोग कर रहे हैं, जो ऐसा दिखता है)। इस पर एक नज़र डालें: http://docs.jquery.com/Ajax/jQuery.ajax#options और विकल्प "कैश"।

एक और तरीका यह देखना होगा कि आप सर्वर पर चीजों को कैसे कैश करते हैं।


1
दुर्भाग्य से, कुछ जांच के बाद, $ .ajax () और सेट कैश = असत्य का उपयोग करके मूल रूप से एक ही काम करेंगे। jQuery querystring में कुछ यादृच्छिक संख्या जोड़ देगा, और यह मौजूदा querystring के लिए जाँच नहीं करता है। तो मुझे लगता है कि $ .get () का उपयोग करना पर्याप्त होगा।
सलामन्डर

अच्छा, ठीक है। कभी इसे आजमाया नहीं, बस याद आया कि मैंने इसके बारे में डॉक्स में कुछ देखा है :)
फ़िनपिंगविन

$ .Ajax का उपयोग करना भी आवश्यक नहीं है। बस .ajaxSetup का उपयोग करें।
पीटर जे

3

दिए गए उत्कृष्ट उत्तरों के लिए एक छोटा अतिरिक्त: यदि आप जावास्क्रिप्ट के बिना उपयोगकर्ताओं के लिए एक गैर-अजाक्स बैकअप समाधान के साथ चल रहे हैं, तो आपको वैसे भी उन सर्वर-साइड हेडर को सही करना होगा। यह असंभव नहीं है, हालांकि मैं उन लोगों को समझता हूं जो इसे छोड़ देते हैं;)

मुझे यकीन है कि एसओ पर एक और सवाल है जो आपको उपयुक्त हेडर का पूरा सेट देगा। मैं पूरी तरह से दोषी नहीं हूँ चूहे उत्तर सभी ठिकानों को 100% कवर करते हैं।


3

आप में से जो लोग मोबाइल सफारी के cacheविकल्प का उपयोग कर रहे हैं $.ajaxSetup(), उनके लिए यह प्रतीत होता है कि आपको POST के लिए टाइमस्टैम्प का उपयोग करना पड़ सकता है, क्योंकि मोबाइल सफारी कैश भी है। प्रलेखन के अनुसार $.ajax()(जिस पर आपको निर्देशित किया जाता है $.ajaxSetup()):

कैश को असत्य पर सेट करना केवल HEAD और GET अनुरोधों के साथ सही ढंग से काम करेगा। यह "_ = {टाइमस्टैम्प}" को GET के मापदंडों से जोड़कर काम करता है। आईई 8 में एक जीएसटी द्वारा पहले से ही अनुरोध किए गए URL पर किए जाने पर, IE8 को छोड़कर, पैरामीटर को अन्य प्रकार के अनुरोधों के लिए आवश्यक नहीं है।

तो उस विकल्प को सेट करने से आपको मेरे द्वारा ऊपर बताए गए मामले में मदद नहीं मिलेगी।


2

मूल रूप से सिर्फ cache:false;अजाक्स में जोड़ें जहां आपको लगता है कि प्रगति के रूप में सामग्री बदल जाएगी। और जिस जगह पर कंटेंट नहीं बदलेगा वहां आप इसे छोड़ सकते हैं। इस तरह यू को हर बार नई प्रतिक्रिया मिलेगी


2

इंटरनेट एक्सप्लोरर की अजाक्स कैशिंग: आप इसके बारे में क्या करने जा रहे हैं? तीन दृष्टिकोण बताता है:

  1. क्वेरी स्ट्रिंग, जैसे दिनांक = [टाइमस्टैम्प] में एक कैश बस्टिंग टोकन जोड़ें। JQuery और YUI में आप उन्हें स्वचालित रूप से ऐसा करने के लिए कह सकते हैं।
  2. GET के बजाय POST का उपयोग करें
  3. एक HTTP प्रतिसाद शीर्ष लेख भेजें जो विशेष रूप से ब्राउज़रों को इसे कैश करने के लिए मना करता है

2

अब, आपके 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);
    }
});

3
6 साल बाद आप वही प्रतिक्रिया प्रदान कर रहे हैं जो जोनाथन? ಠ_ಠ
redent84

सवाल पोस्ट होने के 6 साल बाद लोग इसे बता सकते हैं। और उस सवाल का मेरा जवाब किसी और से अलग है, इसका उल्लेख नहीं करना एक सही आजकल है। इस तरह के सवालों का जवाब देना "पूछने वाले" के लिए नहीं है, यह समुदाय और शुरुआती लोगों के लिए है! वैसे भी स्पष्टीकरण जोड़ने के लिए धन्यवाद!
उमर एल डॉन

और आपके और इस एक stackoverflow.com/a/735084/469218 के बीच क्या अंतर है ?
redent84

शायद यह स्पष्टता है, इस तरह के सवाल पूछने वाले एक शुरुआत के दृष्टिकोण से !!
उमर एल डॉन

1

यदि आप IE 9 का उपयोग कर रहे हैं, तो आपको अपने नियंत्रक वर्ग की परिभाषा के सामने निम्नलिखित का उपयोग करने की आवश्यकता है:

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

सार्वजनिक वर्ग TestController: नियंत्रक

यह ब्राउज़र को कैशिंग से रोक देगा।

इस लिंक पर विवरण: http://dougwilsonsa.wordpress.com/2011/04/29/diseable-ie9-ajax-response-caching-asp-net-mvc-3-jquery/

दरअसल इससे मेरी समस्या हल हो गई।


1

जैसा कि @ अष्टाच ने कहा, jQuery डॉक्स के अनुसार, $.ajaxSetup({cache:false})GET और HEAD अनुरोधों के अलावा अन्य के लिए काम नहीं करेगा।

आप Cache-Control: no-cacheवैसे भी अपने सर्वर से हेडर वापस भेजना बेहतर समझते हैं। यह चिंताओं का एक अलग जुदाई प्रदान करता है।

बेशक, यह सेवा के urls के लिए काम नहीं करेगा जो आप अपनी परियोजना से संबंधित नहीं हैं। उस स्थिति में, आप क्लाइंट कोड से कॉल करने के बजाय सर्वर कोड से थर्ड पार्टी सर्विस को प्रॉक्सी करने पर विचार कर सकते हैं।


1

यदि आप .net ASP MVC का उपयोग कर रहे हैं, तो अंतिम बिंदु फ़ंक्शन पर निम्नलिखित विशेषता जोड़कर नियंत्रक कार्रवाई पर कैशिंग को अक्षम करें:

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

क्या आप आगे बता सकते हैं? यह सरणी AJAX से कैसे संबंधित है?
निको हासे

यह एक सरणी नहीं है, इसकी विशेषता एक एमवीसी नियंत्रक एक्शन पर है।
Marius

0

हेडर जोड़ें

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

कृपया अपने उत्तर में कुछ स्पष्टीकरण जोड़ें, ताकि दूसरे इससे सीख सकें - ऐसे हेडर कहां जोड़े जाने चाहिए?
निको हासे

-3

Math.random() अनुरोध url में जोड़ें


2
यह अस्थिर परिणाम देगा।
अ.ज.उत्तलां

Math.random केवल एक प्रॉम्प्ट के रूप में कार्य करेगा, जैसे url? _ = [Math.Random ()], इसका अस्थिर परिणाम से कोई लेना-देना नहीं है।
xiaoyifang

4
मैं समझता हूं कि आप क्या कर रहे थे। मैं केवल टिप्पणी कर रहा था कि Math.Random () कभी-कभी आपको एक ही नंबर दो बार देगा। यदि आप अपने सिस्टम को अनिश्चितताओं से भरते हैं, तो वे केवल एक दूसरे के ऊपर जोड़ देंगे।
18.tj पर aj.toulan
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.