AJAX के साथ डेटा लोड करते समय एक प्रगति पट्टी प्रदर्शित करना

डेटाबेस से डेटा पुनर्प्राप्त करने वाली AJAX क्वेरी निष्पादित करते समय, इसमें कुछ समय लग सकता है परिणाम लौटाने के लिए. इस लोडिंग प्रक्रिया के दौरान उपयोगकर्ता को फीडबैक प्रदान करने के लिए, एक प्रगति बार प्रदर्शित किया जा सकता है।

jQuery के साथ एक प्रगति बार बनाना

jQuery लाइब्रेरी अंतर्निहित तरीकों की पेशकश करती है जो प्रगति पट्टियों के निर्माण और हेरफेर की सुविधा प्रदान करता है। अपने AJAX कॉल में प्रगति पट्टी जोड़ने के लिए, आप एक इवेंट श्रोता को xhr ऑब्जेक्ट से जोड़ सकते हैं:

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update the progress bar here
            }
        }, false);

        // Download progress
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update the progress bar here
            }
        }, false);

        return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data) {
        // Hide the progress bar and display the results
    }
});

इस कोड में:

• अपलोड प्रॉपर्टी के लिए प्रगति इवेंट श्रोता सर्वर पर डेटा भेजने की प्रगति को ट्रैक करता है।
• प्रगति इवेंट श्रोता xhr ऑब्जेक्ट सर्वर से डेटा प्राप्त करने की प्रगति को ट्रैक करता है।
• आप पूर्णता प्रतिशत निर्धारित करने और प्रगति बार को अपडेट करने के लिए प्रतिशत पूर्ण चर का उपयोग कर सकते हैं तदनुसार।
• डेटा सफलतापूर्वक पुनर्प्राप्त और संसाधित होने के बाद, प्रगति पट्टी को छुपाया जा सकता है और परिणाम प्रदर्शित किए जा सकते हैं।

इस दृष्टिकोण को लागू करके, आप अपने AJAX को बढ़ा सकते हैं उपयोगकर्ता के अनुकूल प्रगति पट्टी के साथ कॉलबैक, डेटा लोडिंग संचालन के दौरान दृश्य प्रतिक्रिया प्रदान करता है।