تحميل بيانات المزيد من الأشخاص باستخدام AJAX

لتحقيق هذا الهدف، يمكنك استخدام تقنية AJAX (Asynchronous JavaScript and XML) في تطوير صفحتك. هذه التقنية تتيح للمستخدمين التفاعل مع الصفحة دون الحاجة إلى تحميل صفحة جديدة.

في البداية، يمكنك استخدام PHP و HTML لعرض الثلاثة مستخدمين الأولى كما تفعل بالفعل. بعد ذلك، يمكنك إضافة رابط “المزيد من الأشخاص” تحت القائمة للسماح للمستخدمين بتحميل المزيد من البيانات دون تحميل صفحة جديدة.

ثم، باستخدام JavaScript، يمكنك استخدام XMLHttpRequest أو fetch API لإرسال طلب إلى الخادم لاسترداد المزيد من البيانات من قاعدة البيانات. يمكنك أن تقوم بذلك عند النقر على رابط “المزيد من الأشخاص”.

بمجرد استرداد المزيد من البيانات من الخادم، يمكنك استخدام JavaScript لإنشاء عناصر HTML جديدة تحت القائمة الحالية وإضافة بيانات المستخدمين الإضافيين إليها دون إعادة تحميل الصفحة.

إليك مخططًا عامًا لكيفية تنفيذ ذلك:

1. استخدم PHP و HTML لعرض الثلاثة مستخدمين الأولى.
2. أضف رابطًا “المزيد من الأشخاص” تحت القائمة.
3. استخدم JavaScript للاستماع إلى حدث النقر على رابط “المزيد من الأشخاص”.
4. في استجابة الحدث، استخدم XMLHttpRequest أو fetch API لإرسال طلب إلى الخادم لاسترداد المزيد من البيانات.
5. في الاستجابة من الخادم، استخدم JavaScript لإنشاء عناصر HTML جديدة لكل مستخدم إضافي وإضافتها إلى القائمة الحالية دون إعادة تحميل الصفحة.

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

بعد وضع خطة لتنفيذ الخطوات المذكورة أعلاه، يمكنك الآن بدء تطبيقها بشكل تفصيلي.

أولاً، دعنا ننظر إلى كيفية عرض البيانات الأولية باستخدام PHP و HTML:

phpCopy code

// افتراضياً، نقوم بالاتصال بقاعدة البيانات واسترجاع البيانات الأولية
// يمكنك تغيير هذا ليناسب نظام قاعدة البيانات الخاص بك

// استعلام لاسترجاع البيانات الأولية (مثال)
$query = "SELECT * FROM persons LIMIT 3";
$result = mysqli_query($connection, $query);

// عرض البيانات في قائمة HTML
echo '
';
while ($row = mysqli_fetch_assoc($result)) {
    echo '
' . $row['name'] . '
';
}
echo '
';
?>


"#" id="load-more">المزيد من الأشخاص

ثم، في ملف JavaScript (script.js)، سنقوم بتطبيق AJAX لاستدعاء المزيد من البيانات عند النقر على الرابط “المزيد من الأشخاص”:

javascriptCopy code
document.getElementById('load-more').addEventListener('click', function(event) {
    event.preventDefault(); // منع تحميل الرابط

    // استخدام XMLHttpRequest أو fetch API لإرسال طلب إلى الخادم
    // يجب تغيير URL الاستدعاء لتتناسب مع مسار الملف الذي يتولى الاستجابة للطلب
    fetch('get_more_persons.php')
        .then(response => response.json())
        .then(data => {
            // إنشاء عناصر HTML جديدة لكل شخص إضافي
            const personsList = document.getElementById('persons-list');
            data.forEach(person => {
                const li = document.createElement('li');
                li.textContent = person.name;
                personsList.appendChild(li);
            });
        })
        .catch(error => {
            console.error('حدث خطأ في الاستجابة:', error);
        });
});

في الملف get_more_persons.php، يمكنك استخدام نفس الاستعلام الذي استخدمته لاسترجاع البيانات الأولية، ولكن هذه المرة بشكل يشمل تجاوز البيانات الأولية:

phpCopy code

// افتراضياً، نقوم بالاتصال بقاعدة البيانات واسترجاع المزيد من البيانات
// يمكنك تغيير هذا ليناسب نظام قاعدة البيانات الخاص بك

// استعلام لاسترجاع المزيد من البيانات (مثال)
$query = "SELECT * FROM persons LIMIT 3, 3";
$result = mysqli_query($connection, $query);

// تحويل البيانات إلى مصفوفة
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
    $data[] = $row;
}

// إرجاع البيانات بتنسيق JSON
header('Content-Type: application/json');
echo json_encode($data);
?>

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