عرض شريط التقدم أثناء تحميل البيانات باستخدام 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 باستخدام شريط تقدم سهل الاستخدام، مما يوفر تعليقات مرئية أثناء البيانات عمليات التحميل.