Bagaimanakah Saya Boleh Menjejaki Kemajuan Pemindahan Data dalam XMLHttpRequest?

Memantau Kemajuan dalam XMLHttpRequest

XMLHttpRequest membenarkan aplikasi web menghantar dan menerima data secara tidak segerak. Adakah mungkin untuk menjejak kemajuan XMLHttpRequest, khususnya bait yang dimuat naik dan dimuat turun?

Bait Dimuat Naik

Mendapatkan kemajuan bait yang dimuat naik adalah agak mudah. Gunakan acara xhr.upload.onprogress. Penyemak imbas mengira kemajuan dengan membandingkan saiz data yang dimuat naik dengan jumlah saiz fail.

Bait Dimuat turun

Memantau kemajuan bait yang dimuat turun adalah lebih mencabar kerana pelayar biasanya tidak tahu jumlah saiz respons. Penyelesaian melibatkan menetapkan pengepala Panjang Kandungan pada skrip sebelah pelayan untuk menunjukkan jumlah saiz respons. Ini membolehkan penyemak imbas mengira kemajuan muat turun.

Contoh

Pertimbangkan skrip pelayan yang membaca dan menghantar fail zip dengan saiz yang diketahui:

<?php
$filesize = filesize('test.zip');
header("Content-Length: " . $filesize);
readfile('test.zip');
?>

Kod JavaScript di bawah kemudiannya boleh memantau kemajuan muat turun menggunakan pengepala Panjang Kandungan:

<code class="javascript">function updateProgress(evt) {
   if (evt.lengthComputable) {
      // evt.loaded: Bytes received by the browser
      // evt.total: Total bytes specified in the header
      var percentComplete = (evt.loaded / evt.total) * 100;
      $('#progressbar').progressbar("option", "value", percentComplete);
   }
}   
function sendreq(evt) {
    var req = new XMLHttpRequest(); 
    $('#progressbar').progressbar();    
    req.onprogress = updateProgress;
    req.open('GET', 'test.php', true);  
    req.onreadystatechange = function (aEvt) {  
        if (req.readyState == 4) 
        {  
             //run any callback here
        }  
    };  
    req.send(); 
}</code>

Penyelesaian ini membolehkan anda memantau kemajuan muat turun walaupun untuk fail besar yang mengundi pelayan untuk kemas kini tidak ideal.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjejaki Kemajuan Pemindahan Data dalam XMLHttpRequest?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!