أكس جي إس - عميل XMLHttpRequest

XMLHttpRequest هي الأساس لـ AJAX.

  1. إنشاء obj XMLHttpRequest
  2. تعريف الدالة الاستدعائية
  3. فتح XMLHttpRequest
  4. إرسال طلب إلى الخادم

obj XMLHttpRequest

دعم جميع المتصفحات الحديثة obj XMLHttpRequest.

مثل XMLHttpRequest يمكن استخدامها للتبادل البيانات مع الخادم الويب في الخلفية. هذا يعني أنه يمكن تحديث جزء من محتوى الصفحة دون إعادة تحميل الصفحة بأكملها.

إنشاء obj XMLHttpRequest

جميع المتصفحات الحديثة (Chrome، Firefox، IE، Edge، Safari، Opera) تحتوي على obj XMLHttpRequest.

نص تشكيل obj XMLHttpRequest:

variable = new XMLHttpRequest();

تعريف الدالة الاستدعائية

الدالة الاستدعائية هي دالة يتم تمريرها كمعامل إلى دالة أخرى.

في هذه الحالة، يجب أن تحتوي دالة الاستدعاء على الكود الذي يجب تنفيذه عند استعداد الرد.

xhttp.onload = function() {
  // ما يجب القيام به عند استعداد الرد
}

إرسال الطلب

لإرسال طلب إلى الخادم، يمكنك استخدام open() و send() الطريقة:

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

مثال

// إنشاء obj XMLHttpRequest
تعريف xhttp = new XMLHttpRequest();
// تعريف دالة الاستدعاء
xhttp.onload = function() {
  // يمكنك استخدام البيانات هنا
}
// إرسال الطلب
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

جربها بنفسك

وصول عبر الحدود (Access Across Domains)

لأسباب أمنية، لا يسمح المتصفحات الحديثة بالوصول عبر الحدود.

هذا يعني أن يجب أن تكون الصفحة وملف XML الذي تحاول تحميله موجودين على نفس الخادم.

تكون الأمثلة على CodeW3C.com مفتوحة على ملفات XML موجودة في مجال CodeW3C.com.

إذا كنت ترغب في استخدام مثال أعلاه في أحد صفحات موقعك، يجب أن تكون ملفات XML التي تقوم بتحميلها موجودة على خادمك الخاص.

طرق obj XMLHttpRequest

الطريقة وصف
new XMLHttpRequest() إنشاء obj XMLHttpRequest جديد.
abort() إلغاء الطلب الحالي.
getAllResponseHeaders() يعود إلى معلومات الرأس.
getResponseHeader() يعود إلى معلومات الرأس المحددة.
open(method, url, async, user, psw)

يحدد الطلب.

  • methodنوع الطلب GET أو POST
  • urlموقع الملف
  • asynctrue (غير متزامن) أو false (متزامن)
  • userاسم المستخدم اختيارية
  • pswكلمة المرور اختيارية
send() إرسال الطلب إلى الخادم، للاستخدام في الطلبات GET.
send(string) إرسال الطلب إلى الخادم، للاستخدام في الطلبات POST.
setRequestHeader() إضافة زوج علامة/قيمة إلى الرأس الذي سيتم إرساله.

خصائص obj XMLHttpRequest

خاصية وصف
onload تعريف الدالة التي يتم استدعاؤها عند استلام (تحميل) الطلب.
onreadystatechange تعريف الدالة التي يتم استدعاؤها عند تغيير خاصية readyState.
readyState

يُحفظ حالة XMLHttpRequest

  • 0: لم يتم تفعيل الطلب
  • 1: تم إنشاء اتصال الخادم
  • 2: تم استقبال الطلب
  • 3: يتم معالجة الطلب
  • 4: تم إكمال الطلب وإعداد الاستجابة
responseText يعيد بيانات الرد كنص
responseXML يعيد بيانات الرد كبيانات XML
الحالة

يعيد رقم حالة الطلب

  • 200: "حسنًا"
  • 403: "منع"
  • 404: "غير موجود"

للحصول على قائمة كاملة، يرجى زيارة مرجع رسائل Http
statusText يعيد نص حالة (مثل "حسنًا" أو "غير موجود")

خاصية onload

عند استخدام XMLHttpRequest، يمكنك تعريف دالة استدعاء لتعمل عند استلام الرد

يرجى تحديد الدالة في onload يُحدد الدالة في الخاصية

مثال

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

جربها بنفسك

عديد من الدوال الاستدعائية

إذا كان هناك عدة مهام AJAX في الموقع، فيجب إنشاء دالة تنفيذ XMLHttpRequest لكل مهمة AJAX وتحديد دالة استدعاء لكل مهمة AJAX

يجب أن تحتوي دالة الطلب على URL والوظيفة التي يجب تنفيذها عند استعداد الاستجابة

مثال

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  تعريف xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}
function myFunction1(xhttp) {
  // هنا هي الحركة
}
function myFunction2(xhttp) {
  // هنا هي الحركة
}

خاصية onload

readyState تُحفظ الخاصية حالة XMLHttpRequest

onreadystatechange تُحدد الخاصية دالة استدعاء تعمل عند تغيير خاصية readyState

الحالة وخصائص statusText تُحفظ الخاصية خاصية XMLHttpRequest لتحديد حالة الطلب

خاصية وصف
onreadystatechange يُحدد الدالة التي يتم استدعاؤها عند تغيير الخاصية readyState
readyState

يُحفظ حالة XMLHttpRequest

  • 0: لم يتم تفعيل الطلب
  • 1: تم إنشاء اتصال الخادم
  • 2: تم استقبال الطلب
  • 3: يتم معالجة الطلب
  • 4: تم إكمال الطلب وإعداد الاستجابة
الحالة

يعيد رقم حالة الطلب

  • 200: "حسنًا"
  • 403: "منع"
  • 404: "غير موجود"

للحصول على قائمة كاملة، يرجى زيارة مرجع رسائل Http
statusText statusText

يعود نص الحالة (مثل "OK" أو "Not Found").

يتم استدعاء دالة onreadystatechange كلما تغيرت حالة readyState. 4 و status هو 200 عندما تكون الاستجابة جاهزة:

مثال

function loadDoc() {
  تعريف xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    إذا (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}

جربها بنفسك

تم تفعيل الحدث onreadystatechange أربعة مرات (1-4)، وتم تغيير حالة readyState مرة واحدة في كل مرة.