JAVASCRIPT Tutorial

XMLHttpRequest

المقدمة:

يعد كائن XMLHttpRequest حجر الزاوية لعمليات أجاكس، التي تُمكن متصفحات الويب من إرسال واستقبال البيانات من خادم ويب دون الحاجة إلى إعادة تحميل الصفحة بأكملها. إليك دليل موجز حول كيفية استخدامه:

الخطوات العملية:

  1. إنشاء كائن XMLHttpRequest:
    var request = new XMLHttpRequest();
    
  2. تحديد نوع الطلب: حدد نوع طلب HTTP (مثل GET أو POST) باستخدام إحدى الطرق التالية:
    request.open("GET", "url");
    request.open("POST", "url");
    
  3. إرسال الطلب: أرسل الطلب إلى الخادم باستخدام طريقة send:
    request.send();
    
  4. مُعالجة الاستجابة: عند استلام الاستجابة من الخادم، ستتم استدعاء الدالة onload:
    request.onload = function() {...};
    
  5. استخراج البيانات: يمكن الوصول إلى بيانات الاستجابة من خلال الخاصية responseText:
    var data = request.responseText;
    

المفاهيم الرئيسية:

  • XMLHttpRequest: كائن JavaScript يستخدم لتنفيذ عمليات أجاكس.
  • طلب HTTP: رسالة تُرسل إلى خادم ويب.
  • استجابة HTTP: رسالة إرجاع من خادم ويب.
  • نقل البيانات: يتم نقل البيانات بين المتصفح وخادم الويب باستخدام كائن XMLHttpRequest.
  • العمليات غير المتزامنة: تسمح عمليات أجاكس للمتصفحات بإرسال واستقبال البيانات دون حظر تنفيذ كود JavaScript الآخر.

مثال JavaScript:

var request = new XMLHttpRequest();
request.open("GET", "data.txt");
request.send();
request.onload = function() {
  var data = request.responseText;
  console.log(data);
};

دليل مُيسَر:

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