IE8에서 예기치 않은 AJAX 캐싱 결과


135

JQuery Ajax 요청의 Internet Explorer 캐싱 결과에 심각한 문제가 있습니다.

웹 페이지에 사용자가 새 페이지를 탐색 할 때마다 업데이트되는 헤더가 있습니다. 페이지가로드되면이 작업을 수행합니다

$.get("/game/getpuzzleinfo", null, function(data, status) {
    var content = "<h1>Wikipedia Maze</h1>";
    content += "<p class='endtopic'>Looking for <span><a title='Opens the topic you are looking for in a separate tab or window' href='" + data.EndTopicUrl + "' target='_blank'>" + data.EndTopic + "<a/></span></p>";
    content += "<p class='step'>Step <span>" + data.StepCount + "</span></p>";
    content += "<p class='level'>Level <span>" + data.PuzzleLevel.toString() + "</span></p>";
    content += "<p class='startover'><a href='/game/start/" + data.PuzzleId.toString() + "'>Start Over</a></p>";

    $("#wikiheader").append(content);

}, "json");

단지 헤더 정보를 페이지에 삽입합니다. www.wikipediamaze.com 으로 이동 한 다음 로그인하여 새 퍼즐을 시작하여 확인할 수 있습니다 .

테스트 한 모든 브라우저 (Chrome, Firefox, Safari, Internet Explorer) 에서 IE를 제외하고 는 훌륭하게 작동합니다 . Eveything은 처음으로 IE에 제대로 주입 되었지만 그 이후에는 결코 호출하지 않습니다 /game/getpuzzleinfo. 결과 또는 무언가를 캐시 한 것과 같습니다.

$.post("/game/getpuzzleinfo", ...IE로 전화를 바꾸면 전화가 잘 걸립니다. 그러나 Firefox는 작동을 멈 춥니 다.

IE가 왜 내 $.get아약스 호출을 캐싱하는지에 대해 누군가가 이것에 대해 약간의 조명을 줄 수 있습니까 ?

최신 정보

아래 제안에 따라 내 아약스 요청을 이것으로 변경하여 문제를 해결했습니다.

$.ajax({
    type: "GET",
    url: "/game/getpuzzleinfo",
    dataType: "json",
    cache: false,
    success: function(data) { ... }
});

8
이것을 물어 주셔서 감사합니다. 이 브라우저 동작에 대해 말이 없습니다.
jjohn

1
좋은 질문이고 정말 멋진 웹 사이트입니다. 좋은 생각.
MikeMurko

답변:


177

IE는 Ajax 응답을 적극적으로 캐싱하는 것으로 유명합니다. jQuery를 사용하면서 전역 옵션을 설정할 수 있습니다.

$.ajaxSetup({
    cache: false
});

jQuery가 요청 쿼리 문자열에 임의의 값을 추가하여 IE가 응답을 캐싱하지 못하게합니다.

캐싱을 원하는 곳에서 다른 Ajax 호출이 진행중인 경우에도 다른 Ajax 호출도 비활성화됩니다. 이 경우 $ .ajax () 메소드 사용으로 전환하고 필요한 요청에 대해 해당 옵션을 명시 적으로 활성화하십시오.

자세한 정보는 http://docs.jquery.com/Ajax/jQuery.ajaxSetup 을 참조 하십시오 .


1
URL 끝에 타임 스탬프를 추가 할 수도 있습니다. 왜 jQuery가이 접근 방식을 사용하지 않는지 잘 모르겠습니다.
Eric Johnson

14
@Eric : jQuery가 내부적으로하는 일입니다. "cache : false"옵션은이를 지시합니다.
NickFitz

jquery가 왜 기본적으로 이것을 사용하지 않습니까?
speedplane

방금 IE 8에서 홈페이지를 요청할 때 캐시 옵션이 작동하지 않는 것으로 나타났습니다 /. /index.php전체 URL 또는 다른 URL로 변경하십시오 . 또는 가짜 매개 변수를 직접 추가하십시오/?f=f
Hugo Delsing

8

으로 marr75는 언급 GET의가 캐시됩니다.

이를 방지하기위한 몇 가지 방법이 있습니다. 응답 헤더를 수정하는 것 외에도 무작위로 생성 된 쿼리 문자열 변수를 대상 URL의 끝에 추가 할 수도 있습니다. 이런 식으로 IE는 요청 될 때마다 다른 URL이라고 생각합니다.

이를 수행하는 방법에는 여러 가지가 있습니다 (예 : Math.random(), 날짜의 변형 등).

당신이 그것을 할 수있는 한 가지 방법이 있습니다 :

var oDate = new Date();
var sURL = "/game/getpuzzleinfo?randomSeed=" + oDate.getMilliseconds();
$.get(sURL, null, function(data, status) {
    // your work
});

3

가져 오기는 항상 캐시 가능합니다. 작동 할 수있는 한 가지 전략은 응답 헤더를 편집하고 클라이언트에게 정보를 캐시하지 않거나 캐시를 곧 만료하도록 지시하는 것입니다.


그거 좋은 생각 같아. 어떻게하면 될까요?
Micah

1
그것은로드 된 질문이며 서버 측 코드에 따라 다릅니다. 약간의 지침은 위키피디아 항목 "HTTP 헤더 목록"을 참조하십시오. 예 : Cache-Control : no-cache 만료 : Thu, 01 Dec 1994 16:00:00 GMT 기본적으로이 응답 헤더를 http 응답에 추가해야합니다. ASP.NET, Ruby 및 PHP에서는 매우 간단합니다. 사용하는 서버 측 언어를 찾아보고 응답 헤더를 수정하십시오.
marr75

3
또한 이것은 Jquery에 대한 비판이 아닙니다 (라이브러리를 좋아합니다). 랜덤 쿼리 문자열 매개 변수를 추가하는 방법은 안전하지만 클라이언트에게는 무례합니다 (사용하지 않을 캐시의 항목을 유지할 수 있습니다) 다시).
marr75 2016 년

2

ashx 페이지를 호출하는 경우 다음 코드를 사용하여 서버에서 캐싱을 비활성화 할 수도 있습니다.

context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
context.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches); 

1

이것이 내가 아약스 호출을 위해하는 일입니다.

var url = "/mypage.aspx";
// my other vars i want to add go here
url = url + "&sid=" + Math.random();
// make ajax call

그것은 나를 위해 아주 잘 작동합니다.


1

NickFitz는 좋은 답변을 제공하지만 IE9에서도 캐싱을 해제해야합니다. IE8 및 IE9 만 대상으로하기 위해이 작업을 수행 할 수 있습니다.

<!--[if lte IE 9]>
<script>
    $.ajaxSetup({
        cache: false
    });
</script>
<![endif]-->

0

여기에 대한 답변은 jQuery를 사용하거나 어떤 이유로 든 xmlHttpRequest 객체를 직접 사용하는 사람들에게 매우 유용합니다 ...

자동 생성 된 Microsoft 서비스 프록시를 사용하는 경우 해결하기가 쉽지 않습니다.

요령은 이벤트 핸들러에서 Sys.Net.WebRequestManager.add_invokingRequest 메소드를 사용하여 요청 URL을 변경하는 것입니다.

networkRequestEventArgs._webRequest._url = networkRequestEventArgs._webRequest._url + '&nocache=' + new Date().getMilliseconds(); 

나는 이것에 대해 블로그에 올렸다 : http://yoavniran.wordpress.com/2010/04/27/ie-caching-ajax-results-how-to-fix/


0

ExtJS ( http://thecodeabode.blogspot.com/2010/10/cache-busting-ajax-requests-in-ie.html) 만 사용하여이 정확한 문제에 대한 블로그를 작성했습니다. )

문제는 특정 URL 다시 쓰기 형식을 사용하고 있었기 때문에 기존 쿼리 문자열 매개 변수 (? param = value)를 사용할 수 없었기 때문에 대신 캐시 버스 팅 매개 변수를 게시 된 변수로 썼습니다 ..... POST 변수를 사용하는 것이 GET보다 조금 안전합니다. 단순히 많은 MVC 프레임 워크가 패턴을 사용하기 때문입니다

protocol : // host / controller / action / param1 / param2

변수 이름과 값의 매핑이 손실되고 매개 변수가 단순히 쌓입니다 ... GET 캐시 버스터 매개 변수를 사용할 때

예 : protocol : // host / controller / action / param1 / param2 / no_cache122300201

no_cache122300201은 기본값을 가질 수있는 $ param3 매개 변수로 오인 될 수 있습니다.

공개 함수 액션 ($ param1, $ param2, $ param3 = "default value") {//..//}

POSTED 캐시 버스터에서 발생할 가능성이 없습니다.


0

ASP.NET MVC를 사용하는 경우 컨트롤러 작업 위에이 줄을 추가하면 충분합니다.

[OutputCache(NoStore=true, Duration = 0, VaryByParam = "None")]
public ActionResult getSomething()
{

}

문제의 행동은 브라우저쪽에 있습니다. 이 답변은 서버 측의 캐싱과 관련이 있습니다.
Mark Sowul

@MarkSowul Outputcache에는 클라이언트, 서버 및 기타 3 가지 옵션이 있습니다. IE는 기본적으로 OutputCache를 기본적으로 클라이언트 쪽 캐싱으로 사용합니다. 자세한 내용은 여기를 참조하십시오 dougwilsonsa.wordpress.com/2011/04/29/…
batmaci

@MarkSowul 당신은 또한 여기에 관련된 질문과 답변을 볼 수 있습니다. 이것이 서버 측에도 있다고 생각하십니까? stackoverflow.com/questions/2653092/…
batmaci

1
예, 죄송합니다. 귀하의 답변 이 서버 쪽 캐시와 클라이언트 쪽 캐시 모두 에 영향을 줄 수 있다는 것을 몰랐습니다 .
Mark Sowul

-1

IE는이 캐싱을 수행 할 권한이 있습니다. 항목이 캐시되지 않도록하려면 헤더를 적절히 설정해야합니다.

ASP.NET MVC를 사용하는 경우 ActionFilter; 에서 OnResultExecuted확인하십시오 filterContext.HttpContext.Request.IsAjaxRequest(). 그렇다면 응답의 만료 헤더를 설정하십시오.filterContext.HttpContext.Response.Expires = -1;

당으로 http://www.dashbay.com/2011/05/internet-explorer-caches-ajax/ :

일부 사람들은 만료 대신 캐시-제어 : 아니오-캐시 헤더를 사용하는 것을 선호합니다. 차이점은 다음과 같습니다.
Cache-Control : no-cache – 절대 캐싱
없음 만료 : -1 – 브라우저는 일반적으로 조건부 If-Modified-Since 요청을 통해 해당 페이지의 업데이트를 위해 웹 서버에 "일반적으로"연결합니다. 그러나 페이지는 디스크 캐시에 남아 있으며 BACK 및 FORWARD 단추를 사용하여 탐색 기록에 액세스하거나 브라우저가 오프라인 모드 인 경우와 같이 원격 웹 서버에 접속하지 않고 적절한 상황에서 사용됩니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.