الدرس الثاني : ارسال واستقبال البيانات في الجافا سكربت

بسم الله الرحمن الرحيم

اللهم صلِّ وسلم وبارك على سيدنا محمد

مرحباً بزوار ومتابعي بلوجر فيومي!

الدرس الثاني: إرسال البيانات باستخدام POST في AJAx

في الدرس السابق، اتعلمنا إزاي نستخدم الطريقة GET لإرسال واستقبال البيانات باستخدام AJAX. النهاردة هنتعلم إزاي نرسل البيانات باستخدام الطريقة POST ونعالج البيانات المستلمة على السيرفر.

1. ما الفرق بين GET و POST؟

الطريقة GET بتستخدم لإرسال بيانات في الـ URL، وعادةً بتستخدم في الاستعلامات البسيطة اللي مش بتتطلب سرية. أما الطريقة POST فبتستخدم لإرسال بيانات أكتر حساسية، زي بيانات تسجيل الدخول أو البيانات الشخصية، وبتكون غير ظاهرة في الـ URL.

2. إعداد نموذج HTML

هننشئ نموذج HTML بسيط يتيح للمستخدم إدخال اسمه وإرسال الطلب للسيرفر باستخدام الطريقة POST.

<h1>إرسال بيانات باستخدام POST</h1>

<form id="myForm">

    <input type="text" name="username" placeholder="أدخل اسمك" required>

    <button type="submit">إرسال</button>

</form>

<div id="result"></div>

<script>

    document.getElementById('myForm').addEventListener('submit', function(event) {

        event.preventDefault(); // منع إعادة تحميل الصفحة

        var xhr = new XMLHttpRequest();

        xhr.open('POST', 'server.php', true);

        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        xhr.onreadystatechange = function() {

            if (xhr.readyState == 4 && xhr.status == 200) {

                document.getElementById('result').innerHTML = xhr.responseText;

            }

        };

        var username = document.querySelector('input[name="username"]').value;

        xhr.send('username=' + encodeURIComponent(username));

    });

</script>

    

3. إنشاء ملف السيرفر (server.php)

ملف الـ PHP هيستقبل البيانات المرسلة من النموذج ويعالجها، ثم يرجع رد بناءً على البيانات.

<?php

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {

        $username = htmlspecialchars($_POST['username']);

        echo "مرحباً، " . $username . "! تم استلام بياناتك بنجاح.";

    } else {

        echo "من فضلك أرسل البيانات باستخدام POST.";

    }

?>

    

4. شرح الكود

- استخدمنا نموذج HTML بسيط بيحتوي على حقل لإدخال اسم المستخدم وزر إرسال.
- لما المستخدم يضغط على زر الإرسال، بيتم منع إعادة تحميل الصفحة باستخدام event.preventDefault().
- استخدمنا كائن XMLHttpRequest عشان نرسل البيانات إلى السيرفر باستخدام الطريقة POST.
- في ملف PHP، استقبلنا البيانات المرسلة من الـ AJAX باستخدام المتغير $_POST وعالجناها.

5. تحسين التجربة

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

6. الخاتمة

في الدرس ده، اتعلمنا إزاي نرسل البيانات باستخدام POST ونتعامل مع البيانات المستلمة في السيرفر. في الدرس الجاي، هنتعرف على كيفية استخدام مكتبة Fetch API كبديل أسهل وأحدث لـ XMLHttpRequest.