أحدث البرامج التعليمية وتطوير الشبكة
 

كائن مدعوم

❮ السابق التالي الفصل ❯

كل المتصفحات الحديثة لها كائن المدمج في مدعوم لطلب البيانات من الخادم.

جميع المتصفحات الكبرى لديها المدمج في محلل XML للوصول إلى والتلاعب XML.

كائن مدعوم

الكائن مدعوم يمكن استخدامها لطلب البيانات من خادم ويب.

الكائن مدعوم من a developers dream ، لأنك يمكن أن:

  • تحديث صفحة ويب دون إعادة تحميل الصفحة
  • طلب البيانات من الخادم - بعد تحميل الصفحة
  • تلقي البيانات من الخادم - بعد تحميل الصفحة
  • إرسال البيانات إلى الخادم - في الخلفية

مدعوم مثال

عند كتابة حرف في حقل الإدخال أدناه، يتم إرسال مدعوم إلى الخادم، ويتم إرجاع بعض الاقتراحات اسم (from the server) :

مثال

Start typing a name in the input field below:

Name:

Suggestions:

إرسال مدعوم

كل المتصفحات الحديثة لها وجوه مدعوم المضمنة.

وتركيب جافا سكريبت مشترك لاستخدامه يبدو الكثير من هذا القبيل:

مثال

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
       // Action to be performed when the document is read;
    }
};
xhttp.open("GET", " filename ", true);
xhttp.send();
انها محاولة لنفسك »

خلق كائن مدعوم

السطر الأول في المثال أعلاه يخلق أوبجكت مدعوم:

var xhttp = new XMLHttpRequest();

OnReadyStateChange الحدث

والخاصية readyState يحمل حالة مدعوم.

يتم تشغيل OnReadyStateChange الحدث في كل مرة تتغير ReadyState عن.

خلال طلب الخادم، والتغييرات في ReadyState 0-4:

0: طلب لم يتم تهيئة
1: إنشاء اتصال الخادم
2: طلب وارد
3: طلب تجهيز
4: طلب الانتهاء والاستجابة جاهز

في الممتلكات onreadystatechange، تحديد وظيفة ليتم تنفيذها عندما يتغير في ReadyState:

xhttp.onreadystatechange = function()

عندما ReadyState عن غير 4 والوضع هو 200، واستجابة جاهزة:

if (xhttp.readyState == 4 && xhttp.status == 200)

خصائص مدعوم وطرق

طريقة وصف
new XMLHttpRequest() بإنشاء كائن جديد مدعوم
open( method, url, async ) يحدد نوع الطلب
method : نوع الطلب: GET أو POST
url : موقع الملف
async : صحيح (asynchronous) أو خاطئة (synchronous)
send() يرسل الطلب إلى ملقم (used for GET)
send( string ) يرسل سلسلة الطلب إلى ملقم (used for POST)
onreadystatechange وظيفة ليتم استدعاؤها عند تغيير الخاصية readyState
readyState وضع مدعوم
0: طلب لم يتم تهيئة
1: إنشاء اتصال الخادم
2: طلب وارد
3: طلب تجهيز
4: طلب الانتهاء والاستجابة جاهز
status 200: موافق
404 الصفحة غير موجودة
responseText البيانات استجابة كسلسلة
responseXML البيانات استجابة إلى بيانات XML

الوصول عبر المجالات

لأسباب أمنية، المتصفحات الحديثة لا تسمح بالوصول عبر المجالات.

وهذا يعني أن كلا من صفحة ويب وملف XML أنه يحاول تحميل، يجب أن يكون موجودا على نفس الخادم.

الأمثلة على w3ii جميع ملفات XML المفتوحة تقع على المجال w3ii.

إذا كنت ترغب في استخدام المثال أعلاه على واحدة من صفحات الويب الخاصة بك، وملفات XML قمت بتحميل يجب أن يكون موجودا على الخادم الخاص بك.

وresponseText الملكية

الخاصية responseText ترجع استجابة كسلسلة.

إذا كنت ترغب في استخدام استجابة كسلسلة نصية، استخدام الخاصية responseText:

مثال

document.getElementById("demo").innerHTML = xmlhttp.responseText;
انها محاولة لنفسك »

وresponseXML الملكية

الخاصية responseXML ترجع استجابة ككائن DOM XML.

إذا كنت ترغب في استخدام استجابة ككائن DOM XML، استخدام الخاصية responseXML:

مثال

طلب الملف cd_catalog.xml واستخدام استجابة ككائن DOM XML:

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 أو وظيفة؟

GET هو أبسط وأسرع من وظيفة، ويمكن استخدامها في معظم الحالات.

ومع ذلك، دائما استخدام طلبات POST في الحالات التالية:

  • ملف التخزين المؤقت ليس خيارا (update a file or database on the server)
  • إرسال كمية كبيرة من البيانات إلى الخادم (POST لا يوجد لديه قيود على حجم)
  • إرسال إدخال المستخدم (which can contain unknown characters) ، المنصب هو أكثر قوة وأمنا من الحصول على

عنوان الموقع - ملف على خادم

المعلمة رابط ل open() الأسلوب، هو عنوان لملف على الخادم:

xmlhttp.open("GET", "xmlhttp_info.txt", true);

الملف يمكن أن يكون أي نوع من الملفات، مثل .txt و. xml. أو الملفات النصية الخادم مثل .ASP وفب (التي يمكن أن تؤدي الإجراءات على الخادم قبل إرسال الاستجابة مرة أخرى).

غير المتزامن - صح أو خطأ؟

لإرسال طلب غير متزامن، المعلمة المتزامن لل open() طريقة يجب أن يتم تعيين إلى true:

xmlhttp.open("GET", "xmlhttp_info.txt", true);

إرسال تطلب بشكل غير متزامن هو تحسنا كبيرا لمطوري الويب. العديد من المهام التي تجرى على الخادم هي قتا طويلا جدا.

عن طريق إرسال بشكل متزامن، وجافا سكريبت لم يكن لديك لانتظار استجابة الخادم، ولكن يمكن بدلا من ذلك:

  • تنفيذ البرامج النصية الأخرى أثناء انتظار استجابة الملقم
  • تتعامل مع ردود الأفعال عند الاستجابة جاهزة

المتزامن = صحيح

عند استخدام المتزامن = صحيح، تحديد وظيفة لتنفيذه عند الرد على استعداد في OnReadyStateChange الحدث:

مثال

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
       document.getElementById("demo").innerHTML = xmlhttp.responseText;
    }
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
انها محاولة لنفسك »

المتزامن = كاذبة

لاستخدام المتزامن = كاذبة، تغيير المعلمة الثالثة في open() طريقة إلى false:

xmlhttp.open("GET", "xmlhttp_info.txt", false);

استخدام المتزامن = كاذبة لا ينصح، ولكن لبضع طلبات الصغيرة هذه يمكن أن تكون على ما يرام.

نتذكر أن جافا سكريبت لن تستمر في تنفيذ حتى استجابة الملقم جاهزة. إذا كان الملقم مشغول أو بطيئة، فإن تطبيق تعليق أو توقف.

Note: عند استخدام المتزامن = كاذبة، لا تكتب وظيفة onreadystatechange - وضعت للتو التعليمات البرمجية بعد send() البيان:

مثال

xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
انها محاولة لنفسك »

محلل XML

كل المتصفحات الحديثة لها المدمج في محلل XML.

طراز كائن المستند XML (the XML DOM) يحتوي على الكثير من الطرق للوصول إلى وتحرير XML.

ومع ذلك، قبل أن تتمكن من الوصول إلى وثيقة XML، لا بد من تحميلها إلى كائن DOM XML.

محلل XML يمكن قراءة نص عادي وتحويله إلى كائن DOM XML.

تحليل سلسلة نص

يوزع هذا المثال سلسلة نصية إلى كائن DOM XML، واستخراج المعلومات منه مع جافا سكريبت:

مثال

<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 and IE6)

الإصدارات القديمة من إنترنت إكسبلورر (IE5 and IE6) لا تدعم الكائن مدعوم.

للتعامل مع IE5 وIE6، معرفة ما اذا كان المتصفح يدعم الكائن مدعوم، وإلا خلق ActiveXObject:

مثال

if (window.XMLHttpRequest) {
    // code for modern browsers
    xmlhttp = new XMLHttpRequest();
 } else {
    // code for old IE browsers
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
انها محاولة لنفسك »

الإصدارات القديمة من إنترنت إكسبلورر (IE5 and 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);
} 
انها محاولة لنفسك »
أمثلة

المزيد من الأمثلة

استرداد معلومات رأس مع getAllResponseHeaders()
استرداد معلومات رأس من مورد (file) .

استرداد معلومات رأس معينة مع getResponseHeader()
استرداد معلومات رأس معينة من الموارد (file) .

استرداد محتوى ملف ASP
كيف يمكن لصفحة ويب يمكن الاتصال مع خادم الويب في حين أن النوع المستخدم الأحرف في حقل الإدخال.

استرداد المحتوى من قاعدة بيانات
كيف يمكن لصفحة على شبكة الإنترنت يمكن أن تجلب المعلومات من قاعدة بيانات مع كائن مدعوم.

استرداد المحتوى من ملف XML
إنشاء مدعوم لاسترداد البيانات من ملف XML وعرض البيانات في جدول HTML.


❮ السابق التالي الفصل ❯