كيفية عرض شريط التقدم أثناء تحميل بيانات Ajax

عند التعامل مع الأحداث التي يطلقها المستخدم مثل تحديد القيم من مربع القائمة المنسدلة، فمن الشائع استرداد البيانات بشكل غير متزامن باستخدام اياكس. أثناء جلب البيانات، من المفيد تقديم إشارة مرئية للمستخدم بحدوث شيء ما. تستكشف هذه المقالة طريقة لعرض شريط التقدم أثناء طلبات Ajax.

تنفيذ شريط التقدم مع Ajax

لإنشاء شريط تقدم يتتبع بدقة تقدم مكالمة Ajax، اتبع الخطوات التالية :

1. استمع إلى تغييرات النموذج:

استخدم addEventListener('change') للاستماع إلى التغييرات في مربع القائمة المنسدلة.

2. بدء طلب Ajax:

أرسل طلب Ajax لاسترداد البيانات المطلوبة.

3. استخدام XMLHttpRequest لأحداث التقدم:

في خيارات Ajax، قم بتكوين وظيفة xhr، التي توفر الوصول إلى كائن XMLHttpRequest. يتيح لك هذا الكائن مراقبة الأحداث المختلفة، بما في ذلك التقدم.

4. مراقبة تقدم التحميل والتنزيل:

ضمن وظيفة xhr ، أضف مستمعي الأحداث لتتبع تقدم التحميل والتنزيل. تتضمن هذه الأحداث onloadstart، وonprogress، وonloadend.

5. تحديث شريط التقدم:

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

إليك مثال لمقتطف التعليمات البرمجية الذي يوضح هذه الخطوات:

$.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 progress bar...
            }
        }, false);

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

        return xhr;
    },
    type: "POST",
    url: "/yourfile.php",
    data: "...",
    success: function(data) {
        // Handle successful data retrieval...
    }
});

من خلال دمج هذه التقنيات، يمكنك عرض شريط التقدم بشكل فعال أثناء تحميل بيانات Ajax، مما يضمن تجربة مستخدم سلسة وغنية بالمعلومات.