AJAX - پاسخ سرور

خصوصیت onreadystatechange

readyState وضعیت XMLHttpRequest را نگه می‌دارد.

onreadystatechange تابع تعریف شده برای اجرا هنگام تغییر readyState.

status خصوصیات statusText خصوصیت دارای وضعیت XMLHttpRequest است.

ویژگی توضیح
onreadystatechange تابع تعریف شده برای فراخوانی هنگام تغییر readyState.
readyState

وضعیت XMLHttpRequest ذخیره شده است.

  • 0: درخواست هنوز تنظیم نشده است
  • 1: اتصال به سرور برقرار شده
  • 2: درخواست دریافت شده
  • 3: در حال پردازش درخواست
  • 4: درخواست کامل شده و پاسخ آماده است
status
  • 200: "OK"
  • 403: "ممنوع"
  • 404: "صفحه پیدا نشد"

برای لیست کامل، لطفاً به دستورالعمل‌های پیام 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 و تابعی که هنگام آماده شدن پاسخ فراخوانی می‌شود را شامل شود.}

مثال

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) {
  // عملیات در اینجا انجام می‌شود
 } 
function myFunction2(xhttp) {
  // عملیات در اینجا انجام می‌شود
 }

آزمایش کنید

ویژگی‌های پاسخ سرور

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

روش‌های پاسخ سرور

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

ویژگی responseText

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

مثال

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

آزمایش کنید

ویژگی responseXML

XML HttpRequest object یک parser داخلی XML دارد.

ResponseXML ویژگی‌ها به صورت object XML DOM به سرور بازگردانید.

با استفاده از این ویژگی، شما می‌توانید پاسختحلیلبرای XML DOM object:

مثال

درخواست فایل 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();

آزمایش کنید

شما در این درس از بخش DOM یاد خواهید گرفت که XML 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();

آزمایش کنید