jQuery AJAX 호출 결과의 브라우저 캐싱 방지

https://stackoverflow.com/questions/367786

21-08-2019
|

문제

다음을 사용하여 동적 콘텐츠를 로드하는 것처럼 보입니다. $.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 });

jQuery의 $ .get ()는 결과를 캐시합니다. 대신에

$.get("myurl", myCallback)

$ .ajax를 사용해야합니다.

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

또 다른 방법은 AJAX에 대한 응답을 생성하는 코드의 서버 사이드에서 캐시 헤더를 제공하지 않는 것입니다.

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

여기에 있는 모든 답변은 요청된 URL에 흔적을 남기며 서버의 액세스 로그에 표시됩니다.

부작용이 없는 헤더 기반 솔루션이 필요했고, 다음에 언급된 헤더를 설정하여 이를 달성할 수 있다는 것을 알았습니다. 모든 브라우저에서 웹 페이지 캐싱을 제어하는 방법은 무엇입니까?.

적어도 Chrome에서 작동하는 결과는 다음과 같습니다.

$.ajax({
   url: url, 
   headers: {
     'Cache-Control': 'no-cache, no-store, must-revalidate', 
     'Pragma': 'no-cache', 
     '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 코드의 여러 장소보다 서버에서 수행하는 것이 훨씬 쉽습니다.

물론 서버를 제어하지 않으면 도움이되지 않습니다.

get 대신 게시물 요청을 사용하는 것은 어떻습니까? (어쨌든 ...)

진짜 질문은 왜 이것이 캐시되지 않도록 해야 하는가입니다.항상 변경되기 때문에 캐시하면 안 되는 경우 서버는 해당 리소스를 캐시하지 않도록 지정해야 합니다.가끔 변경되는 경우(종속되는 리소스 중 하나가 변경될 수 있기 때문에) 클라이언트 코드에 이에 대해 알 수 있는 방법이 있는 경우 일부 해시 또는 마지막 수정 날짜에서 계산된 URL에 더미 매개변수를 추가할 수 있습니다. 이러한 리소스 중 (이것이 Microsoft Ajax 스크립트 리소스에서 수행하는 작업이므로 영구적으로 캐시할 수 있지만 새 버전은 나타나는 대로 계속 제공될 수 있습니다.)클라이언트가 변경 사항을 알 수 없는 경우 올바른 방법은 서버가 HEAD 요청을 적절하게 처리하고 클라이언트에게 캐시된 버전을 사용할지 여부를 알려주는 것입니다.캐시 가능성은 서버 리소스의 속성이므로 서버 측에서 결정해야 하기 때문에 임의의 매개 변수를 추가하거나 클라이언트에서 캐시하지 말라고 말하는 것이 잘못된 것 같습니다.스스로에게 물어봐야 할 또 다른 질문은 이 리소스가 실제로 GET을 통해 제공되어야 하는가, 아니면 POST를 거쳐야 하는가입니다.이는 의미론의 문제이지만 보안에도 영향을 미칩니다(서버가 GET을 허용하는 경우에만 작동하는 공격이 있습니다).POST는 캐시되지 않습니다.

어쩌면 당신은 대신 $ .ajax ()를보아야 할 것입니다 (jQuery를 사용하는 경우). 보세요: http://docs.jquery.com/ajax/jquery.ajax#options 그리고 "캐시"옵션.

또 다른 접근법은 서버 측의 캐시를 어떻게 보이는지 살펴 보는 것입니다.

JavaScript가없는 사용자를위한 비 Ajax 백업 솔루션으로 실행중인 경우 우수한 답변에 작은 추가 사항이 추가됩니다. 어쨌든 해당 서버 측 헤더를 올바르게해야합니다. 나는 그것을 포기하는 사람들을 이해하지만 이것은 불가능하지 않습니다.)

나는 당신에게 적절한 헤더 세트를 줄 수있는 또 다른 질문이 있다고 확신합니다. 나는 전적으로 유죄 판결을받은 MICISS 답변이 모든베이스를 100%커버하지는 않습니다.

당신을 위해 cache 옵션 $.ajaxSetup() Mobile Safari에서는 모바일 사파리도 캐시하기 때문에 게시물에 타임 스탬프를 사용해야 할 수도 있습니다. 문서에 따르면 $.ajax() (당신이 출발하는 $.ajaxSetup()):

캐시를 False로 설정하면 헤드에서만 올바르게 작동하고 요청을받습니다. "_ = {timestamp}"를 Get 매개 변수에 추가하여 작동합니다. GET에 의해 이미 요청 된 URL에 게시 된 IE8을 제외하고는 다른 유형의 요청에 대해 매개 변수가 필요하지 않습니다.

따라서 위에서 언급 한 경우에만 해당 옵션을 설정하면 도움이되지 않습니다.

기본적으로 추가하십시오 cache:false; 진행 상황이 진행됨에 따라 콘텐츠가 변경 될 것이라고 생각하는 Ajax에서는 콘텐츠가 변경 될 것이라고 생각합니다. 그리고 콘텐츠가 바뀌지 않는 곳은 이것을 생략 할 수 있습니다. 이런 식으로 U는 매번 새로운 응답을받을 것입니다.

Internet Explorer의 Ajax 캐싱 : 그것에 대해 무엇을 하시겠습니까? 세 가지 접근법을 제안합니다.

날짜 = [타임 스탬프]와 같은 쿼리 문자열에 캐시 파열 토큰을 추가하십시오. jQuery와 Yui에서는 자동으로이를 수행하도록 지시 할 수 있습니다.

get 대신 게시물을 사용하십시오

브라우저가 캐시를 금지하는 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/

실제로 이것은 내 문제를 해결했습니다.

jQuery Docs에 따르면 @athasach가 말했듯이 $.ajaxSetup({cache:false}) Get and Head 요청 이외의 다른 경우에는 작동하지 않습니다.

당신은 a를 다시 보내는 것이 좋습니다 Cache-Control: no-cache 어쨌든 서버에서 헤더. 그것은 더 깨끗한 우려를 분리합니다.

물론 이것은 귀하가 프로젝트에 속하지 않는 서비스 URL에 적용되지 않습니다. 이 경우 클라이언트 코드에서 호출하는 대신 서버 코드에서 타사 서비스를 프록시하는 것을 고려할 수 있습니다.

.NET ASP MVC를 사용하는 경우 엔드 포인트 함수에 다음 속성을 추가하여 컨트롤러 작업의 캐싱을 비활성화합니다.

요청 URL에 math.random ()을 추가하십시오

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow