【JavaScript】Internet ExplorerでのAjaxキャッシング対策

  • このエントリーをはてなブックマークに追加

Ajaxとは「Asynchronous JavaScript and XML」の略で、JavaScriptとXMLを利用してサーバー側と非同期に通信を行うための技術のことです。Ajaxを利用することで、ユーザーに待ち時間を感じさせないWeb画面を作成することができます。
しかし、IE(Internet Explorer)で一回ajax通信すると、クライアント側にキャッシュが生成されてしまい、次からはキャッシュを読んでしまいます。今回はajaxキャッシングの解決方法を説明します。

  1. Ajaxのサンプル(.NET Core Webアプリ)
  2. IE(Internet Explorer)で確認
  3. Ajaxキャッシング対策

 1. Ajaxのサンプル(.NET Core Webアプリ)

Ajax通信を利用して現在時刻を取得する簡単なサンプルコートを作成します。

●View

●TypeScript(jQuery利用)

●Controller

■ Chromeで確認

現在時刻表示ボタンをクリックすると、現在時刻を取得して画面に表示されることが確認できます。

 2. IE(Internet Explorer)で確認

■ IE(Internet Explorer)

初めて現在時刻表示ボタンをクリックするとAjax通信が実行されて現在時刻が取得できますが、再度ボタンをクリックしても時刻が変わりません。クライアント側にAjax通信の結果のキャッシュが生成され、二回目以降はキャッシュを読むことが原因です。

 3. Ajaxキャッシング対策

●TypeScript

jQuery.ajaxSetup


ページ内で発生する全てのajax通信に関連するデフォルト値を変更します。cache値をfalseにすることで、キャッシュが無効化されて毎回Ajax通信されます。

■ IE (TypeScript変更後)

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*