Ajax リクエストとブラウザーのキャッシュに関する簡単な説明

以下のエディターでは、Ajax リクエストとブラウザーのキャッシュについて簡単に説明します。編集者はこれが非常に優れていると考えているので、ここで ajax ソース コードを共有し、参考として提供します。 ajax に興味がある場合は、エディターをフォローしてご覧ください

最新の Web アプリケーションでは、フロントエンド コードに大量の Ajax リクエストが溢れています。ブラウザーのキャッシュを Ajax リクエストに使用できる場合、それは大幅に増加します。ネットワーク要求を削減し、プログラムの応答速度を向上させます。

1. Ajax リクエスト

jQuery

frameworkを使用すると、Ajax リクエストを簡単に作成できます。

$.ajax({
  url : 'url',
  dataType : "xml",
  cache: true,
  success : function(xml, status){  
      }
});

コードの 4 行目に注目してください。 true

、表示 この式では、現在のリクエストにキャッシュがある場合、そのキャッシュが直接使用されることが必要です。 属性 が false に設定されている場合、Jquery のコメントは次のとおりです: false に設定されている場合、キャッシュを false に設定すると、リクエストされたページも追加されます。クエリ文字列パラメーター「_=[TIMESTAMP]」を URL に追加します。

このように、Ajax リクエストはブラウザーのキャッシュを利用できますか?

これからも見てください。

2. HTTP プロトコル HTTP プロトコルのヘッダー部分は、クライアントがキャッシュを行うべきかどうか、およびキャッシュを行う方法を定義します。詳細については、「14.9 キャッシュ制御」および「14.21 Http ヘッダー フィールド定義の有効期限」を参照してください。簡単な説明は次のとおりです:

Cache-Control

Cache-control は、HTTP キャッシュを制御するために使用されます (HTTP/1.0 では部分的に実装されていない可能性があります。Pragma: no-cache のみが実装されています)。データパケット:

キャッシュ制御: キャッシュディレクティブ

キャッシュディレクティブは次のようになります:

| "no-cache"

| "max -age " "=" デルタ秒

| "max-stale" [ "=" デルタ秒 ]

| "min-fresh" "=" デルタ秒

| "no-transform"| "only-if -cached "| "キャッシュ拡張子"

re
レスポンスが使用されます:


| "public"
| "private" [ "=" 9dfc9fa07ac339f3d4fe03717423126e フィールド名 9dfc9fa07ac339f3d4fe03717423126e ]
| " キャッシュなし" [ "=" 9dfc9fa07ac339f3d4fe03717423126e フィールド名 9dfc9fa07ac339f3d4fe03717423126e ]
| "ストアなし"

| "プロキシ再検証" "

| "max-age" "=" delta-seconds| "s-maxage" "=" delta-seconds| "cache-extension"

説明:


- Public は、応答が可能であることを示します。任意のキャッシュキャッシュにキャッシュされます。

- プライベートは、単一ユーザーの応答メッセージ全体または一部を共有
キャッシュ
できないことを示します。これにより、サーバーは、他のユーザーのリクエストには無効なユーザーからの部分的な応答のみを記述することができます。

-no-cache は、リクエストまたは応答メッセージをキャッシュできないことを示します (HTTP/1.0 は Pragma の no-cache に置き換えられます)

-no-store は、重要な情報が意図せずに公開されるのを防ぐために使用されます。リクエスト メッセージで送信すると、リクエスト メッセージと応答メッセージの両方でキャッシュが使用されます。

-max-age クライアントが指定された時間 (秒) を超えない存続期間を持つ応答を受信できることを示します。

-min-fresh は、クライアントが現在時刻に指定された時間を加えた時間よりも短い応答時間で応答を受信できることを示します。

-max-stale は、クライアントがタイムアウト期間を超えて応答メッセージを受信できることを示します。 max-stale message の値が指定されている場合、クライアントは、タイムアウト期間の指定された値を超える応答メッセージを受信することができます。

Expires

Expires はキャッシュの有効時間を表し、クライアントがこの時間より前にリクエストを送信できないようにします。これは max-age の効果と同等です。ただし、同時に存在する場合は、Cache-Control の max-age によって上書きされます。

形式: Expires = "Expires" ":" HTTP-date

例: Expires: Thu, 01 Dec 1994 16:00:00 GMT

Last-Modified

Last-Modified は、文書の最後の終わりを示しますGMT 形式の変更時刻。クライアントがこの URL を 2 回目に要求すると、この時刻以降にファイルが変更されたかどうかを尋ねる属性がヘッダーに追加されます。サーバー側のファイルが変更されていない場合、戻りステータスは 304 で内容は空であるため、送信されるデータ量が節約されます。

3. 私の問題

最近、Web フロントエンドで働いていたとき、クライアント側の Ajax がサーバー側からデータを要求するたびに、データの即時性が保たれていないことに気づきました。それほど高い場合は、すべてが要求するたびにそれを行う必要はありません。

Ajax にキャッシュを true として明示的に追加した後、問題が残ることがわかりました。そのため、サーバー側の問題ではないかと考えました。サーバーは、Restful ベースのサービスを構築するためにジャージを使用していました。コード スニペットは次のとおりです。

@GET
@Produces("application/xml")
public Response getProducts() {
     Response.ResponseBuilder response = Response.ok(data);
     return response.build();
}

添加Cache控制后，进行测试，一切OK。

最后的代码如下：

@GET
@Produces("application/xml")
public Response getProducts() {
     Response.ResponseBuilder response = Response.ok(data);
     // Expires 3 seconds from now..this would be ideally based
     // of some pre-determined non-functional requirement.
     Date expirationDate = new Date(System.currentTimeMillis() + 3000);
     response.expires(expirationDate);
     return response.build();
}

以上只是示例代码，还可以进行更精细的控制，例如使用CacheControl、Last-Modified等等。

相关推荐：

关于Ajax技术中servlet末尾的输出流实例详解

Ajax技术组成与核心原理讲解

Ajax异步加载解析实例分享

以上がAjax リクエストとブラウザーのキャッシュに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。