Memantau Kemajuan XMLHttpRequest: Panduan Komprehensif

API XMLHttpRequest (XHR) standard tidak mempunyai sokongan terbina dalam untuk penjejakan kemajuan, menghalang usaha untuk memaparkan bar kemajuan semasa fail besar muat naik. Walau bagaimanapun, banyak penyemak imbas menawarkan sambungan bukan standard yang membolehkan pemantauan kemajuan.

Bait Dimuat Naik

Untuk memantau kemajuan bait yang dimuat naik, gunakan acara xhr.upload.onprogress . Penyemak imbas mengetahui kedua-dua saiz fail yang sedang dimuat naik dan jumlah data yang telah dihantar, menjadikannya mungkin untuk menentukan kemajuan muat naik.

Bait Dimuat Turun

Menentukan kemajuan bait yang dimuat turun (apabila menggunakan xhr.responseText) adalah lebih kompleks kerana penyemak imbas tidak mempunyai pengetahuan awal tentang jumlah saiz data yang dipindahkan. Satu penyelesaian ialah menetapkan pengepala Panjang Kandungan dalam skrip pelayan untuk menentukan jumlah saiz bait yang dijangkakan.

Sebagai contoh, jika skrip pelayan kami membaca fail ZIP 5 saat, kami boleh menetapkan pengepala seperti berikut :

<code class="php">$filesize = filesize('test.zip');
header("Content-Length: " . $filesize); // Set header length
readfile('test.zip');
exit 0;</code>

Dengan menetapkan pengepala, penyemak imbas boleh menentukan jumlah panjang respons dan memantau bait yang diterima dengan sewajarnya.

Pemantauan Acara

Untuk memantau kemajuan kedua-dua muat naik dan muat turun, gunakan pendengar acara berikut:

<code class="javascript">// Event listener for upload progress
xhr.upload.onprogress = function(evt) {
  if (evt.lengthComputable) {
    var uploadPercentage = (evt.loaded / evt.total) * 100;
    // Update progress bar or display percentage
  }
};

// Event listener for download progress
xhr.onprogress = function(evt) {
  if (evt.lengthComputable) {
    var downloadPercentage = (evt.loaded / evt.total) * 100;
    // Update progress bar or display percentage
  }
};</code>

Contoh

Contoh ini menunjukkan pemantauan kemajuan semasa muat turun fail menggunakan Bar kemajuan UI jQuery:

<code class="javascript">function updateProgress(evt) {
  if (evt.lengthComputable) {
    var percentComplete = (evt.loaded / evt.total) * 100;
    $('#progressbar').progressbar("option", "value", percentComplete);
  }
}

function sendRequest() {
  var req = new XMLHttpRequest();
  $('#progressbar').progressbar();
  req.onprogress = updateProgress;
  req.onloadstart = function() {
    updateProgress({ loaded: 0, total: 0 });
  };
  req.open('GET', 'test.php', true);
  req.send();
}

// Sending the request
sendRequest();</code>

Dengan menggabungkan teknik ini, anda boleh memantau dengan berkesan kemajuan operasi XMLHttpRequest, membolehkan pengalaman yang lebih mesra pengguna semasa pemindahan fail besar.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menjejaki kemajuan operasi XMLHttpRequest, terutamanya untuk muat naik dan muat turun fail besar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!