في هذا الدرس 4تصفّح المواضيع
يفصل الكائن XMLHttpRequest دائماً بين مرحلة إعداد الطلب ومرحلة إطلاقه الفعلي عبر الشبكة في خطوتين واضحتين:
xhr.open(method, url, true): تهيّئ طريقة الطلب ("GET"أو"POST") وعنوان الوجهة والوضع غير المتزامن، دون إرسال أي بايت بعد.xhr.send(body): تطلق الطلب فعلياً عبر الشبكة؛ وتُستدعى فارغة لطلبات GET، بينما يُمرر بداخلها جسم البيانات لطلبات POST.
تأخذ القيمة الافتراضية للمعامل الثالث في xhr.open(method, url, true) القيمة true دائماً. إياك وتمرير false على خيط الواجهة الرئيسي! فالطلب المتزامن المهجور يجمد تبويب المتصفح بالكامل ويوقف الأزرار والتمرير ريثما يرد الخادم، بل وتمنع المتصفحات الحديثة استخدام خصائص المهلة ونوع الرد معه.
اقصر طلبات GET حصراً على عمليات القراءة والاستعلام (كالبحث والترشيح)، ولا ترسل بها كلمات مرور أو أوامر حذف وتعديل أبداً! وعند دمج نص كتبه الزائر في الرابط، مرّره دائماً عبر encodeURIComponent(val) لتحويل الرموز الخاصة مثل C++ وR&D إلى ترميز آمن لا يقطع المعاملات:
| طريقة الطلب | مكان انتقال البيانات | الطبيعة والتخزين المؤقت | القاعدة الأمنية الواجبة |
|---|---|---|---|
GET | سلسلة الاستعلام بالرابط (?q=...) | قراءة فقط، قابلة للمشاركة والتخزين المؤقت | ترميز المدخلات بـ encodeURIComponent() وحظر إرسال الأسرار بالرابط |
POST | جسم الرسالة داخل xhr.send(body) | تنشئ أو تعدّل بيانات بالخادم ولا تُخزن مؤقتاً | ضبط حقل رأس الطلب Content-Type بعد open() |
const rawTopic = 'C++ & Async #1';
const safeQuery = '?topic=' + encodeURIComponent(rawTopic);
const out = document.getElementById('get-out');
const xhr = new XMLHttpRequest();
const demoUrl = 'data:application/json,' +
encodeURIComponent(JSON.stringify({ sent: safeQuery }));
xhr.onload = () => {
out.textContent = JSON.parse(xhr.responseText).sent;
};
xhr.open('GET', demoUrl, true);
xhr.send();عند إرسال بيانات داخل جسم طلب POST، أخبر الخادم بنوع التنسيق المرسل عبر الدالة xhr.setRequestHeader(name, value) مع الالتزام باستدعائها بعد open() وقبل send() حصراً:
- جسم JSON: اضبط الرأس على
"application/json"وأرسلJSON.stringify(data). - بيانات نموذج نصية: اضبط الرأس على
"application/x-www-form-urlencoded". - كائن
FormDataللملفات: مرّره مباشرةً إلىxhr.send(fd)دون ضبط الرأس يدوياً ليولّد المتصفح حد الفصل التلقائي بدقة!
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();
};ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس تهيئة وإطلاق الطلبات عبر xhr.open() وxhr.send()، والالتزام بالوضع غير المتزامن true، وترميز معاملات GET عبر encodeURIComponent()، وضبط حقول رأس الطلب لبيانات POST بالترتيب الصحيح. الخطوة التالية: انتقل إلى درس «استقبال ومعالجة استجابة الخادم في AJAX» لقراءة الردود وحقول رأس الاستجابة باحترافية.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 xhr.open(method, url, true) دالة تهيئة الطلب xhr.open
- تجهز طريقة الطلب وعنوانه والوضع غير المتزامن قبل إضافة حقول الرأس أو بدء الإرسال.
- للمراجعة
- 02 xhr.setRequestHeader() دالة ضبط رأس الطلب setRequestHeader
- تضيف حقل رأس إلى الطلب مثل نوع المحتوى، ويشترط استدعاؤها بعد open وقبل send حصراً.
- للمراجعة
- 03 encodeURIComponent() دالة ترميز المعاملات encodeURIComponent
- تحوّل المحارف الخاصة والمسافات إلى صيغة مئوية آمنة لئلا تكسر بنية معاملات الرابط.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 GET GET
- HTTP GET Method
- طريقة طلب قياسية مخصصة لاسترجاع البيانات وقراءتها دون إحداث تغيير على الخادم.
- للمراجعة
- 02 POST POST
- HTTP POST Method
- طريقة طلب قياسية ترسل البيانات داخل جسم الرسالة لإنشاء سجلات أو معالجتها بالخادم.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال ترميز استعلام GET في محرر التجربة وعدّل النص ليحتوي على % و& وتحقق من سلامة الناتج.
-
قارن بين التبويب الثاني والتبويب الثالث في المحاكي للتثبت من وجوب استدعاء open قبل setRequestHeader.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.