انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 116
دورة جافا سكريبت

AJAX XMLHttp

في هذا الدرس سوف نتعرف علي ال object الذي يسمي "XMLHttpRequest " وهو يستخدم في تبادل البيانات مع الخادم في الخلفية ويعتبر ايضا هو اساس تقنية ال AJAX

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
11
الأمثلة
8
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,972
محتوى الدرس
في هذا الدرس 11تصفّح المواضيع

AJAX XMLHttp

 - يعتبر "XMLHttpRequest " هو حجر الاساس الذي بني عليه تقنية AJAX ويتلخص سير عمل هذا ال object كالأتي 

  1. قم بأنشاء عنصر "XMLHhttpRequest "
  2. قم بأنشاء دالة لتستخدم ك callback 
  3.  يتم فتح عنصر "XMLHhttpRequest "
  4. يتم ارسال طلب الي الخادم 

XMLHttpRequest Object

جميع المتصفحات الحديثة تدعم استخدام العنصر "XMLHttpRequest" 

- يمكننا استخدام العنصر "XMLHttpRequest " في ارسال واستقبال البيانات من والي الخادم server في الخلفية وهذا يعني أمكانية تحديث أجزاء معينة في صفحة الويب دون الحاجة الي اعادة تحميل الصفحة كاملة 

Create an XMLHttpRequest Object

تحتوي جميع المتصفحات الحديثة مثل (Chrome و Firefox و IE و Edge و Safari و Opera) على ال "object " التالي XMLHttpRequest مضمن بداخلها "built in "

  • نقوم بأنشاء متغير ثم تخزين قيمة ال object بداخله علي النحو التالي 


HTML 
variable = new XMLHttpRequest();

Define a Callback Function

  • تعرفنا من قبل علي ال "callback" وعرفنا انها عبارة عن دالة يتم تمريرها ك parameter بداخل دالة اخري  
  • نقوم بأستخدام ال callback في هذه الحالة حتي يتم تنفيذ دالة معينة عندما يكون الرد الخاص بالخادمResponse جاهز 
HTML 
xhttp.onload = function() {
  /* What do do when the response is ready *ظ
}

Send a Request

لإرسال طلب request إلى الخادم server ، يمكنك استخدام الدالتين open () و send () لل "object" التالي XMLHttpRequest

HTML 
xhttp.open("GET", "ajax.txt");
xhttp.send();

Example

HTML 
/* Create an XMLHttpRequest object */
const xhttp = new XMLHttpRequest();

/* Define a callback function */
xhttp.onload = function() {
  /*  Here you can use the Data */
}

/* Send a request */
  xhttp.open("GET", "/files/ajax.txt");
xhttp.send();
جرّب بنفسك

Access Across Domains

لأسباب خاصة بحماية البيانات  لا تسمح المتصفحات الحديثة بالوصول الي الملفات عبر نطاقات "domains" مختلفة

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

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

XMLHttpRequest Object Methods

Methods Description
new XMLHttpRequest() تستخدم في انشاء عنصر "XMLHttpRequest " جديد
abort() تستخدم في الغاء الطلب Request الذي تم ارساله الي الخادم في الوقت الحالي
getAllResponseHeaders() تستخدم في ارجاع جميع معلومات ال header
getResponseHeader() تستخدم في ارجاع معلومات header معين
open(method, url, async, user, psw) تستخدم في تحديد معلومات عملية الطلب (method : تستخدم في تحديد دالة الارسال سواء post , Get ) , (url: تستخدم في تحديد موقع الملف ) , ( async: تأخذ احدي القيمتين true , false وتقوم بتحديد مااذا كانت "asynchronous " او "synchronous" ) , (user : تستخدم في تحديد اسم المستخدم وهي اختيارية )
send() ةانتا
send(string) cell
setRequestHeader() cell



XMLHttpRequest Object Properties

HTML

The onload Property

يمكنك استخدام دالة ك callback مع ال object التالي "XMLHttpRequest" ليتم تنفيذها عندما يتم الرد علي الطلب الذي قمت بأرساله الي الخادم 

يتم تعريف الدالة بداخل الخاصية property التالي "onload" بداخل ال" object "XMLHttpRequest 

Example

HTML 
xhttp.onload = function() {
    document.getElementById("demo").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "/files/ajax.txt");
  xhttp.send();
}
جرّب بنفسك

Multiple Callback Functions

إذا كان لديك أكثر من مهمة AJAX في موقع ويب ، فيجب عليك إنشاء وظيفة واحدة لتنفيذ كائن XMLHttpRequest ، ووظيفة رد اتصال واحدة لكل مهمة AJAX.

يجب أن يحتوي استدعاء الدالة على عنوان URL وعلي الدالة التي سوف يتم استدعائها عندما يكون الرد response من الخادم جاهز



Example

HTML 
loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}

function myFunction1(xhttp) {
  /* action goes here */
}
function myFunction2(xhttp) {
  /* action goes here */
}

The onreadystatechange Property

  • تحتوي الخاصية "readyState " علي الحالة الخاصة بال object التالي "XMLHttpRequest"
  • تستخدم الخاصية "onreadystatechange" في تنفيذ الدالة التي تم تمريرها ك callback عندما يحدث تغير في ال "readyState"
  • الخاصية "statues" والخاصية "statusText " يستخدمان في تحديد حالة "XMLHttpRequest "
cell 1 cell
cell 1 cell
cell 1 cell
cell 1 cell
cell 1 cell



HTML 
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "/files/ajax.txt");
  xhttp.send();
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…