طلب XML HttpRequest
تحتوي جميع المتصفحات الحديثة على كائن XMLHttpRequest مضمن لطلب البيانات من الخادم.
كائن XMLHttpRequest
يمكن استخدام كائن XMLHttpRequest لطلب البيانات من خادم ويب.
يعتبر كائن XMLHttpRequest حلمًا للمطورين ، لأنه يمكنك:
- تحديث صفحة الويب دون إعادة تحميل الصفحة
- طلب البيانات من الخادم - بعد تحميل الصفحة
- تلقي البيانات من الخادم - بعد تحميل الصفحة
- إرسال البيانات إلى الخادم - في الخلفية
مثال XMLHttpRequest
عندما تكتب حرفًا في حقل الإدخال أدناه ، يتم إرسال XMLHttpRequest إلى الخادم ، ويتم إرجاع بعض اقتراحات الأسماء (من الخادم):
مثال
تم شرح المثال أعلاه في فصول AJAX من هذا البرنامج التعليمي.
إرسال XMLHttpRequest
تبدو بنية JavaScript الشائعة لاستخدام كائن XMLHttpRequest إلى حد كبير مثل هذا:
مثال
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
شرح المثال
ينشئ السطر الأول في المثال أعلاه كائن XMLHttpRequest :
var xhttp = new XMLHttpRequest();
تحدد الخاصية onreadystatechange وظيفة يتم تنفيذها في كل مرة تتغير فيها حالة كائن XMLHttpRequest:
xhttp.onreadystatechange = function()
عندما تكون الخاصية readyState هي 4 وخاصية status 200 ، تكون الاستجابة جاهزة:
if (this.readyState == 4 && this.status == 200)
تقوم الخاصية responseText بإرجاع استجابة الخادم كسلسلة نصية.
يمكن استخدام السلسلة النصية لتحديث صفحة ويب:
document.getElementById("demo").innerHTML = xhttp.responseText;
سوف تتعلم المزيد عن كائن XMLHttpRequest في فصول AJAX من هذا البرنامج التعليمي.
الإصدارات القديمة من Internet Explorer (IE5 و IE6)
لا تدعم الإصدارات القديمة من Internet Explorer (IE5 و IE6) كائن XMLHttpRequest.
للتعامل مع IE5 و IE6 ، تحقق مما إذا كان المستعرض يدعم كائن XMLHttpRequest ، أو قم بإنشاء كائن ActiveXObject:
مثال
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}