JavaScript - AJAX Request

JavaScript - إرسال الطلب باستخدام AJAX

🔸 لإرسال طلب إلى السيرفر باستخدام AJAX، يجب إنشاء كائن XMLHttpRequest، وتحديد طريقة الطلب، ووجهته، ثم إرساله باستخدام send(). في هذا الدرس نركّز على طريقة إرسال الطلب (Request).

---

🔹 إرسال طلب GET


const xhttp = new XMLHttpRequest();

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

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

📌 GET تُستخدم لاسترجاع البيانات من السيرفر دون إرسال محتوى إضافي.

---

🔹 إرسال طلب POST


const xhttp = new XMLHttpRequest();

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

xhttp.open("POST", "submit.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=Mahmoud&age=40");

📌 POST تُستخدم لإرسال بيانات إلى السيرفر. يجب تحديد نوع المحتوى باستخدام setRequestHeader.

---

🔹 متى أستخدم GET أو POST؟

  • GET: عند استدعاء بيانات بدون تأثير على السيرفر.
  • POST: عند إرسال بيانات (مثل نموذج تسجيل أو تعديل).
---

🔹 مميزات AJAX في الإرسال

  • التفاعل السريع مع المستخدم بدون تحميل الصفحة.
  • أداء أفضل وتقليل استهلاك البيانات.
  • مرونة في التعامل مع السيرفر (أي نوع من السيرفرات مثل PHP، ASP، Node.js...)
---

⚠️ ملاحظات أمنية

  • تأكد من حماية البيانات المُرسلة خاصة مع POST.
  • استخدم HTTPS لتأمين الاتصال.
  • قم بالتحقق من صحة البيانات على السيرفر دومًا.

تعليقات

المشاركات الشائعة من هذه المدونة

HTML - Text Formatting تنسيقات النص

1.1 SQL Introduction

Entity Framework - مقدمة عن Entity Framework