AJAX データ読み込み用のプログレスバーを実装するにはどうすればよいですか?

AJAX データ読み込み用の進行状況バーの統合

ユーザーが Web アプリケーションを操作するとき、進行中のプロセスを示す視覚的な手がかりを提供することが重要です。特に時間のかかる操作の場合。この記事では、AJAX 経由でデータをロードするときに進行状況バーを表示する方法を提案します。

次のシナリオを考えてみましょう。ドロップダウン ボックスがユーザーに値の選択を求めます。選択すると、AJAX リクエストはデータベースからデータを取得して表示します。ただし、返答には時間がかかる場合がございます。ユーザー エクスペリエンスを向上させるには、視覚的な進行状況インジケーターを組み込む必要があります。

提供される AJAX コードには次のものが含まれます。

<code class="html">$.ajax({
    type:"post",
    url:"clientnetworkpricelist/yourfile.php",
    data:"title="+clientid,
    success:function(data){
     $("#result").html(data);
    }
});</code>

進行状況バーを追加するには、XMLHttpRequest の進行状況イベント リスナーを利用します。物体。 jQuery を使用して実装する方法は次のとおりです。

<code class="html">$.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; 
                //Handle upload progress here
            } 
        }, false); 
       
       // Download progress
       xhr.addEventListener("progress", function(evt){ 
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total; 
               //Handle download progress here
           }
       }, false); 
       
       return xhr;
    },
    type: 'POST',
    url: &quot;/&quot;,
    data: {},
    success: function(data){ 
        // Handle successful response
    }
});</code>

このコードは、進行状況イベント リスナーを xhr オブジェクトにアタッチし、アップロードとダウンロードの両方の進行状況を追跡できるようにします。 percentComplete 変数は進行状況のパーセンテージを計算し、適切な進行状況バーの実装を使用してユーザーに進行状況を表示できるようにします。

以上がAJAX データ読み込み用のプログレスバーを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。