XMLHttpRequest के लिए प्रगति अपडेट प्राप्त करना

वेब ब्राउज़र क्लाइंट-सर्वर डेटा एक्सचेंज के लिए XMLHttpRequest (XHR) ऑब्जेक्ट प्रदान करते हैं। जबकि मानक XHR API में अंतर्निहित प्रगति ट्रैकिंग क्षमताओं का अभाव है, डेटा स्थानांतरण की प्रगति की निगरानी करने के तरीके हैं।

बाइट्स अपलोड किए गए:

XHR xhr.upload को उजागर करता है। डेटा अपलोड की प्रगति की निगरानी के लिए ऑनप्रोग्रेस इवेंट। चूंकि ब्राउज़र कुल डेटा आकार और अपलोड की गई मात्रा दोनों को ट्रैक करता है, यह सटीक प्रगति जानकारी प्रदान कर सकता है।

डाउनलोड किए गए बाइट्स:

डाउनलोड प्रगति को ट्रैक करना अधिक चुनौतीपूर्ण है क्योंकि ब्राउज़र को सर्वर से भेजे जाने वाले डेटा के आकार का तब तक पता नहीं चलता जब तक वह नहीं आ जाता। एक समाधान सर्वर स्क्रिप्ट पर एक कंटेंट-लेंथ हेडर सेट करना है, जो भेजे जाने वाले डेटा के कुल आकार को दर्शाता है। इस हेडर के साथ, ब्राउज़र डाउनलोड प्रगति की सटीक निगरानी कर सकता है। प्रगति पट्टी प्रदर्शित करने के लिए:

function updateProgress(evt) { यदि (evt.lengthComputable) { //evt.loaded: बाइट्स प्राप्त हुए // evt.total: कुल बाइट्स (सामग्री-लंबाई शीर्षलेख से) var प्रतिशत पूर्ण = (evt.loaded / evt.total) * 100; $('#progressbar').progressbar('option', 'value', percentComplete); } } फ़ंक्शन प्रेषक(evt) { var req = new XMLHttpRequest(); $('#progressbar').progressbar(); req.onprogress = अद्यतन प्रगति; 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 API में अंतर्निहित प्रगति ट्रैकिंग क्षमताओं का अभाव है, ऊपर वर्णित तकनीकें डेवलपर्स को वेब अनुप्रयोगों में डेटा स्थानांतरण की प्रगति की निगरानी करने की अनुमति देती हैं। उचित सामग्री-लंबाई हेडर सेट करके और जावास्क्रिप्ट ईवेंट हैंडलर का उपयोग करके, डेवलपर्स सहज और उपयोगकर्ता के अनुकूल इंटरफेस बना सकते हैं जो उपयोगकर्ताओं के लिए वास्तविक समय प्रगति अपडेट प्रदान करते हैं।