Bagaimanakah saya boleh menjejak kemas kini kemajuan untuk XMLHttpRequest dalam pelayar web?

Mendapatkan Kemas Kini Kemajuan untuk XMLHttpRequest

Pelayar web menawarkan objek XMLHttpRequest (XHR) untuk pertukaran data pelanggan-pelayan. Walaupun API XHR standard tidak mempunyai keupayaan penjejakan kemajuan yang wujud, terdapat kaedah untuk memantau kemajuan pemindahan data.

Bait Dimuat Naik:

XHR mendedahkan xhr.upload. acara onprogress untuk memantau kemajuan muat naik data. Memandangkan penyemak imbas menjejaki kedua-dua jumlah saiz data dan jumlah yang dimuat naik, ia boleh memberikan maklumat kemajuan yang tepat.

Bait Dimuat Turun:

Menjejak kemajuan muat turun adalah lebih mencabar kerana pelayar tidak mengetahui saiz data yang akan dihantar dari pelayan sehingga ia tiba. Satu penyelesaian ialah menetapkan pengepala Panjang Kandungan pada skrip pelayan, menunjukkan jumlah saiz data yang akan dihantar. Dengan adanya pengepala ini, penyemak imbas boleh memantau kemajuan muat turun dengan tepat.

Contoh Pelaksanaan:

Kod berikut示例 menunjukkan penjejakan kemajuan untuk muat naik fail, menggunakan UI jQuery untuk memaparkan bar kemajuan:

<code class="javascript">function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded: bytes received
    // evt.total: total bytes (from the Content-Length 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) {
      // Handle the response here
    }
  };
  req.send();
}</code>

Menetapkan pengepala Panjang Kandungan pada skrip sebelah pelayan memastikan penjejakan kemajuan yang tepat untuk memuat naik dan memuat turun data.

Kesimpulan:

Walaupun API XHR standard tidak mempunyai keupayaan penjejakan kemajuan terbina dalam, teknik yang diterangkan di atas membolehkan pembangun memantau kemajuan pemindahan data dalam aplikasi web. Dengan menetapkan pengepala Panjang Kandungan yang sesuai dan menggunakan pengendali acara JavaScript, pembangun boleh mencipta antara muka intuitif dan mesra pengguna yang menyediakan kemas kini kemajuan masa nyata untuk pengguna.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menjejak kemas kini kemajuan untuk XMLHttpRequest dalam pelayar web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!