AJAX によるデータのロード中に進行状況バーを表示する

データベースからデータを取得する AJAX クエリを実行する場合、時間がかかることがあります。結果が返されるようにします。この読み込みプロセス中にユーザーにフィードバックを提供するために、進行状況バーを表示できます。

jQuery を使用した進行状況バーの作成

jQuery ライブラリには組み込みメソッドが用意されています。プログレスバーの作成と操作を容易にします。 AJAX 呼び出しに進行状況バーを追加するには、xhr オブジェクトにイベント リスナーをアタッチします。

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update the progress bar here
            }
        }, false);

        // Download progress
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update the progress bar here
            }
        }, false);

        return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data) {
        // Hide the progress bar and display the results
    }
});

このコード内:

• アップロード プロパティの進行状況イベント リスナーは、サーバーへのデータ送信の進行状況を追跡します。
• 進行状況イベント リスナーxhr オブジェクトの場合、サーバーからのデータ受信の進行状況が追跡されます。
• percentComplete 変数を使用して完了パーセンテージを決定し、進行状況バーを更新できます。
• データが正常に取得されて処理された後、進行状況バーを非表示にして結果を表示できます。

このアプローチを実装することで、AJAX を強化できます。ユーザーフレンドリーな進行状況バーを備えたコールバック。データ読み込み操作中に視覚的なフィードバックを提供します。