الكورس

Advertisements

Ajax | XMLHttpRequest


كائن XMLHttpRequest هو كل شىء (حجر الزاوية) فى AJAX .

 

 

كيفية تقديم طلب HTTP

 

من أجل تقديم طلب HTTP إلى الخادم باستخدام JavaScript ، فإنك تحتاج إلى مثيل لكائن مع الدالة Function، هذا هو المكان الذي يأتي فيه XMLHttpRequest.

نشأ فى Internet Explorer فى الاصدارات القديمة ككائن ActiveX يسمى XMLHTTP. بعد ذلك ،

اتبعت Mozilla و Safari والمتصفحات الأخرى ، مع تنفيذ كائن XMLHttpRequest الذي يدعم أساليب وخصائص كائن ActiveX الأصلي من Microsoft.

 

✅ Syntax بناء جملة لإنشاء كائن XMLHttpRequest:

 
 variable متغير = new XMLHttpRequest(); 

 

مثال للتوضيح:

var xhttpReq = new XMLHttpRequest(); // Mozilla, Safari, IE7+ ...

 

المتصفحات القديمة older browsers

 

تستخدم الإصدارات القديمة من Internet Explorer (5/6) كائن ActiveX بدلاً من كائن XMLHttpRequest:

xhttpReq = new ActiveXObject("Microsoft.XMLHTTP"); // IE 6 and older

 

مثال

 

للتعامل مع IE5 و IE6 ، تحقق مما إذا كان المستعرض browser يدعم كائن XMLHttpRequest ، اذا ما بيدعم قم بإنشاء كائن ActiveX:

if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    xhttpReq = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    xhttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}

 

بعد تقديم طلب ، سوف تتلقى استجابة Response مرة أخرى.

 

في هذه المرحلة ، يجب أن تخبر كائن طلب XMLHttp عن وظيفة أو دالة JavaScript التي ستقوم بمعالجة الاستجابة ، عن طريق تعيين خاصية تبادل onreadystatechange للكائن وتسميته بعد أن يتم استدعاء الوظيفة عند تغيير حالة الطلب ، مثل هذا:

xhttpReq.onreadystatechange = yourNameFunction;

 

لاحظ أنه لا توجد أقواس () بعد اسم الوظيفة function، لأنك تقوم بتعيين مرجع للدالة ، بدلاً من استدعاءها فعليًا،

 

أو بدلاً من إعطاء اسم وظيفة ، يمكنك استخدام تقنية JavaScript لتحديد الوظائف السريعة (تسمى “وظائف مجهولة”) لتحديد الإجراءات التي ستقوم بمعالجة الاستجابة ، مثل هذا:

xhttpReq.onreadystatechange = function(){
    // Process the server response here.
};

 

فى الفصول القادمة سنكمل العملية ، ونرسل الطلب الى الخادم، 

ولكن الأن تعرف على Methods و Properties الخاصة بكائن XMLHttpsRequest:

 

أساليب (Methods) كائن XMLHttpRequest

 

Method Description
() new XMLHttpRequest – ينشئ كائن XMLHttpRequest جديد.
() getAllResponseHeaders– إرجاع معلومات header.
() getResponseHeader– إرجاع معلومات header محددة.
(open(method, url, async, user, psw – يحدد الطلب.

الطريقة Method:
نوع الطلب GET أو POST.

عنوان url: موقع الملف.

async غير متزامن : القيمة الافتراضية > True ويكون الملف (غير متزامن) أو False ويكون الملف (متزامن).

المستخدم user: اسم المستخدم ( اختياري )

password: كلمة المرور ( اختياري )
() send – يرسل الطلب إلى الخادم.
تستخدم مع طلبات GET.
(send(string– يرسل الطلب إلى الخادم.
تستخدم مع طلبات POST.
() setRequestHeader – لإضافة زوج تسمية Name / قيمة Value إلى Header المراد إرساله.
() abort – يقوم بالغاء الطلب الحالي.

 

خصائص كائن XMLHttpRequest

 

الخاصية Property الوصف Description
onreadystatechange يحدد function ليتم استدعاؤها عند تغيير خاصية readyState.
readyState يحمل حالة XMLHttpRequest.

اذا كان:-

0 👈 (uninitialized) أى (الطلب غير مهيأ).
1 👈 (loading) أى (تم تأسيس اتصال الخادم).
2 👈 (loaded) أى (تم استلام الطلب).
3 👈 (interactive) أى (طلب معالجة)
4 👈 (complete) أى (تم الانتهاء من الطلب والاستجابة جاهزة).
responseTextإرجاع بيانات الاستجابة كنص String.
responseXML إرجاع بيانات الاستجابة كبيانات XML.
statusإرجاع رقم حالة الطلب

200 = “موافق OK”
403 = ” ممنوع Forbidden”
404 = ” غير موجود Not Found”
statusText إرجاع نص الحالة (مثل “موافق” أو “غير موجود”)

 

 

Quote This Article: ” Delete Code is debugged code. ” — Jeff Sickel

 

 

لا تنسي متابعتنا على مواقع التواصل الإجتماعى.



الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements