jquery ajaxの重複リクエスト

jquery ajax を使用してデータをリクエストすると、複数のリクエストを繰り返し送信するという問題がよく発生します。この状況により、サーバーのストレスが増大したり、クラッシュが発生したりする可能性があります。これを回避するには、リクエストが重複する理由を理解し、解決策を見つける必要があります。

1. jQuery ajax の非同期リクエスト メカニズム

リクエストが繰り返される理由を理解する前に、jQuery ajax の動作メカニズムを見てみましょう。

通常、非同期リクエストを送信するには、jQuery の $.ajax() メソッドを使用します。このメソッドは、リクエストされた URL、リクエスト メソッド、データ型などのリクエストのさまざまな設定を含むオブジェクトをパラメータとして受け取ります。具体的な使用法は次のとおりです。

$.ajax({
    url: 'http://www.example.com/data',
    type: 'GET',
    dataType: 'json',
    success: function(response){
        // 获得数据成功后的处理
    }
});

このリクエストは、URL http://www.example.com/data に GET リクエストを送信し、JSON 形式での応答を取得することを期待します。リクエストが成功すると、成功コールバック関数が実行され、応答データがパラメータとして渡されます。

これは典型的な非同期リクエストであり、ページはブロックされませんが、バックグラウンドで発生します。リクエストが送信されると、jQuery は次のコードの実行を継続し、サーバーの応答を待ちます。応答が受信されると、成功コールバック関数がトリガーされ、対応する処理コードが実行されます。

2. 重複リクエストの原因

場合によっては、ブラウザが複数の重複リクエストを送信していることが判明することがあります。たとえば、ユーザーが短期間にボタンを複数回クリックした場合、クリックごとに Ajax リクエストが送信されます。これにより、サーバーの負荷が大幅に増加したり、クラッシュが発生したりする可能性があります。

リクエストが繰り返される理由は数多くありますが、特に一般的なものは次のとおりです。

(1) コード エラー

コードを作成すると、エラーが発生することがあります。たとえば、ループ内で誤って ajax リクエストを書いた場合などです。これにより、リクエストが複数回繰り返されることになります。したがって、コードを記述するときはロジックの正確さに注意を払う必要があります。

(2) ネットワークの遅延

ネットワークが不安定なため、リクエストが遅延する場合があります。応答を待っている間にボタンを複数回クリックすると、複数の重複したリクエストが送信されます。

(3) サーバーの応答が遅い

サーバーの応答が遅いと、焦ってボタンをもう一度クリックして新しいリクエストを送信することがあります。これにより、リクエストの重複も発生します。

3. 繰り返しリクエストを解決する方法

繰り返しリクエストを回避するには、次の方法を使用できます。

(1) ボタンを無効にする

ユーザーがボタンをクリックすると、一定期間ボタンを無効にし、リクエストが完了した後に有効にすることができます。これにより、ユーザーがボタンを繰り返しクリックして複数の同一のリクエストを送信することを防ぎます。

具体的な実装方法は次のとおりです。

$('#myButton').on('click', function(){
    $(this).prop('disabled', true);
    $.ajax({
        url: 'http://www.example.com/data',
        type: 'GET',
        dataType: 'json',
        success: function(response){
            $('#myButton').prop('disabled', false);
            // 处理响应数据
        }
    });
});

ここでは、ボタンをクリックしたときに、ボタンのdisabled属性をtrueに設定してボタンを無効にします。リクエストが完了したら、ボタンのdisabled属性をfalseに設定してボタンを有効にします。

(2) リクエストの頻度を制限する

リクエストを送信するときに、最後のリクエストの時間を決定できます。新しいリクエストは、一定期間内にリクエストが送信されなかった場合にのみ送信できます。時間間隔。こうすることで、リクエストの頻度を制限し、過度のリクエストのプレッシャーを回避できます。

具体的な実装方法は以下の通りです:

var lastRequestTime = 0; // 上一次请求的时间

$('#myButton').on('click', function(){
    var now = new Date().getTime(); // 当前时间
    if(now - lastRequestTime > 1000){ // 限制请求频率为1秒
        $.ajax({
            url: 'http://www.example.com/data',
            type: 'GET',
            dataType: 'json',
            success: function(response){
                // 处理响应数据
            }
        });
        lastRequestTime = now;
    }
});

ここでは、前回のリクエストの時刻を記録し、ボタンがクリックされるたびに、現在時刻が1秒を超えているかどうかを判定します。前回のリクエスト時から。それを超えると、新しいリクエストの送信が許可されます。

(3) 前のリクエストをキャンセルする

前のリクエストが完了していない場合は、リクエストを複数回繰り返し送信することを避けるためにキャンセルできます。

具体的な実装方法は次のとおりです。

var xhr = null; // 存储ajax请求的xhr对象

$('#myButton').on('click', function(){
    if(xhr){ // 如果前一次请求还没有完成，取消它
        xhr.abort();
    }
    xhr = $.ajax({
        url: 'http://www.example.com/data',
        type: 'GET',
        dataType: 'json',
        success: function(response){
            // 处理响应数据
        }
    });
});

ここでは、最後の ajax リクエストの xhr オブジェクトを格納するグローバル xhr 変数を定義します。新しいリクエストが送信される前に、まず xhr が存在するかどうかを確認し、存在する場合は abort() メソッドを呼び出して前のリクエストをキャンセルします。次に、新しいリクエストを送信します。

4. 概要

重複リクエストは、サーバーにストレスを与えたり、クラッシュさせる可能性がある一般的な問題です。この状況を回避するには、ボタンを無効にする、リクエストの頻度を制限する、前のリクエストをキャンセルするなどの方法が使用できます。コードを記述するときは、リクエストが繰り返されないように、ロジックの正確さに必ず注意してください。

以上がjquery ajaxの重複リクエストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。