AJAX - استجابة الخادم

خاصية onreadystatechange

readyState الخاصية تحتوي على حالة XMLHttpRequest.

onreadystatechange تعرف الدالة التي يتم تنفيذها عند تغيير خاصية readyState.

status الخاصية statusText الخاصية تحتوي على حالة XMLHttpRequest.

خصائص استجابة الخادم طريقة
onreadystatechange تم تعريف الدالة التي يتم استدعاؤها عند تغيير الخاصية readyState.
readyState

تم حفظ حالة XMLHttpRequest.

  • 0: لم يبدأ الطلب بعد
  • 1: تم إنشاء اتصال بالخادم
  • 2: تم استقبال الطلب
  • 3: يتم معالجة الطلب
  • 4: تم إكمال الطلب واستجابة جاهزة
status
  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Page not found"

للحصول على قائمة كاملة، يرجى زيارة دليل رسائل Http

statusText تم رجوع نص حالة (مثل "OK" أو "Not Found")

كلما readyState سيتم استدعاء دالة onreadystatechange.

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

مثال

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            this.responseText;
       }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); 
} 

جرب بنفسك

ملاحظة:onreadystatechange تُتم إطلاقها خمس مرات (0-4)، كل مرة readyState كلها تتغير.

استخدام الدوال الاستدعاء

الدالة الاستدعاء هي دالة يتم تمريرها كمعامل إلى دالة أخرى.

إذا كان لديك عدة مهام AJAX في موقعك، يجب عليك إنشاء دالة تنفيذ XMLHttpRequest وكذلك دالة استدعاء مرتبطة لكل مهمة AJAX.

الوظيفة يجب أن تحتوي على URL والدالة التي سيتم استدعاؤها عند استعداد الاستجابة.

مثال

يجب أن يحتوي هذا الدالة على URL و الدالة التي سيتم استدعاؤها عند استعداد الاستجابة.
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
  function loadDoc(url, cFunction) {
  var xhttp;
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      xhttp = new XMLHttpRequest();
    }
  };
  cFunction(this);
  xhttp.send();
}
xhttp.open("GET", url, true);
  function myFunction2(xhttp) {
 } 
function myFunction1(xhttp) {
  function myFunction2(xhttp) {
 } 

جرب بنفسك

// العمل هنا

خصائص استجابة الخادم طريقة
خصائص responseText خصائص
responseXML الحصول على بيانات الاستجابة في شكل نص

الحصول على بيانات الاستجابة في شكل XML

طريقة استجابة الخادم طريقة
getResponseHeader() وصف
getAllResponseHeaders() من الخادم، يمكنك الحصول على معلومات رأس معينة

من خلال الخادم، يمكنك الحصول على جميع معلومات الرأس

خصائص responseText خصائص responseText، تُرجع استجابة الخادم كنص JavaScript، لذا يمكنك:

مثال

document.getElementById("demo").innerHTML = xhttp.responseText;

جرب بنفسك

خصائص responseXML

يحتوي XML HttpRequest على معالج XML مدمج.

ResponseXML الخصائص تُرجع استجابة الخادم كمنتج XML DOM.

باستخدام هذا الخصائص، يمكنكتحليلللمعالجة XML DOM:

مثال

طلب ملف music_list.xml،ثم قم بتحليل الاستجابة:

xmlDoc = xhttp.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;
xhttp.open("GET", "music_list.xml", true);
xhttp.send();

جرب بنفسك

ستتعلم الكثير عن XML DOM في هذا الفصل من DOM في هذا الدليل.

طريقة getAllResponseHeaders()

getAllResponseHeaders() تستعيد هذه الطريقة جميع المعلومات الرأسية من استجابة الخادم.

مثال

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
  }
};

جرب بنفسك

طريقة getResponseHeader()

getResponseHeader() يستعيد هذا الطريقة معلومات رأسية محددة من استجابة الخادم.

مثال

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send(); 

جرب بنفسك