XMLHttpRequest

XMLHttpRequest ( XHR ) هي واجهة برمجة تطبيقات (API) على شكل كائن جافا سكريبت ، تقوم وظائفها بنقلطلبات HTTP من متصفح الويب إلى خادم الويب . ^{[ 1 ]} تسمح هذه الوظائف لتطبيقات المتصفح بإرسال طلبات إلى الخادم بعد اكتمال تحميل الصفحة، واستلام المعلومات منه. ^{[ 2 ]} تُعد XMLHttpRequest أحد مكونات برمجة Ajax . قبل Ajax، كانت الروابط التشعبية وإرسال النماذج الآليات الرئيسية للتفاعل مع الخادم، وغالبًا ما كانت هذه الطرق تستبدل الصفحة الحالية بصفحة أخرى. ^{[ 2 ]}

طُورت الفكرة الكامنة وراء هذه الميزة XMLHttpRequestعام 2000 من قِبل مطوري برنامج مايكروسوفت أوتلوك . ^{[ 3 ]} ثم طُبقت هذه الفكرة في متصفح إنترنت إكسبلورر 5 (1999). مع ذلك، لم تستخدم الصيغة الأصلية XMLHttpRequestالمعرّف . بدلاً من ذلك، استخدم المطورون المعرّفين ActiveXObject("Msxml2.XMLHTTP")و ActiveXObject("Microsoft.XMLHTTP"). ^{[ 4 ]} اعتبارًا من إنترنت إكسبلورر 7 (2006)، تدعم جميع المتصفحات XMLHttpRequestالمعرّف . ^{[ 4 ]}

XMLHttpRequestأصبح المعرّف الآن المعيار الفعلي في جميع المتصفحات الرئيسية، بما في ذلك محرك تخطيط Gecko من موزيلا (2002)، ^{[ 5 ]} وسفاري 1.2 (2004) وأوبرا 8.0 (2005). ^{[ 6 ]}

مثال في TypeScript . ^{[ 11 ]}

// إنشاء كائن XMLHttpRequest const xhr = new XMLHttpRequest ();// تهيئة الطلب: طريقة GET، عنوان URL، علامة Async (صحيح) تجعل البرنامج النصي لا يتوقف أثناء انتظار الاستجابة xhr.open ( ' GET' , 'https://example.com' , true );// تعيين مستمعي الأحداثxhr.onload = () = > { // تم تنفيذ الطلب. سجل رمز حالة الاستجابة ونصها console.log ( xhr.status , xhr.responseText ) ; } ;xhr.onerror = () => { console.log ( ' حدث خطأ في الشبكة ' ) ; } ;// إرسال الطلب xhr.send ();

إلى جانب هذه الخطوات العامة، XMLHttpRequestيوفر النظام خيارات عديدة للتحكم في كيفية إرسال الطلب ومعالجة الاستجابة. يمكن إضافة حقول رأس مخصصة إلى الطلب لتحديد كيفية تنفيذه من قِبل الخادم، ^{[ 12 ]} كما يمكن تحميل البيانات إلى الخادم من خلال تضمينها في استدعاء "send". ^{[ 13 ]} يمكن تحليل الاستجابة من تنسيق JSON إلى كائن JavaScript جاهز للاستخدام، أو معالجتها تدريجيًا فور وصولها بدلًا من انتظار النص الكامل. ^{[ 14 ]} يمكن إيقاف الطلب قبل الأوان ^{[ 15 ]} أو ضبطه على الفشل إذا لم يكتمل خلال فترة زمنية محددة. ^{[ 16 ]}

في المراحل الأولى لتطوير شبكة الإنترنت العالمية ، تبيّن إمكانية اختراق أمن المستخدمين باستخدام جافا سكريبت لتبادل المعلومات بين مواقع الويب المختلفة الأقل موثوقية. ولذلك، تُطبّق جميع المتصفحات الحديثة سياسة المصدر نفسه التي تمنع العديد من هذه الهجمات، مثل هجمات البرمجة النصية عبر المواقع . XMLHttpRequestتخضع البيانات لهذه السياسة الأمنية، ولكن في بعض الأحيان يلجأ مطورو الويب إلى التحايل على قيودها عمدًا. ويعود ذلك أحيانًا إلى الاستخدام المشروع للنطاقات الفرعية، فعلى سبيل المثال، إنشاء رابط XMLHttpRequestمن صفحة أنشأها موقع ويب آخر foo.example.comللحصول على معلومات من bar.example.comموقع ويب آخر سيفشل عادةً.

توجد بدائل متعددة لتجاوز هذه الميزة الأمنية، بما في ذلك استخدام JSONP ، ومشاركة الموارد عبر النطاقات (CORS)، أو بدائل أخرى باستخدام إضافات مثل Flash أو Silverlight (وكلاهما أصبح الآن غير مدعوم). تم تحديد XMLHttpRequest عبر النطاقات في XMLHttpRequestمواصفات المستوى 2 الصادرة عن W3C. ^{[ 17 ]} لم يُفعّل متصفح Internet Explorer ميزة CORS إلا في الإصدار 10. وقدّم الإصداران السابقان (8 و9) وظائف مماثلة من خلال واجهة برمجة تطبيقات XDomainRequest (XDR). يدعم الآن جميع المتصفحات الحديثة (على أجهزة سطح المكتب والهواتف المحمولة) ميزة CORS. ^{[ 18 ]}

يفرض بروتوكول CORS عدة قيود، مع نموذجين للدعم. لا يسمح النموذج البسيط بتعيين رؤوس طلبات مخصصة، كما أنه لا يدعم ملفات تعريف الارتباط . علاوة على ذلك، لا يدعم سوى طرق الطلب HEAD وGET وPOST ، ويقتصر POST على أنواع MIME التالية : "text/plain" و"application/x-www-urlencoded" و" multipart/form-data ". في البداية، كان "text/plain" هو النوع الوحيد المدعوم. ^{[ 19 ]} أما النموذج الآخر، فيكتشف طلب إحدى الميزات غير البسيطة ، ويرسل طلبًا تمهيديًا ^{[ 20 ]} إلى الخادم للتفاوض بشأن هذه الميزة.

قد يُسبب استخدام ردود استدعاء XHR غير المتزامنة في تدفق البرنامج صعوبةً في سهولة القراءة والصيانة. أضافت ECMAScript 2015 (ES6) بنية الوعد (promise ) لتبسيط المنطق غير المتزامن. ومنذ ذلك الحين، طبّقت المتصفحات fetch()واجهةً بديلةً لتحقيق نفس وظائف XHR باستخدام الوعود بدلاً من ردود الاستدعاء.

تم توحيد معيار Fetch أيضًا بواسطة WHATWG. ^{[ 21 ]}

fetch ( '/api/message' ) . then (( response : Response ) => { if ( response.status ! == 200 ) { throw new Error ( ' فشل الطلب' ); } return response.text ( ); } ) . then (( text : string ) = > { console.log ( text ) ; }) . catch (( error : Error ) = > { console.error ( error.message ) ; } ) ;

• WebSocket
• نقل الحالة التمثيلية (REST)

• معيار XMLHttpRequest الحيّ من قِبل WHATWG
• مسودة المستوى الأول من XMLHttpRequest من قبل W3C