JavaScript - AJAX Response

JavaScript - استجابة AJAX (AJAX Response)

🔸 بعد إرسال الطلب باستخدام XMLHttpRequest، يقوم السيرفر بإرجاع استجابة. تُستخدم خاصية responseText لقراءة هذه الاستجابة على شكل نص، وresponseXML عند التعامل مع XML.

---

🔹 مثال على عرض الاستجابة كنص (Text)

const xhttp = new XMLHttpRequest();

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

xhttp.open("GET", "data.txt", true);
xhttp.send();

📌 this.responseText تحتوي على محتوى الملف الذي أُعيد من السيرفر.

---

🔹 استلام استجابة بصيغة XML

const xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    const xmlDoc = this.responseXML;
    const items = xmlDoc.getElementsByTagName("item");
    document.getElementById("demo").innerHTML =
      items[0].childNodes[0].nodeValue;
  }
};

xhttp.open("GET", "data.xml", true);
xhttp.send();

📌 responseXML تُعيد محتوى الاستجابة ككائن XML يمكن التعامل معه عبر DOM.

---

🔹 التعامل مع الأخطاء

xhttp.onreadystatechange = function () {
  if (this.readyState == 4) {
    if (this.status == 200) {
      console.log("تمت المعالجة بنجاح");
    } else {
      console.log("حدث خطأ: " + this.status);
    }
  }
};

📌 يُفضل دائمًا التحقق من status لتفادي عرض بيانات غير صحيحة.

---

⚠️ ملاحظات مهمة

• الاستجابة يمكن أن تكون HTML, JSON, XML أو حتى نص عادي.
• استخدم responseText للبيانات النصية وresponseXML للبيانات بتنسيق XML.
• تحقق دائمًا من readyState وstatus قبل التعامل مع البيانات.