JavaScript - AJAX XMLHttp

JavaScript - AJAX XMLHttpRequest

🔸 كائن XMLHttpRequest هو الأساس في تقنية AJAX، ويُستخدم لإرسال واستقبال البيانات من السيرفر بدون إعادة تحميل الصفحة.

---

🔹 إنشاء كائن XMLHttpRequest

const xhttp = new XMLHttpRequest();

📌 هذا الكائن يُستخدم لاحقًا لإرسال طلب واستقبال رد من السيرفر.

---

🔹 دالة onreadystatechange

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};

📌 هذه الدالة تُنفذ تلقائيًا في كل مرة تتغير فيها حالة الطلب. عند اكتمال الطلب بنجاح (readyState == 4 وstatus == 200)، يتم عرض الرد.

---

🔹 فتح الطلب

xhttp.open("GET", "data.txt", true);

📌 هنا نحدد نوع الطلب (GET)، واسم الملف أو الرابط (data.txt)، وهل هو غير متزامن (true).

---

🔹 إرسال الطلب

xhttp.send();

📌 بعد فتح الطلب، نُرسله بهذه الدالة لتبدأ عملية التواصل مع السيرفر.

---

📌 شرح الحالات (readyState)

• 0: لم يُبدأ بعد
• 1: تم فتح الاتصال
• 2: تم استلام الاستجابة من السيرفر
• 3: يتم الآن تحميل البيانات
• 4: الاكتمال – تم استلام كل البيانات

---

⚠️ ملاحظات مهمة

• تأكد من تشغيل الكود على سيرفر حقيقي (وليس من الملف مباشرة) لأن بعض المتصفحات تمنع الوصول إلى ملفات محلية.
• يمكن استخدام GET لقراءة بيانات وPOST لإرسال بيانات.
• يوجد طرق أخرى حديثة مثل fetch() لكن XMLHttpRequest لا يزال شائعًا ومُعتمدًا.