ホームページ > 記事 > ウェブフロントエンド > Ajax リクエスト結果に対する IE のキャッシュ問題の簡単な分析
Ajax リクエスト結果に対する IE のキャッシュ問題の簡単な分析
- 亚连オリジナル
- 2018-05-24 16:54:531793ブラウズ
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'@Url.Action("GetCurrentTime")',
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'@Url.Action("GetCurrentTime")?'+ 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'@Url.Action("GetCurrentTime")',
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の前方および後方問題を解決するJquery.history
以上がAjax リクエスト結果に対する IE のキャッシュ問題の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。