الدرس الأول: إرسال واستقبال البيانات باستخدام AJAX
في الدرس ده هنتعرف على كيفية إرسال واستقبال البيانات في الجافا سكريبت باستخدام AJAX. الـAJAX بيسمح لنا نعمل تفاعل بين المستخدم والسيرفر بدون الحاجة لإعادة تحميل الصفحة. هنشوف إزاي نستخدمه خطوة بخطوة.
1. مفهوم AJAX
AJAX هي اختصار لـ "Asynchronous JavaScript and XML"، وهو تكنولوجيا بتمكنك من إرسال واستقبال البيانات من السيرفر بدون الحاجة لإعادة تحميل الصفحة. بتتيح لك تجربة مستخدم أكتر سلاسة وسرعة في التفاعل مع الموقع.
2. إعداد المشروع
أول حاجة هنعمل صفحة HTML بسيطة فيها زر لإرسال طلب للـ server، ونشوف النتيجة اللي بترجع من السيرفر في منطقة معينة في الصفحة.
<h1>إرسال واستقبال البيانات باستخدام AJAX</h1>
<button id="sendRequest">إرسال طلب</button>
<div id="result"></div>
<script>
document.getElementById('sendRequest').addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'server.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('result').innerHTML = xhr.responseText;
}
};
xhr.send();
});
</script>
3. إنشاء ملف السيرفر (server.php)
هننشئ ملف PHP بسيط يرد علينا برسالة نصية عشان نشوف إزاي الـAJAX بيشتغل فعلاً.
<?php
echo "تم استلام الطلب بنجاح من السيرفر!";
?>
4. شرح الكود
- أول حاجة عملنا صفحة HTML فيها زر "إرسال طلب"، وعملنا div باسم "result" عشان نعرض النتيجة اللي بتيجي من السيرفر.
- استخدمنا جافا سكريبت لتنفيذ AJAX باستخدام كائن XMLHttpRequest.
- بمجرد ما المستخدم يضغط على الزر، بنبعت طلب للسيرفر باستخدام الطريقة GET ونتوقع الرد منه.
- في ملف
PHP السيرفر، كتبنا رسالة نصية بسيطة عشان ترجع للـAJAX لما يتم استلام الطلب.
5. تحسين التجربة
ممكن نضيف المزيد من التحسينات زي إضافة مؤشر تحميل (loading) عشان المستخدم يعرف إن فيه طلب بيتبعت، أو نعمل أكواد لمعالجة الأخطاء لو حصلت مشكلة في الاتصال بالسيرفر.
6. الخاتمة
اتعرفنا النهاردة على واحدة من أهم الأدوات في تطوير الويب وهي الـAJAX. الدرس الجاي هنتكلم عن كيفية إرسال بيانات باستخدام الطريقة POST ومعالجة البيانات المستلمة على السيرفر.
