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

를 사용하여 동적 콘텐츠를로드 $.get()하면 결과가 브라우저에 캐시됩니다.

QueryString에 임의의 문자열을 추가하면이 문제가 해결되는 것처럼 보이지만 (사용합니다 new Date().toString()) 해킹처럼 느껴집니다.

이것을 달성하는 다른 방법이 있습니까? 또는 고유 문자열이 이것을 달성하는 유일한 방법이라면 new Date()? 이외의 제안은 무엇입니까?

내가 사용하는 new Date().getTime()같은 밀리 초 내에서 일어나는 여러 요청을하지 않는 한 충돌을 피할 수있는 :

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

편집 : 이 답변은 몇 살입니다. 여전히 작동하지만 (삭제하지는 않았지만)이를 달성하는 더 나은 방법이 있습니다 . 이 방법을 선호 하지만 이 답변은 페이지 수명 동안 모든 요청에 대해 캐싱을 비활성화하려는 경우에도 유용합니다 .

다음은 사용하는 jQuery 메소드 ($ .get, $ .ajax 등)에 관계없이 향후 모든 AJAX 요청이 캐시되지 않도록합니다.

$.ajaxSetup({ cache: false });

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

$.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 코드의 여러 위치보다 서버에서 수행하는 것이 훨씬 쉽습니다.

물론 서버를 제어 할 수없는 경우에는 도움이되지 않습니다.

GET 대신 POST 요청을 사용하는 것은 어떻습니까? (어쨌든 ...)

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

어쩌면 $ .ajax () 대신 (jQuery를 사용하는 경우처럼 보일 것입니다). http://docs.jquery.com/Ajax/jQuery.ajax#options 및 옵션 "cache"를 살펴보십시오 .

또 다른 방법은 서버 측에서 캐시하는 방법을 보는 것입니다.

주어진 훌륭한 답변에 대한 작은 추가 사항 : 자바 스크립트가없는 사용자를 위해 비 백업 백업 솔루션으로 실행하는 경우 어쨌든 해당 서버 측 헤더를 가져와야합니다. 포기하는 사람들을 이해하지만 이것은 불가능하지 않습니다.)

SO에 대한 다른 질문이 있다고 확신하여 적절한 전체 헤더 세트를 제공합니다. 나는 전적으로 유죄 판결을받지 않았다.

모바일 Safari 에서 cache옵션 을 사용하는 사람들에게는 $.ajaxSetup()모바일 Safari가 캐시하기 때문에 POST에 타임 스탬프를 사용해야 할 수도 있습니다. 에 대한 설명서에 따르면 $.ajax()(에서 보낸 $.ajaxSetup()) :

캐시를 false로 설정하면 HEAD 및 GET 요청에서만 올바르게 작동합니다. "_ = {timestamp}"를 GET 매개 변수에 추가하여 작동합니다. GET에서 이미 요청한 URL에 POST를 수행 할 때 IE8을 제외하고 다른 유형의 요청에는이 매개 변수가 필요하지 않습니다.

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

기본적으로 cache:false;진행 상황에 따라 내용이 변경 될 것이라고 생각하는 아약스를 추가하십시오 . 그리고 내용이 바뀌지 않는 곳에서 이것을 생략 할 수 있습니다. 이런 식으로 u는 매번 새로운 응답을 얻을 것입니다

Internet Explorer의 Ajax 캐싱 : 무엇을하려고하십니까? 세 가지 접근 방식을 제안합니다.

1. ? date = [timestamp]와 같이 캐시 버스 팅 토큰을 쿼리 문자열에 추가하십시오. jQuery와 YUI에서는이를 자동으로 수행하도록 지시 할 수 있습니다.
2. GET 대신 POST 사용
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를 사용하는 경우 엔드 포인트 기능에 다음 속성을 추가하여 컨트롤러 조치에서 캐싱을 사용 불가능하게하십시오.

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

헤더 추가

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

Math.random() 요청 URL에 추가