طلب XMLHttpRequest (XHR)

كان إدخال XMLHttpRequest (XHR) في المتصفحات في منتصف عام 2000 بمثابة فوز كبير لمنصة الويب. دعونا نرى كيف يعمل.

مقدمة

كان إدخال XMLHttpRequest (XHR) في المتصفحات في منتصف عام 2000 بمثابة فوز كبير لمنصة الويب. دعونا نرى كيف يعمل.

الأشياء التي تبدو طبيعية الآن ، في الماضي ، بدت وكأنها قادمة من المستقبل. أنا أتحدث عن GMail أو خرائط Google ، على سبيل المثال ، والتي كانت جميعها تعتمد في جزء كبير منها على XHR.

تم اختراع XHR في Microsoft في التسعينيات ، وأصبح معيارًا واقعيًا حيث قامت جميع المتصفحات بتطبيقه في الفترة 2002-2006. W3C الموحد XMLHttpRequest في عام 2006.

كما يمكن أن يحدث أحيانًا في Web Platform ، في البداية كان هناك عدد قليل من التناقضات التي جعلت العمل مع XHR مختلفًا تمامًا عبر المستعرضات.

اكتسبت مكتبات مثل jQuery زيادة في الشعبية من خلال توفير طريقة تجريدية سهلة الاستخدام للمطورين ، وهذا بدوره ساعد في نشر استخدام هذه التقنية.

طلب مثال XHR

تقوم التعليمة البرمجية التالية بإنشاء كائن طلب XMLHttpRequest (XHR) ، وإرفاق دالة رد اتصال تستجيب علىonreadystatechangeحدث.

تم إعداد اتصال xhr لتنفيذ طلب GET لـhttps://yoursite.com، وقد بدأ بـsend()طريقة:

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    xhr.status === 200 ? console.log(xhr.responseText) : console.error('error')
  }
}
xhr.open('GET', 'https://yoursite.com')
xhr.send()

معلمات () مفتوحة إضافية

في المثال أعلاه ، مررنا الطريقة وعنوان URL للطلب.

يمكننا أيضًا تحديد طرق HTTP الأخرى - (getوpostوheadوputوdeleteوoptions).

تتيح لك المعلمات الأخرى تحديد علامة لجعل الطلب متزامنًا إذا تم تعيينه على خطأ ، ومجموعة من بيانات الاعتماد لمصادقة HTTP:

open(method, url, asynchronous, username, password)

onreadystatechange

الonreadystatechangeيتم استدعاء عدة مرات أثناء طلب XHR. نحن نتجاهل صراحة جميع الدول بخلافreadyState === 4، مما يعني أن الطلب قد تم.

الدول

  • 1 (مفتوح): يبدأ الطلب
  • 2 (HEADERS_RECEIVED): تم استلام رؤوس HTTP
  • 3 (LOADING): يبدأ الرد في التنزيل
  • 4 (تم): تم تنزيل الرد

إحباط طلب XHR

يمكن إحباط طلب XHR بالاتصال بـabort()طريقة علىxhrموضوع.

مقارنة مع jQuery

باستخدام jQuery ، يمكن ترجمة هذه الأسطر إلى:

$.get('https://yoursite.com', data => {
  console.log(data)
}).fail(err => {
  console.error(err)
})

مقارنة مع الجلب

مع الجلب APIهذا هو الكود المكافئ:

fetch('https://yoursite.com')
  .then(data => {
    console.log(data)
  })
  .catch(err => {
    console.error(err)
  })

طلبات عبر المجال

لاحظ أن اتصال XMLHttpRequest يخضع لقيود معينة يتم فرضها لأسباب أمنية.

أحد أكثرها وضوحًا هو تطبيق نفس سياسة المنشأ.

لا يمكنك الوصول إلى الموارد على خادم آخر ،ما لميدعم الخادم هذا بشكل صريح باستخدامCORS (تقاسم الموارد عبر المنشأ).

تحميل الملفات باستخدام XHR

تحقق من البرنامج التعليمي الخاص بي علىكيفية تحميل الملفات باستخدام XHR.


المزيد من دروس المتصفح:


Tech Wiki على الإنترنت!