IE 가 Ajax 요청 결과 에 대한 캐 시 문 제 를 분석 합 니 다.

기본적으로 IE 는 요청 주소 캐 시 Ajax 가 요청 한 결 과 를 대상 으로 합 니 다.다시 말 하면 캐 시가 만 료 되 기 전에 같은 주소 로 여러 개의 Ajax 요청 을 하면 처음으로 서버 에 실제로 전 송 됩 니 다.어떤 경우 에 이런 기본 캐 시 메커니즘 은 우리 가 원 하 는 것 이 아니다(예 를 들 어 실시 간 데 이 터 를 얻 는 것).이 글 은 이 문 제 를 간단하게 토론 하고 몇 가지 해결 방안 을 소개 한다.
목차
문제 재현
2.URL 주소 에 접 두 사 를 추가 하 는 방식 으로 문제 해결
3.JQuery 의 Ajax 설정 을 통 해 문제 해결
4.맞 춤 형 응답 을 통 해 문 제 를 해결한다.
문제 재현
저 희 는 ASP.NET MVC 애플 리 케 이 션 을 통 해 IE 가 Ajax 요청 결과 에 대한 캐 시 를 재현 합 니 다.빈 ASP.NET MVC 응용 프로그램 에서 우 리 는 다음 과 같은 기본 적 인 HomeController 를 정 의 했 습 니 다.그 중에서 현재 시간 으로 돌아 가 는 Action 방법 GetCurrentTime 을 포함 합 니 다.


 public class HomeController Controller
 {
  public ActionResult Index()
  {
   return View();
  }
  
  public string GetCurrentTime()
  {
   return DateTime.Now.ToLongTimeString();
  }
 }

기본 Action 방법 Index 에 대응 하 는 View 정 의 는 다음 과 같 습 니 다.저 희 는 5 초 마다 JQuery 의 방법 을 이용 하여 Ajax 방식 으로 GetCurrentTime 작업 을 호출 하고 돌아 오 는 결 과 를 보 여 줍 니 다.


<!DOCTYPE html>
 <html>
  <head>
   <title>@ViewBag.Title</title> 
   <script type="text/javascript" src="@Url.Coutent(“~/Scripts/jquery-...min.js”)"></script>
   <script type="text/javascript">
    $(function () {
     window.setInterval(function () {
      $.ajax({
       url'@Url.Action("GetCurrentTime")',
       success function (result) {
        $("ul").append("<li>" + result + "</li>");
       }
      });
     }, );
    });
   </script>
  </head>
  <body> 
   <ul></ul>
  </body>
 </html>

이 프로그램 을 브 라 우 저 별로 실행 하면 다음 그림 과 같이 Chrome 브 라 우 저 에서 실시 간 시간 을 표시 할 수 있 지만 IE 에서 표시 되 는 시간 은 같 습 니 다.

2.URL 주소 에 접 두 사 를 추가 하 는 방식 으로 문제 해결
IE 가 Ajax 요청 에 대한 반환 결 과 는 요청 주소 에 따라 캐 시 되 기 때문에 이 캐 시 시스템 이 적용 되 지 않 으 려 면 요청 할 때마다 요청 주소 에 다른 접 두 사 를 추가 하여 이 문 제 를 해결 할 수 있 습 니 다.이 예 에 대해 저 희 는 다음 코드 를 통 해 요청 주소 에 현재 시간 을 기반 으로 하 는 검색 문자열 을 추가 합 니 다.프로그램 을 다시 실행 하면 IE 는 실시 간 시간 을 표시 합 니 다.


 <!DOCTYPE html>
 <html>
  <head>  
   <script type="text/javascript">
    $(function () {
     window.setInterval(function () {
      $.ajax({
       url'@Url.Action("GetCurrentTime")?'+ new Date().toTimeString() ,
       success function (result) {
        $("ul").append("<li>" + result + "</li>");
       }
      });
     }, );
    });
   </script>
  </head>
 </html>

3.jQuery 의 Ajax 설정 을 통 해 문제 해결
실제로 jQuery 는 이것 에 대한 Ajax 설정 을 가지 고 있 습 니 다.우 리 는 다음 과 같은 방식 으로$.ajaxsetup 방법 으로 Ajaz 의 캐 시 체 제 를 금지 해 야 합 니 다.


 <!DOCTYPE html>
 <html>
  <head>  
   <script type="text/javascript">
    $(function () {
     $.ajaxSetup({ cache false }); 
     window.setInterval(function () {
      $.ajax({
       url'@Url.Action("GetCurrentTime")',
       success function (result) {
        $("ul").append("<li>" + result + "</li>");
       }
      });
     }, );
    });
   </script>
  </head>
 </html>

실제로 jQuery 의 이 메커니즘 도 요청 주소 에 서로 다른 검색 문자열 접 두 사 를 추가 함으로써 이 루어 집 니 다.이것 은 Fiddler 차단 요청 을 통 해 확인 할 수 있 습 니 다.

4.맞 춤 형 응답 을 통 해 문 제 를 해결한다.
요청 한 응답 을 통 해 결과 에 대한 브 라 우 저의 캐 시 를 제어 할 수 있 습 니 다.이 를 위해 NoCacheAttribute 라 는 Action Filter 를 정의 합 니 다.현재 HttpResponse 의 SetCacheability 방법 을 사용 하여 캐 시 옵션 을 NoCache 로 설정 합 니 다.이 NoCacheAttribute 특성 이 GetCurrentTime 방법 에 적 용 된 후에 도 Google 프로그램 을 실행 하면 IE 에서 실시 간 으로 시간 을 얻 을 수 있 습 니 다.


public class HomeController Controller
 {
  public ActionResult Index()
  {
   return View();
  }
  
  [NoCache] 
  public string GetCurrentTime()
  {
   return DateTime.Now.ToLongTimeString();
  }
 }
 public class NoCacheAttribute FilterAttribute, IActionFilter
 {
  public void OnActionExecuted(ActionExecutedContext filterContext)
  {
   filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
  }
 
  public void OnActionExecuting(ActionExecutingContext filterContext)
  {}
 }

실제 NoCacheAttribute 특성 상 메시지 메 시 지 를 최종 제어 하 는 Cache-Control 헤더 로 설정 하고 결 과 를 캐 시 하지 않도록 브 라 우 저 에 지시 하 는'no-cache'로 설정 합 니 다.다음 과 같이 GetCurrentTime 요청 에 대한 응답 메시지 입 니 다.


 HTTP/. OK
 Server ASP.NET Development Server/...
 Date Thu, Jan GMT
 X-AspNet-Version ..
 X-AspNetMvc-Version .
 Cache-Control no-cache 
 Pragma no-cache
 Expires -
 Content-Type text/html; charset=utf-
 Content-Length 
 Connection Close
 PM

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Javascript Ajax에 대한 간단한 연습

저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

IE 가 Ajax 요청 결과 에 대한 캐 시 문 제 를 분석 합 니 다.

좋은 웹페이지 즐겨찾기