Ajax のリアルタイム更新処理を見てみましょう

ajax チュートリアルリアルタイム更新処理のコラム紹介

推奨(無料) ：ajax チュートリアル(ビデオ)

古いフロントエンドとして、このケースは次のように書かれていますjQueryに基づいています。

フロントエンド レンダリング ページは、データの取得に ajax とソケットのみを使用します。その他は当面使用されていませんが、プロジェクトでは依然として ajax が多く使用されています。

Ajax ショート ポーリングに基づく簡単なリクエストを見てみましょう

function req() {
    $.ajax({
        type: 'get',
        url: 'demo.php',
        dataType: 'json',
        success: function(res) {
            console.log(res);
        },
        error: function() {
            console.log('请求失败~');
        }
    });
}
req();
setInterval(req, 3000);

ネットワーク速度が速くて安定している場合は、このように使用できますが、ネットワーク速度は誰が決定できるのでしょうか?ネットワーク速度が不安定な場合 安定している場合、インターフェイスのリクエストに 5 ～ 10 秒かかり、ajax リクエストが蓄積され、やがて計り知れない問題が発生します。

方法 1: リクエストに変数を割り当て、ポーリングされるたびに前のリクエストを中止します。

var ajaxReq = null;
function req(isLoading) {
    if(ajaxReq !== null) {
        ajaxReq.abort();
        ajaxReq = null;
    }
    ajaxReq = $.ajax({
        type: 'get',
        url: 'demo.php',
        dataType: 'json',
        beforeSend: function() {
            if(isLoading) {
                $('.zh-loading').show();
            }
        },
        success: function(res) {
            console.log(res);
        },
        complete: function() {
            if(isLoading) {
                $('.zh-loading').hide();
            }
        },
        error: function() {
            console.log('请求失败~');
        }
    });
}
req(true);
setInterval(function() {
    req(false);
}, 3000);

一見すると、大丈夫、ほぼ大丈夫のように思えますが、前線としてはもっと適切な方法を探し続ける必要があるので、以下にその方法を示します。

方法 2: 各ポーリングによって前のリクエストが完了したかどうかが判断され、次のリクエストは完了した後にのみ実行されます (推奨)

var isLoaded = false;
function req(opts) {
    $.ajax({
        type: 'get',
        url: 'demo.php',
        dataType: 'json',
        beforeSend: function() {
            if(opts.init === 1) {
                $('.zh-loading').show();
            }
            isLoaded = false;
        },
        success: function(res) {
            console.log(res);
        },
        complete: function() {
            if(opts.init === 1) {
                $('.zh-loading').hide();
            }
            isLoaded = true;
        },
        error: function() {
            console.log('请求失败~');
        }
    });
}
req({"init": 1});
setInterval(function() {
    isLoaded && req({"init": 0});
}, 3000);

##上記の #isLoaded && req({"init": 0}); は、前の条件が正しいことを意味し、&& 以降のメソッドが実行されます。

通常の記述方法は

if(isLoaded) req({"init": 0});

です。 別の注意:

isLoaded=true 完全に追加する必要があります。追加が成功した場合のみ、リクエストが失敗した場合、ポーリングおよびリクエストは再度実行されません。成功またはエラーに関係なく、complete は実行されます。

コードはここにあります。ご清聴ありがとうございます~

関連する無料学習の推奨事項:

javascript(ビデオ)

以上がAjax のリアルタイム更新処理を見てみましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。