Bagaimanakah anda menjejak kemajuan muat turun dalam XMLHttpRequest tanpa mengetahui jumlah saiz fail?

Memantau Kemajuan dalam XMLHttpRequest

XMLHttpRequest (XHR) menyediakan mekanisme untuk melaksanakan permintaan tak segerak daripada JavaScript. Walaupun ia menawarkan sokongan untuk menjejak kemajuan muat naik menggunakan acara xhr.upload.onprogress, mendapatkan kemajuan muat turun tidak semudah itu kerana kekurangan maklumat tentang jumlah bait yang akan diterima.

Menjejaki Kemajuan Muat Naik

Mendapatkan kemajuan muat naik agak mudah. Penyemak imbas mengekalkan maklumat tentang saiz fail yang sedang dimuat naik dan jumlah data yang dipindahkan, menjadikannya mungkin untuk memperoleh kemajuan melalui acara xhr.upload.onprogress.

Memantau Kemajuan Muat Turun

Untuk muat turun, cabaran timbul daripada ketidakupayaan penyemak imbas untuk mengetahui saiz data yang masuk. Walau bagaimanapun, ini boleh diatasi dengan menetapkan pengepala Panjang Kandungan dalam respons pelayan, yang menentukan jumlah saiz data yang akan dipindahkan.

Konfigurasi Bahagian Pelayan

Sebelah pelayan kod yang bertanggungjawab untuk menghantar kandungan hendaklah menetapkan pengepala Panjang Kandungan berdasarkan saiz fail atau data yang sedang dimuat turun. Contoh:

$filesize = filesize('test.zip');

header("Content-Length: " . $filesize); // Set header length
readfile('test.zip');
exit 0;

Pelaksanaan Bahagian Pelanggan

Dengan set pengepala Panjang Kandungan, kod sisi klien kini boleh menjejaki kemajuan muat turun:

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded: Bytes received by the browser
    // evt.total: Total bytes defined by 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) {
      // Callback actions here
    }
  };
  req.send();
}

Kod ini mencipta bar kemajuan menggunakan perpustakaan UI jQuery, menunjukkan peratusan kemajuan semasa data diterima. Dengan memanfaatkan pengepala Panjang Kandungan, penyemak imbas boleh mengira dan memaparkan kemajuan muat turun dengan tepat, menjadikannya berguna untuk muat turun fail besar yang memerlukan penunjuk kemajuan visual.

Atas ialah kandungan terperinci Bagaimanakah anda menjejak kemajuan muat turun dalam XMLHttpRequest tanpa mengetahui jumlah saiz fail?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!