AJAX - پاسخ سرور

از موتو کد، دانشنامهٔ برنامه‌نویسی


ویژگی onreadystatechange[ویرایش | ویرایش]

ویژگی readyState وضعیت XMLHttpRequest را نگهداری می‌کند. [۱]

ویژگی onreadystatechange تابعی را که می‌بایست زمانی که مقدار ویژگی readyState تغییر کرد اجرا شود را مشخص می‌کند.

ویژگی status و statusText وضیعت شیء XMLHttpRequest را نگه داری می‌کند.

ویژگی توضیحات
onreadystatechange تابعی را که می بایست زمانی که Ready state تغییر کرد، اجرا شود را مشخص می‌کند
readyState وضعیت XMLHttpRequest را نگهداری می‌کند.

۰: درخواست مقدار دهی نشده‌است

۱: ارتباط با سرور برقرار شد

۲: درخواست دریافت شد

۳: درخواست در حال پردازش

۴: پردازش درخواست به پایان رسید، پاسخ (Response) آماده است

status شماره وضعیت یک درخواست را برمی‌گرداند

200: "ok"

403: "forbidden"

404: "not found"

<translate> نکته</translate> <translate> نکته:</translate> برای مشاهده یک لیست کامل به مرجع کامل پیام‌های HTTP مراجعه کنید

statusText متن وضعیت درخواست مانند ("OK" or "Not Found") را برمی‌گرداند.

تابعی که برای ویژگی onreadystatechange مشخص شده‌است هر دفعه که مقدار readyState تغییر کند، فراخوانی می‌شود.

زمانی که پاسخ آماده است، مقدار readyState برابر با ۴ و مقدار ویژگی status برابر با ۲۰۰ است.

مثال[ویرایش | ویرایش]

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 چهار بار اتفاق می‌افتد (۴–۱)، یک بار برای هر تغییر ویژگی.

استفاده از یک تابع Callback[ویرایش | ویرایش]

تابع Callback تابعی است که پارامتری را به یک تابع دیگر پاس می‌دهد.

اگر شما بیش از یک کار Ajax در یک وب‌سایت دارید، شما می‌بایست یک تابع برای اجرای شیء XMLHttpRequest بسازید و برای کار AJAX یک تابع callback بسازید.

فراخوانی تابع می‌بایست شامل URL و تابعی باشد که می‌بایست زمانی که پاسخ آماده بود فراخوانی شود، باشد.

مثال[ویرایش | ویرایش]

loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}

function myFunction1(xhttp) {
  // action goes here
}
function myFunction2(xhttp) {
  // action goes here
}

ویژگی‌های پاسخ سرور[ویرایش | ویرایش]

ویژگی توضیحات
responseText داده موجود در پاسخ سرور را به صورت رشته متنی دریافت می‌کند
responseXML داده موجود در پاسخ سرور را به صورت XML دریافت می‌کند

متدهای پاسخ سرور[ویرایش | ویرایش]

متد توضیحات
getResponseHeader() اطلاعات header به خصوصی را ازسرور دریافت می‌کند
getAllResponseHeaders() تمام اطلاعات header را از سروردریافت می‌کند

ویژگی responseText[ویرایش | ویرایش]

ویژگی responseText پاسخ سرور را به صورت یک رشته متنی جاوا اسکریپت برمی‌گرداند، و شما می‌توانید از آن به صورت زیر استفاده کنید:

مثال[ویرایش | ویرایش]

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

ویژگی responseXML[ویرایش | ویرایش]

شیء XMLHttpRequest یک تبدیل کننده (parser) تعبیه شده یا پیشفرض XML دارد.

ویژگی responseXML پاسخ سرور را به صورت یک شیء XML DOM برمی‌گرداند.

با استفاده از این ویژگی شما می‌توانید پاسخ را به صورت یک شیء XML DOM تبدیل (parse) کنید:

مثال[ویرایش | ویرایش]

فایل "cd_catalog.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", "cd_catalog.xml", true);
xhttp.send();
شما مطالب بیشتری را درمورد XML DOM در فصل‌های DOM این آموزش خواهید آموخت.

متد getAllResponseHeaders()[ویرایش | ویرایش]

متد getAllResponseHeaders() تمامی اطلاعات header از پاسخ (Response) سرور را برمی‌گرداند.

مثال[ویرایش | ویرایش]

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

متد getResponseHeader()[ویرایش | ویرایش]

متد getResponseHeader() اطلاعات header به خصوصی را از پاسخ سرور برمی‌گرداند.

مثال[ویرایش | ویرایش]

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();

منابع آموزشی[ویرایش]