إرسال POST وضبط الرؤوس | إرسال طلبات الشبكة عبر AJAX في JavaScript

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عند إرسال بيانات داخل جسم طلب POST، أخبر الخادم بنوع التنسيق المرسل عبر الدالة xhr.setRequestHeader(name, value) مع الالتزام باستدعائها بعد open() وقبل send() حصراً:

جسم JSON: اضبط الرأس على "application/json" وأرسل JSON.stringify(data).
بيانات نموذج نصية: اضبط الرأس على "application/x-www-form-urlencoded".
كائن FormData للملفات: مرّره مباشرةً إلى xhr.send(fd) دون ضبط الرأس يدوياً ليولّد المتصفح حد الفصل التلقائي بدقة!

الصف 2 معاينة حية

الصف 3 كود برمجي

JavaScript

const body = JSON.stringify({ item: 'JS Guide', qty: 2 });
const url = 'data:application/json,' + encodeURIComponent(body);
document.getElementById('send-btn').onclick = () => {
  const xhr = new XMLHttpRequest();
  xhr.onload = () => {
    const out = document.getElementById('post-out');
    out.textContent = 'Delivered: ' + xhr.responseText;
  };
  xhr.open('GET', url, true);
  xhr.setRequestHeader('Accept', 'application/json');
  xhr.send();
};

جرّب بنفسك

الصف 4 ملاحظة هامة

الصف 5 ملاحظة هامة

الصف 6 ملاحظة هامة

خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

أتقنت في هذا الدرس تهيئة وإطلاق الطلبات عبر xhr.open() وxhr.send()، والالتزام بالوضع غير المتزامن true، وترميز معاملات GET عبر encodeURIComponent()، وضبط حقول رأس الطلب لبيانات POST بالترتيب الصحيح. الخطوة التالية: انتقل إلى درس «استقبال ومعالجة استجابة الخادم في AJAX» لقراءة الردود وحقول رأس الاستجابة باحترافية.

Sending POST Payloads Request Headers إرسال POST وضبط الرؤوس

شرح صفوف ومحتوى الفقرة

ملخص الدرس

ماذا تعلّمت في هذا الدرس؟

جميع فقرات هذا الدرس (إرسال طلبات الشبكة عبر AJAX في JavaScript)