집 >웹 프론트엔드 >JS 튜토리얼 >Ajax 요청 결과에 대한 IE의 캐싱 문제에 대한 간략한 분석

Ajax 요청 결과에 대한 IE의 캐싱 문제에 대한 간략한 분석

亚连원래의: 2018-05-24 16:54:532075검색

Ajax 요청 결과에 대한 IE의 캐싱을 재현하기 위해 ASP.NET MVC 애플리케이션을 사용합니다. 빈 ASP.NET MVC 응용 프로그램에서는 현재 시간을 반환하는 GetCurrentTime 작업 메서드를 포함하는 다음과 같은 기본 HomeController를 정의합니다.

기본적으로 IE는 요청 주소를 기반으로 Ajax 요청 결과를 캐시합니다. 즉, 캐시가 만료되기 전에 동일한 주소에 대해 시작된 여러 Ajax 요청의 첫 번째 시간만 실제로 서버로 전송됩니다. 어떤 경우에는 이 기본 캐싱 메커니즘이 우리가 원하는 것이 아닙니다(예: 실시간 데이터 획득). 이 문서에서는 이 문제를 간략하게 설명하고 몇 가지 해결 방법을 소개합니다.

1. 문제 재현

2. URL 주소에 접미사를 추가하여 문제 해결

3. JQuery의 Ajax 설정으로 문제 해결

4. 맞춤형 응답을 통해 문제 해결

1. 문제 재현

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

기본 Action 메소드 Index에 해당하는 View는 다음과 같이 정의됩니다. JQuery 메서드를 사용하여 Ajax에서 5초마다 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&#39;@Url.Action("GetCurrentTime")&#39;,
       success function (result) {
        $("ul").append("<li>" + result + "</li>");
       }
      });
     }, );
    });
   </script>
  </head>
  <body> 
   <ul></ul>
  </body>
 </html>

이 프로그램을 실행하기 위해 다른 브라우저를 사용하면 다른 출력 결과가 나타납니다. 아래 그림과 같이 실시간 시간은 Chrome 브라우저에서 표시될 수 있지만 IE에서 표시되는 시간은 동일합니다.

2. URL 주소에 접미사를 추가하여 문제를 해결하세요

Ajax 요청에 대해 IE에서 반환한 결과는 요청 주소를 기반으로 캐시되므로 이 캐싱을 원하지 않는 경우 메커니즘을 적용하려면 각 요청의 요청 주소에 다른 접미사를 추가하여 이 문제를 해결할 수 있습니다. 이 예에서는 다음 코드를 사용하여 현재 시간을 기준으로 한 쿼리 문자열을 요청 주소에 추가합니다. 프로그램을 다시 실행하면 IE에 실시간 시간이 표시됩니다.

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

3. jQuery의 Ajax 설정을 통해 문제를 해결하세요

실제로 jQuery에는 이에 대한 Ajax 설정이 있습니다. Ajaz 캐싱 메커니즘을 비활성화하려면 다음과 같이 $.ajaxSetup 메서드만 호출하면 됩니다.

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

사실, jQuery의 이 메커니즘은 요청 주소에 다른 쿼리 문자열 접미사를 추가하여 구현되기도 하며, 이는 Fiddler가 가로채는 요청으로 확인할 수 있습니다.

4. 응답을 사용자 정의하여 문제 해결

요청 응답을 통해 브라우저의 결과 캐싱을 제어할 수 있습니다. 이를 위해 NoCacheAttribute라는 다음 ActionFilter를 정의합니다. 구현된 OnActionExecuted 메서드에서는 현재 HttpResponse의 SetCacheability 메서드를 호출하여 캐시 옵션을 NoCache로 설정합니다. NoCacheAttribute 특성이 GetCurrentTime 메서드에 적용된 후에도 프로그램을 실행하면 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

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Ajax 요청 결과에 대한 IE의 캐싱 문제에 대한 간략한 분석

관련 기사