jQueryでキャッシュを防ぐ方法

Web 開発の発展に伴い、フロントエンド フレームワーク jquery が多くの Web サイトで広く使用されるようになりました。ただし、jquery を使用してデータをリクエストすると、キャッシュの問題が頻繁に発生します。キャッシュの問題が時間内に処理されないと、ページにエラーが表示されたり、更新されなくなったりします。この記事では、jquery がキャッシュを防ぐ仕組みとその原理を紹介します。

1. キャッシングとは

キャッシングを防止する方法を紹介する前に、まずキャッシングとは何かを理解しましょう。 Web サイトにアクセスすると、ブラウザーはアクセスしたデータ (画像、スクリプト、スタイルなど) をローカルに保存し、次回の訪問時にサーバーに再度リクエストすることなくローカルから直接読み取ることができるため、アクセス速度が向上します。このプロセスはキャッシュと呼ばれます。

2. jquery がキャッシュを防ぐ方法

jquery でキャッシュを防ぐ主な方法は、リクエスト ヘッダーを設定することです。 AJAX リクエストを行う際、リクエスト ヘッダーに「Cache-Control」や「Expires」などのパラメータを設定することで、リクエスト結果をキャッシュせず、リクエストごとにサーバーから最新のデータを取得するようにブラウザに指示します。サンプル コードは次のとおりです:

1. GET リクエストでのキャッシュの防止:

$.ajax({
    type: "GET",
    cache: false, //设置为false，即禁止缓存
    url: "http://www.example.com/get_data.php",
    success: function(data){
        //处理返回结果
    }
});

2. POST リクエストでのキャッシュの防止:

$.ajax({
    type: "POST",
    cache: false, //设置为false，即禁止缓存
    url: "http://www.example.com/post_data.php",
    data: {
        "name": "张三",
        "age": 18
    },
    success: function(data){
        //处理返回结果
    }
});

3. リクエスト ヘッダーの設定 防止する方法キャッシュ:

$.ajax({
    type: "GET",
    url: "http://www.example.com/get_data.php",
    beforeSend: function(xhr){
        xhr.setRequestHeader("Cache-Control", "no-cache");
        xhr.setRequestHeader("Expires", "0");
    },
    success: function(data){
        //处理返回结果
    }
});

3. キャッシュをブロックする原理

キャッシュを防ぐ方法を理解した後、その原理を見てみましょう。リクエストヘッダーに「Cache-Control」と「Expires」を設定すると、リクエスト結果をキャッシュしないようにブラウザに指示します。これら 2 つのリクエスト ヘッダーの機能は次のとおりです:

1. "Cache-Control"

このリクエスト ヘッダーは、リクエストとレスポンスのキャッシュ メカニズムを指定するために使用されます。次の値があります:

(1) no-cache: キャッシュを使用せずに、各リクエストがサーバーから最新のデータを取得するように強制します。

(2) max-age: リソースがクライアント上にキャッシュされる最大時間を秒単位で設定します。

(3) no-store: ローカル キャッシュの使用を無効にします。

2. "Expires"

このリクエスト ヘッダーは、リソースの有効期限を指定します。つまり、キャッシュ内のデータはこの期限までに使用されます。この時間を過ぎてもブラウザがリソースにアクセスする場合、リクエストがサーバーに送信されます。

これら 2 つのリクエスト ヘッダーを設定することで、リクエスト結果をキャッシュしないようにブラウザに指示し、リクエストごとにサーバーから最新のデータを取得することができます。

4. 概要

Ajax リクエストを行う場合、キャッシュの問題が原因で問題が発生することがよくあります。リクエストヘッダーに「Cache-Control」と「Expires」を設定することで、簡単にキャッシュを防止し、ページに最新のデータを正しく表示することができます。この記事が皆さんのお役に立てば幸いです。

以上がjQueryでキャッシュを防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。