Ajaxのキャッシュは、ブラウザによって維持されます。サーバーに送信された特定のURLの場合、Ajaxは最初のリクエスト中にサーバーとのみ対話します。後続のリクエストでは、Ajaxはサーバーにリクエストを送信するのではなく、キャッシュから直接データを抽出します。
場合によっては、毎回サーバーから更新されたデータを取得する必要があります。アイデアは、通常のアプリケーションに影響を与えることなく、URLを異なる方法で要求することです。URLの後にランダムコンテンツを追加します。
例えば
url = url+"&"+math.random();
キーポイント:
1.毎回要求されるURLは異なります(Ajaxキャッシュは機能しません)
2。それは通常のアプリケーションに影響しません(最も基本的な)
ここには2つの結論があります。
1:AjaxキャッシュとHTTPキャッシュは同じです
最新のブラウザのHTTPおよびキャッシュメカニズムは、AJAXのXMLHTTPREQUESTオブジェクトのメカニズムよりもはるかに悪いため、AJAX要求を認識したり気にしたりしません。それは単に通常のHTTPキャッシュルールに従い、サーバーによって返される応答ヘッダーを介してそれらをキャッシュします。
既にHTTPキャッシュを理解している場合は、HTTPキャッシュの知識を使用してAJAXキャッシュを理解できます。唯一の違いは、応答ヘッダーを設定する方法が通常のファイルとは異なることです。
次の応答ヘッダーは、Ajaxをキャッシュ可能にすることができます。
期限切れ:このアイテムは、将来的に適切な時点に設定する必要があります。時点の設定は、コンテンツの変更の頻度に依存します。たとえば、要求された在庫数量の場合、有効期限が10秒後になる可能性があります。要求された写真が頻繁に変化しないため、有効期限が長くなる可能性があります。有効期限は、ブラウザが一定期間ローカルキャッシュデータを再利用できるようにするため、サーバーデータとの不必要な相互作用を回避できます。
LASTMODIFIED:このアイテムの設定は良い選択です。それを通して、ブラウザはリクエストヘッダーのif-modified-sinceを使用して、条件付きGETリクエストを送信するときにローカルキャッシュコンテンツを確認します。データを更新する必要がない場合、サーバーは304応答ステータスを返します。
キャッシュコントロール:適切な状況の場合、この値を公開して、すべての中間プロキシとキャッシュを保存して他のユーザーと共有できるようにする必要があります。 Firefoxでは、HTTPSリクエストのキャッシュもサポートしています。
もちろん、Postメソッドを使用してAJAXを送信する場合、POSTリクエストがキャッシュされないため、キャッシュできません。 AJAXリクエストに他の効果がある場合(銀行口座間の転送など)、POSTリクエストを使用してください。
これらのヘッダーの仕組みを明確にするために、デモ(このデモを表示できなくなりました(□)ノ)。 httpwatchでは、応答ヘッダー情報に上記の3つの応答ヘッダーを設定することがわかります。
「Ajax Update」ボタンを定期的にクリックすると、時間の変化は1分ごとになる傾向があります。対応ヘッダーの有効期限が次の分に設定されているためです。以下のスクリーンショットでは、次のことがわかります。更新ボタンを繰り返しクリックすると、Ajax要求はネットワークアクティビティを生成せずにブラウザのローカルキャッシュを読み取ります(送信バーと転送バーの値は0です)
1:06.531で最後のクリックで送信されたAJAX要求は、キャッシュされたデータが1分を超えたため、ネットワークデータ送信を生成しました。サーバーは200の応答ステータスを返し、データの新しいコピーが取得されたことを示しました。
このデモはボタンである必要があると思います。クリックするたびに現在の時間を取得してから、現在のページに戻ります。
2:IEブラウザは、期限切れになる前にAJAXを介して取得したコンテンツを更新しません。
Ajaxを使用して、ページが読み込まれたときにページの特定の部分(価格表など)を埋めるために使用される場合があります。ユーザーのイベント(ボタンをクリックするなど)によってトリガーされるのではなく、ページがロードされたときにJavaScriptを介して送信されます。 Ajaxリクエストは、埋め込まれたリソース(JSやCSSなど)と同じであるかのようです。
このようなページを開発する場合、更新するときは、埋め込まれたAjaxリクエストコンテンツを更新することをお勧めします。埋め込まれたリソース(CSSファイル、写真など)の場合、ブラウザは、ユーザーがF5(更新)またはCTRL+F5(Force Refresh)であるかどうかによって、次の異なるタイプのリクエストを自動的に送信します。
1.F5(更新):リクエストコンテンツにラスト修正応答ヘッダーがある場合、ブラウザは条件付き更新リクエストを送信します。 if修正済みのリクエストヘッダーを比較に使用するため、サーバーは304ステータスを返して不必要なデータの送信を回避できます。
2.CTRL+F5(フォースリフレッシュ):ブラウザに無条件の更新リクエストを送信するように指示すると、リクエストヘッダーのキャッシュ制御が「ノーキャッシュ」に設定されています。これにより、すべての中間プロキシとキャッシュがわかります。ブラウザは、キャッシュされたかどうかに関係なく、最新バージョンを取得する必要があります。
Firefoxは、この更新方法を、ページがロードされたときに送信されたAjaxリクエストに伝播し、これらのAjaxリクエストを組み込みリソースとして扱います。以下は、Firefoxの下のhttpwatchのスクリーンショットで、更新時のAjax要求の効果を示しています。
Firefoxは、Ajaxによって開始された要求が条件付きであることを保証します。この例では、データが10秒未満でキャッシュされている場合、サーバーは10秒を超えると304を返します。サーバーは200を返し、データを再送信します。
IEでは、ページがロードされたときに開始されたAJAX要求は、ページの他の部分を更新することとは関係ないと見なされ、ユーザーの更新方法の影響はありません。キャッシュされたAJAXデータが期限切れになっていない場合、サーバーに送信されるGETリクエストはありません。キャッシュからデータを直接読み取り、httpwatchから(キャッシュ)結果です。次の図は、IEでキャッシュが期限切れになっていない場合にF5を押して更新することです。
Ctrl+F5を介して更新せざるを得なくなったとしても、Ajaxを介して取得されたデータはキャッシュから読み取りされます。
これは、Ctrl+F5を使用して更新を強制する場合でも、AJAXを介して取得したものはIEの下で更新されないことを意味します。最新のデータを確実に取得できるようにする唯一の方法は、キャッシュを手動でクリアすることです。 httpwatchツールバーを使用できます。
キャッシュの結果と304の結果は異なることに注意してください。キャッシュは実際には200(キャッシュ)、304は304を意味します。キャッシュは実際にはサーバーにリクエストを送信しません。 Chromeから、その時期が0であり、応答も空であることがわかります。ただし、304は異なります。
304リクエストは、ブラウザによって開始される条件付きリクエストです。このリクエストには、if修正済みのリクエストヘッダーが含まれます。ブラウザが時間を送信した後にファイルが変更されていない場合、サーバー側は304ステータスを返し、ブラウザにローカルキャッシュコンテンツを使用するように指示します。リクエストがサーバー側に送信されるほど速くはありませんが、サーバー側はデータを送信しません。
Taobaoのホームページを確認できます。これには200(キャッシュ)と304の両方があります。違いを確認できます。
要約:
Ajaxがページの読み込み速度を上げることができる主な理由は、Ajaxを介した重複データの読み込みを減らし、真にオンデマンドの獲得を達成することであることを知っています。これは事実なので、Ajaxプログラムを作成するとき、データの読み込み速度をさらに向上させるために、西にそれを送信してクライアントに再度キャッシュすることもできます。つまり、データを読み込んでいる間にブラウザメモリにデータをキャッシュすることです。ページが更新されない限り、データがロードされると、データはメモリ内で永久にキャッシュされます。ユーザーが再度データを表示すると、サーバーからデータを取得する必要はありません。これにより、サーバーの負荷が大幅に削減され、ユーザーのエクスペリエンスが向上します。