Ajax リクエスト結果に対する IE のキャッシュ問題の簡単な分析-jsチュートリアル-php.cn

Ajax リクエスト結果に対する IE のキャッシュ問題の簡単な分析

亚连

リリース： 2018-05-24 16:54:53

オリジナル

2033 人が閲覧しました

ASP.NET MVC アプリケーションを使用して、IE による Ajax リクエスト結果のキャッシュを再現します。空の ASP.NET MVC アプリケーションで、次のデフォルトの HomeController を定義します。これには、現在の時刻を返すアクションメソッド GetCurrentTime が含まれています。

デフォルトでは、IE はリクエストアドレスに基づいて Ajax リクエストの結果をキャッシュします。つまり、キャッシュの有効期限が切れる前に、同じアドレスに対して開始された複数の Ajax リクエストのうち、最初のリクエストのみが実際にサーバーに送信されます。場合によっては、このデフォルトのキャッシュメカニズムが必要なものではありません (リアルタイムデータの取得など)。この記事では、この問題について簡単に説明し、いくつかの解決策を紹介します。

1. 問題を再現します

2. URL アドレスにサフィックスを追加して問題を解決します

3. JQuery の Ajax 設定で問題を解決します

4. 応答をカスタマイズして問題を解決します

1. 問題を再現します

ASP.NET MVC アプリケーションを使用して、IE の Ajax リクエスト結果のキャッシュを再現します。空の ASP.NET MVC アプリケーションで、次のデフォルトの HomeController を定義します。これには、現在の時刻を返すアクションメソッド GetCurrentTime が含まれています。

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

ログイン後にコピー

デフォルトのActionメソッドIndexに対応するViewは以下のように定義されています。 JQuery メソッドを使用して、Ajax で GetCurrentTime オペレーションを 5 秒ごとに呼び出し、返された結果を表示します。

<!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 には、次のように $.ajaxSetup メソッドを呼び出すだけで、Ajaz キャッシュメカニズムが無効になります。

 <!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コンポーネントの書き方02--AjaxProの簡単な分析

Ajaxリクエストセッション失敗の問題を解決する方法

に基づいてajaxの前方および後方問題を解決するJquery.history

以上がAjax リクエスト結果に対する IE のキャッシュ問題の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。