Bagaimana untuk Melaksanakan Bar Kemajuan untuk Pemuatan Data AJAX?

Menyepadukan Bar Kemajuan untuk Pemuatan Data AJAX

Apabila pengguna berinteraksi dengan aplikasi web, adalah penting untuk memberikan isyarat visual untuk menunjukkan proses yang sedang berjalan, terutamanya semasa operasi yang memakan masa. Artikel ini mencadangkan pendekatan untuk memaparkan bar kemajuan semasa memuatkan data melalui AJAX.

Pertimbangkan senario berikut: kotak lungsur turun menggesa pengguna memilih nilai. Selepas pemilihan, permintaan AJAX mendapatkan semula dan memaparkan data daripada pangkalan data. Walau bagaimanapun, maklum balas mungkin mengambil sedikit masa. Untuk meningkatkan pengalaman pengguna, anda ingin memasukkan penunjuk kemajuan visual.

Kod AJAX yang disediakan termasuk:

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

Untuk menambah bar kemajuan, gunakan pendengar acara kemajuan XMLHttpRequest objek. Begini cara anda boleh melaksanakannya menggunakan 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>

Kod ini melampirkan pendengar acara kemajuan pada objek xhr, membolehkan anda menjejak kemajuan muat naik dan muat turun. Pembolehubah percentComplete mengira peratusan kemajuan, membolehkan anda memaparkannya kepada pengguna menggunakan pelaksanaan bar kemajuan yang sesuai.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Bar Kemajuan untuk Pemuatan Data AJAX?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!