JavaScript

AJAX XMLHttp

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

التاريخ

16 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

830

المواضيع

24
الشروحات chevron_left AJAX XMLHttp chevron_left JavaScript

AJAX XMLHttp

</> 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 بداخله علي النحو التالي 


variable = new XMLHttpRequest();

</> Define a Callback Function

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

</> Send a Request

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

xhttp.open("GET", "ajax.txt");
xhttp.send();
Example
/* 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



</> The onload Property

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

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

Example
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
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
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();
}

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

معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
1
1
1
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات