Ajax データの読み込み中に進行状況バーを表示する方法

ドロップダウン ボックスからの値の選択など、ユーザーがトリガーしたイベントを処理する場合は、次を使用してデータを非同期的に取得するのが一般的です。アヤックス。データがフェッチされている間、何かが起こっていることをユーザーに視覚的に示すことは有益です。この記事では、Ajax リクエスト中に進行状況バーを表示する方法について説明します。

Ajax を使用した進行状況バーの実装

Ajax 呼び出しの進行状況を正確に追跡する進行状況バーを作成するには、次の手順に従います。 :

1.フォームの変更をリッスン:

addEventListener('change') を利用して、ドロップダウン ボックスへの変更をリッスンします。

2. Ajax リクエストの開始:

必要なデータを取得するために Ajax リクエストを送信します。

3.進行状況イベントに XMLHttpRequest を使用する:

Ajax オプションで、XMLHttpRequest オブジェクトへのアクセスを提供する xhr 関数を構成します。このオブジェクトを使用すると、進行状況などのさまざまなイベントを監視できます。

4.アップロードとダウンロードの進行状況を監視する:

xhr 関数内で、アップロードとダウンロードの両方の進行状況を追跡するイベント リスナーを追加します。これらのイベントには、onloadstart、onprogress、および onloadend.

5 が含まれます。進行状況バーの更新:

progress イベントを使用して、イベント オブジェクトのロードされたプロパティと合計プロパティに基づいて進行状況のパーセンテージを計算し、それに応じて進行状況バーを更新します。

これらの手順を示すコード スニペットの例を次に示します。

$.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 progress bar...
            }
        }, false);

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

        return xhr;
    },
    type: "POST",
    url: "/yourfile.php",
    data: "...",
    success: function(data) {
        // Handle successful data retrieval...
    }
});

これらの手法を組み込むことで、Ajax データの読み込み中に進行状況バーを効果的に表示でき、スムーズで有益なユーザー エクスペリエンスを保証できます。