في هذا الدرس 4تصفّح المواضيع
أثناء رحلة الطلب من المتصفح إلى الخادم وعودته، تتدرج قيمة الخاصية xhr.readyState من الرقم 0 حتى 4. عند استخدام المعالج onreadystatechange، يجب التحقق من الشرط المزدوج معاً: اكتمال النقل (readyState === 4) ونجاح كود الحالة (status ضمن النطاق 200..299) قبل لمس البيانات.
يوضح الجدول المرجعي مراحل readyState الخمس بالتفصيل، وبمجرد بلوغ المرحلة الرابعة بنجاح توفر الخاصية الافتراضية xhr.responseText النص الكامل المرسل من الخادم لتحليله وعرضه:
قيمة readyState | الثابت القياسي | المعنى الدقيق في دورة الاتصال |
|---|---|---|
0 | UNSENT | أُنشئ الكائن ولم تُستدعَ open() بعد |
1 | OPENED | استُدعيت open() ويمكن الآن ضبط رؤوس الطلب |
2 | HEADERS_RECEIVED | وصل كود الحالة ورؤوس استجابة الخادم |
3 | LOADING | جاري تنزيل دفعات جسم الاستجابة |
4 | DONE | اكتملت عملية النقل بالكامل وجاهزة للفحص |
const xhr = new XMLHttpRequest();
const out = document.getElementById('rs-out');
const url = 'data:text/plain,' +
encodeURIComponent('Server Status: Operational (99.98%)');
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
out.textContent = xhr.responseText;
}
};
xhr.open('GET', url, true);
xhr.send();بدلاً من تحليل النص يدوياً في كل مرة، يمكنك ضبط xhr.responseType = "json" قبل الإرسال! سيتولى محرك المتصفح تحليل البيانات تلقائياً ويسلمك الكائن الجاهز مباشرةً داخل الخاصية xhr.response (ومن القيم المدعومة أيضاً "blob" للملفات الثنائية و"document" للمستندات).
يرسل الخادم غالباً معلومات وصفية مهمة (كنوع المحتوى أو المتبقي من حد الطلبات أو عدد الصفحات) داخل حقول رأس الاستجابة. اقرأ أي حقل مفرد عبر xhr.getResponseHeader("Content-Type")، أو استعرض جميع رؤوس الاستجابة المتاحة كنص متعدد الأسطر عبر xhr.getAllResponseHeaders().
const json = '{"order":804,"status":"Shipped"}';
const blob = new Blob([json], { type: 'application/json' });
const xhr = new XMLHttpRequest();
const out = document.getElementById('ty-out');
xhr.responseType = 'json';
xhr.onload = () => {
const ct = xhr.getResponseHeader('Content-Type');
out.textContent = '#' + xhr.response.order + ' (' + ct + ')';
};
xhr.open('GET', URL.createObjectURL(blob), true);
xhr.send();ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس مراحل readyState الخمس مع التحقق من كود status، وقراءة النصوص بـ responseText، والتحليل التلقائي عبر responseType = "json" وxhr.response، وفحص رؤوس الاستجابة بـ getResponseHeader(). الخطوة التالية: انتقل إلى درس «قراءة بيانات XML عبر AJAX» لاستخراج البيانات من مستندات XML بأمان.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 xhr.readyState خاصية مرحلة الاتصال readyState
- خاصية رقمية من 0 إلى 4 تتتبع مراحل تهيئة وإرسال واكتمال تنزيل طلب الشبكة.
- للمراجعة
- 02 xhr.responseType خاصية تحديد نوع الاستجابة responseType
- تضبط التحليل التلقائي للاستجابة (مثل json أو blob) ليوضع الناتج الجاهز في خاصية xhr.response.
- للمراجعة
- 03 xhr.getResponseHeader() دالة قراءة رأس الاستجابة getResponseHeader
- تستخرج قيمة حقل رأس محدد من رد الخادم دون حساسية لحالة الأحرف أو تعيد null عند غيابه.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 MIME MIME
- Multipurpose Internet Mail Extensions
- المعيار القياسي لتحديد نوع محتوى البيانات المرسلة والمستقبلة مثل application/json.
- للمراجعة
- 02 HTTP HTTP
- Hypertext Transfer Protocol
- بروتوكول الويب الذي يحدد أكواد حالة الاستجابة القياسية كالنجاح 200 وأخطاء 404 و500.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال الاستجابة المهيكلة في محرر التجربة وغيّر رقم الطلب من 804 إلى 912 وتحقق من القراءة التلقائية.
-
بدّل بين التبويب الأول والتبويب الثاني في محاكي الاستجابة لمقارنة التحليل اليدوي والتلقائي.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.