web-dev-qa-db-ja.com

XMLHTTPRequestがブラウザーのキャッシュにヒットしたかどうかを確認する方法

サーバーからの応答を取得する代わりに、GET XMLHTTPRequestがブラウザーのキャッシュにヒットしたかどうかを（JavaScriptの実行内で）知ることができるか？

javascriptxmlhttprequestbrowser-cache
28
rjkaplan

XMLHttpRequest spec から：

ユーザーエージェントが生成した条件付きリクエストの結果である304 Not Modified応答の場合、ユーザーエージェントは、サーバーが適切なコンテンツを含む200 OK応答を返したかのように動作する必要があります。

つまり、ブラウザのキャッシュにヒットしたリクエストであっても、ブラウザは常にステータスコード200 OKを返します。

ただし、仕様には次のようにも記載されています。

ユーザーエージェントは、作成者のリクエストヘッダーが自動キャッシュ検証をオーバーライドできるようにする必要があります（例：If-None-MatchまたはIf-Modified-Since）。この場合、304 Not Modified応答をパススルーする必要があります。

そのため、JavaScriptコードから304 Not Modified応答を見えるようにする回避策があります。

19
Feross

Ajaxリクエストを行うと、応答コードが返されます

if (request.readyState == 4) {
     if (request.status == 200) { // this number.
       ...

ステータス200は、データの新しいコピーを取得していることを意味します。

リクエストは成功しました。応答で返される情報は、要求で使用されるメソッドに依存します-

ステータス304は、データが変更されておらず、ブラウザのキャッシュから取得することを意味します。

クライアントが条件付きGETリクエストを実行し、アクセスは許可されているが、ドキュメントが変更されていない場合、サーバーはこのステータスコードで応答する必要があります（SHOULD）。

ステータスコードの詳細を読む

更新：
常にサーバーにヒットすることを保証するために、キャッシュバスターをURLに追加できます。

var ajaxUrl = "/path?cache="+(Math.random()*1000000);
3
Ibu

この回答は、ブラウザーのみのキャッシュを意味し、304が発生しない（変更後、etagなど）ことを前提としています。

リクエストにかかった時間を確認します。リクエストがキャッシュから解決された場合は、0ミリ秒近くかかるはずです。

1
Sean Kinsey

から http://www.w3.org/TR/2012/WD-XMLHttpRequest-20121206/

ユーザーエージェントが生成した条件付きリクエストの結果である304 Not Modified応答の場合、ユーザーエージェントは、サーバーが適切なコンテンツを含む200 OK応答を返したかのように動作する必要があります。ユーザーエージェントは、作成者のリクエストヘッダーが自動キャッシュ検証をオーバーライドできるようにする必要があります（例：If-None-MatchまたはIf-Modified-Since）。この場合、304 Not Modified応答をパススルーする必要があります。 [HTTP]

これはややあいまいです。私の仮定はifリソースが条件付きで要求される場合、304応答コードが表示されます。ただし、別のコメントで説明したように（ソース： https://developers.google.com/speed/docs/best-practices/caching ）、最後の応答がそのリソースのサーバーのhttpヘッダーで、将来的にCache-Control: max-ageまたはExpiresが設定されました。この場合、どうなるかわかりません。

1
JayC

Firefoxの Firebug を使用していますか？

Firebugには、「XHR」フィルタービューを備えた「ネット」パネルがあります。リクエストフェーズバーでステータスを確認したり、三角形をクリックして「ヘッダー」を検査したりして、キャッシュ情報を検査できるはずです。

キャッシュされるか、キャッシュされない

すべてのネットワーク要求が等しいわけではありません-それらのいくつかはネットワークの代わりにブラウザーのキャッシュからロードされます。 Firebugはすべてのリクエストにステータスコードを提供するので、サイトをすばやくスキャンして、ページの読み込み時間を最適化するためにキャッシュがどの程度効果的に使用されているかを確認できます。

Firebug ネットパネルのドキュメントはこちら 。

Chrome/Safari/Operaにはすべて同様のデバッグツールがあります。ちょうど ここで良いリスト が見つかりました（ほとんどはXHRを検査するツールが必要です）。

編集：

自分を幾分償還するために...

ibuが回答済み なので、最初に応答のステータスコードを確認します。

JQueryを使用している場合：

statusCode（追加1.5） マップのデフォルト：{}応答に対応するコードがある場合に呼び出される数値HTTPコードと関数のマップ。たとえば、応答ステータスが404の場合、次のように警告します。

$.ajax({
  statusCode: {
    404: function() {
      alert("page not found");
    }
  }
});

リクエストが成功した場合、ステータスコード関数は成功コールバックと同じパラメーターを取ります。エラーが発生した場合、エラーコールバックと同じパラメーターを取ります。

jQueryは確かに生活を楽にします。 :)

0
mhulse