كائن XMLHttpRequest _
تحتوي جميع المتصفحات الحديثة على كائن XMLHttpRequest مضمن لطلب البيانات من الخادم.
تحتوي جميع المتصفحات الرئيسية على محلل XML مضمن للوصول إلى XML ومعالجته.
كائن XMLHttpRequest
يمكن استخدام كائن XMLHttpRequest لطلب البيانات من خادم ويب.
كائن XMLHttpRequest هو حلم المطور ، لأنه يمكنك:
- تحديث صفحة الويب دون إعادة تحميل الصفحة
- طلب البيانات من الخادم - بعد تحميل الصفحة
- تلقي البيانات من الخادم - بعد تحميل الصفحة
- إرسال البيانات إلى الخادم - في الخلفية
مثال XMLHttpRequest
عندما تكتب حرفًا في حقل الإدخال أدناه ، يتم إرسال XMLHttpRequest إلى الخادم ، ويتم إرجاع بعض اقتراحات الأسماء (من الخادم):
مثال
Start typing a name in the input field below:
Suggestions:
إرسال XMLHttpRequest
تحتوي جميع المتصفحات الحديثة على كائن XMLHttpRequest مضمّن.
تبدو بنية JavaScript الشائعة لاستخدامها كما يلي:
مثال
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
إنشاء كائن XMLHttpRequest
ينشئ السطر الأول في المثال أعلاه كائن XMLHttpRequest:
var xhttp = new XMLHttpRequest();
حدث onreadystatechange
تحتفظ خاصية readyState بحالة XMLHttpRequest.
يتم تشغيل حدث onreadystatechange في كل مرة تتغير فيها الحالة الجاهزة.
أثناء طلب الخادم ، تتغير حالة الاستعداد من 0 إلى 4:
0: الطلب غير مهيأ
1: تم إنشاء اتصال بالخادم
2: تم استلام الطلب
3: طلب المعالجة
4: انتهى الطلب والاستجابة جاهزة
في الخاصية onreadystatechange ، حدد وظيفة يتم تنفيذها عندما تتغير حالة الاستعداد:
xhttp.onreadystatechange = function()
عندما تكون حالة الجاهزية هي 4 والحالة 200 ، تكون الاستجابة جاهزة:
if (this.readyState == 4 && this.status == 200)
خصائص وطرق XMLHttpRequest
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | The status of the XMLHttpRequest 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: OK 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
الوصول عبر المجالات
لأسباب أمنية ، لا تسمح المتصفحات الحديثة بالوصول عبر المجالات.
هذا يعني أن كلاً من صفحة الويب وملف XML الذي تحاول تحميله ، يجب أن يكونا موجودين على نفس الخادم.
الأمثلة الموجودة في W3Schools على جميع ملفات XML المفتوحة الموجودة في مجال W3Schools.
إذا كنت تريد استخدام المثال أعلاه في إحدى صفحات الويب الخاصة بك ، فيجب أن تكون ملفات XML التي تقوم بتحميلها موجودة على الخادم الخاص بك.
خاصية responseText
ترجع الخاصية responseText الاستجابة كسلسلة.
إذا كنت تريد استخدام الاستجابة كسلسلة نصية ، فاستخدم الخاصية responseText:
مثال
document.getElementById("demo").innerHTML = xmlhttp.responseText;
خاصية responseXML
تقوم الخاصية responseXML بإرجاع الاستجابة ككائن XML DOM.
إذا كنت تريد استخدام الاستجابة ككائن XML DOM ، فاستخدم الخاصية responseXML:
مثال
اطلب الملف cd_catalog.xml واستخدم الاستجابة ككائن XML DOM:
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
احصل أو انشر؟
GET هو أبسط وأسرع من POST ، ويمكن استخدامه في معظم الحالات.
ومع ذلك ، استخدم دائمًا طلبات POST عندما:
- الملف المخزن مؤقتًا ليس خيارًا (تحديث ملف أو قاعدة بيانات على الخادم)
- إرسال كمية كبيرة من البيانات إلى الخادم (POST ليس له قيود على الحجم)
- إرسال إدخال المستخدم (الذي يمكن أن يحتوي على أحرف غير معروفة) ، يعد POST أكثر قوة وأمانًا من GET
عنوان url - ملف على الخادم
معلمة url للطريقة open () هي عنوان لملف موجود على الخادم:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
يمكن أن يكون الملف أي نوع من الملفات ، مثل .txt و .xml ، أو ملفات البرمجة النصية للخادم مثل .asp و .php (والتي يمكنها تنفيذ إجراءات على الخادم قبل إرسال الاستجابة مرة أخرى).
غير متزامن - صحيح أم خطأ؟
لإرسال الطلب بشكل غير متزامن ، يجب ضبط المعلمة غير المتزامنة للطريقة open () على "صحيح":
xmlhttp.open("GET", "xmlhttp_info.txt", true);
يعد إرسال الطلبات بشكل غير متزامن تحسينًا كبيرًا لمطوري الويب. تستغرق العديد من المهام التي يتم إجراؤها على الخادم وقتًا طويلاً للغاية.
من خلال الإرسال غير المتزامن ، لا يتعين على JavaScript انتظار استجابة الخادم ، ولكن يمكنها بدلاً من ذلك:
- تنفيذ البرامج النصية الأخرى أثناء انتظار استجابة الخادم
- تعامل مع الرد عندما يكون الرد جاهزًا
غير متزامن = صحيح
عند استخدام async = true ، حدد وظيفة لتنفيذها عندما تكون الاستجابة جاهزة في حدث onreadystatechange:
مثال
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
غير متزامن = خطأ
لاستخدام async = false ، قم بتغيير المعامل الثالث في طريقة open () إلى false:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
لا يُنصح باستخدام عدم التزامن = خطأ ، ولكن يمكن أن يكون ذلك مقبولاً في عدد قليل من الطلبات الصغيرة.
تذكر أن JavaScript لن يستمر في التنفيذ ، حتى تصبح استجابة الخادم جاهزة. إذا كان الخادم مشغولاً أو بطيئًا ، فسيتوقف التطبيق أو يتوقف.
ملاحظة: عند استخدام async = false ، لا تكتب دالة onreadystatechange - فقط ضع الكود بعد جملة send ():
مثال
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
محلل XML
تحتوي جميع المتصفحات الحديثة على محلل XML مضمّن.
يحتوي نموذج كائن مستند XML (XML DOM) على الكثير من الأساليب للوصول إلى XML وتحريره.
ومع ذلك ، قبل التمكن من الوصول إلى مستند XML ، يجب تحميله في كائن XML DOM.
يمكن لمحلل XML قراءة نص عادي وتحويله إلى كائن XML DOM.
تحليل سلسلة نصية
يوزع هذا المثال سلسلة نصية في كائن XML DOM ، ويستخرج المعلومات منه باستخدام JavaScript:
مثال
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
المتصفحات القديمة (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");
}
لا تدعم الإصدارات القديمة من Internet Explorer (IE5 و IE6) كائن DOMParser.
للتعامل مع IE5 و IE6 ، تحقق مما إذا كان المستعرض يدعم كائن DOMParser ، أو أنشئ كائن ActiveXObject:
مثال
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
مزيد من الأمثلة
استرداد معلومات الرأس لمورد (ملف).
استرجع معلومات رأس محددة لمورد (ملف).
كيف يمكن لصفحة ويب الاتصال بخادم ويب بينما يقوم المستخدم بكتابة الأحرف في حقل الإدخال.
كيف يمكن لصفحة ويب جلب معلومات من قاعدة بيانات باستخدام كائن XMLHttpRequest.
قم بإنشاء XMLHttpRequest لاسترداد البيانات من ملف XML وعرض البيانات في جدول HTML.