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" [ "=" <"> フィールド名 <"> ]
| " キャッシュなし" [ "=" <"> フィールド名 <"> ]
| "ストアなし"
| "プロキシ再検証" "

| "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时，会在头部加入一个属性，询问该时间之后文件是否有被修改过。如果服务器端的文件没有被修改过，则返回状态是304，内容为空，这样就节省了传输数据量。

3. 我的问题

这几天在做Web前端的时候，发现客户端的每次Ajax都会从服务器端请求数据，而这些数据的即时性没有那么高，没必要每次都请求。

在显式的给Ajax加上cache为true后，发现问题依旧。于是怀疑是服务端的问题，服务端使用 jersey 搭建了基于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等等。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

$.ajax()的使用方法（附代码）

ajax怎么实现远程通信功能

以上がAjaxとブラウザキャッシュの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。