Bagaimana untuk Memaparkan Bar Kemajuan Semasa Pemuatan Data Ajax?

Cara Memaparkan Bar Kemajuan Semasa Pemuatan Data Ajax

Apabila mengendalikan peristiwa yang dicetuskan pengguna seperti memilih nilai daripada kotak lungsur, adalah perkara biasa untuk mendapatkan data secara tidak segerak menggunakan Ajax. Semasa data sedang diambil, adalah berfaedah untuk memberikan petunjuk visual kepada pengguna bahawa sesuatu sedang berlaku. Artikel ini meneroka kaedah untuk memaparkan bar kemajuan semasa permintaan Ajax.

Melaksanakan Bar Kemajuan dengan Ajax

Untuk mencipta bar kemajuan yang menjejaki kemajuan panggilan Ajax dengan tepat, ikut langkah ini :

1. Dengarkan Perubahan Borang:

Gunakan addEventListener('change') untuk mendengar perubahan pada kotak lungsur turun.

2. Mulakan Permintaan Ajax:

Hantar permintaan Ajax untuk mendapatkan semula data yang dikehendaki.

3. Menggunakan XMLHttpRequest untuk Acara Kemajuan:

Dalam pilihan Ajax, konfigurasikan fungsi xhr, yang menyediakan akses kepada objek XMLHttpRequest. Objek ini membolehkan anda memantau pelbagai acara, termasuk kemajuan.

4. Pantau Kemajuan Muat Naik dan Muat Turun:

Dalam fungsi xhr, tambahkan pendengar acara untuk menjejak kemajuan muat naik dan muat turun. Acara ini termasuk onloadstart, onprogress dan onloadend.

5. Kemas Kini Bar Kemajuan:

Gunakan acara kemajuan untuk mengira peratusan kemajuan berdasarkan sifat dimuatkan dan jumlah objek acara, dan kemas kini bar kemajuan dengan sewajarnya.

Berikut ialah contoh coretan kod yang menunjukkan langkah-langkah ini:

$.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...
    }
});

Dengan menggabungkan teknik ini, anda boleh memaparkan bar kemajuan dengan berkesan semasa pemuatan data Ajax, memastikan pengalaman pengguna yang lancar dan bermaklumat.

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