الحصول على تحديثات التقدم لـ XMLHttpRequest

توفر متصفحات الويب كائن XMLHttpRequest (XHR) لتبادل بيانات خادم العميل. على الرغم من أن واجهة برمجة التطبيقات XHR القياسية تفتقر إلى إمكانات تتبع التقدم المتأصلة، إلا أن هناك طرقًا لمراقبة التقدم المحرز في نقل البيانات.

البايتات التي تم تحميلها:

يكشف XHR عن ملف xhr.upload. حدث onprogress لرصد التقدم المحرز في تحميل البيانات. نظرًا لأن المتصفح يتتبع كلاً من حجم البيانات الإجمالي والكمية التي تم تحميلها، فيمكنه توفير معلومات دقيقة عن التقدم.

البايتات التي تم تنزيلها:

يعد تتبع تقدم التنزيل أكثر صعوبة نظرًا لأن ولا يعرف المتصفح حجم البيانات التي سيتم إرسالها من الخادم حتى وصولها. أحد الحلول هو تعيين رأس طول المحتوى على البرنامج النصي للخادم، للإشارة إلى الحجم الإجمالي للبيانات التي سيتم إرسالها. مع وجود هذا الرأس في مكانه، يمكن للمتصفح مراقبة تقدم التنزيل بدقة.

مثال للتنفيذ:

يوضح الكود التالي 示例 تتبع التقدم في تحميل الملف، باستخدام jQuery UI لعرض شريط التقدم:

function updateProgress(evt) { إذا (evt. lengthComputable) { // evt.loaded: البايتات المستلمة // evt.total: إجمالي البايتات (من رأس طول المحتوى) فار في المئةComplete = (evt.loaded / evt.total) * 100؛ $('#progressbar').progressbar('option', 'value', بالمائةComplete); } } وظيفة سيندريك (إفت) { var req = new XMLHttpRequest(); $('#progressbar').progressbar(); req.onprogress = updateProgress; req.open('GET', 'test.php', true); req.onreadystatechange = الوظيفة (aEvt) { إذا (req.readyState == 4) { // التعامل مع الاستجابة هنا } }; req.send();

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();
}

الاستنتاج:

في حين أن واجهة برمجة تطبيقات XHR القياسية تفتقر إلى إمكانات تتبع التقدم المضمنة، فإن التقنيات الموضحة أعلاه تسمح للمطورين بمراقبة التقدم المحرز في نقل البيانات في تطبيقات الويب. من خلال تعيين رؤوس مناسبة لطول المحتوى واستخدام معالجات أحداث JavaScript، يمكن للمطورين إنشاء واجهات بديهية وسهلة الاستخدام توفر تحديثات التقدم في الوقت الفعلي للمستخدمين.