۲۵
آبان

جلسه ۹۶ : دریافت پاسخ از سرور در AJAX

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

با عرض سلام خدمت کاربران محترم سایت پی وی لرن. در جلسات قبل به آموزش شی XHR و نحوه ارسال درخواست به سرور توسط متد های این شی پرداختیم.
در این جلسه نیز دریافت پاسخ از سرور در AJAX و استفاده از Callback Function در Ajax را با استفاده از این شی را یاد خواهیم گرفت.

فهرست

خاصیت onreadystatechange

خاصیت readyState وضعیت XHR را در خود نگه می دارد.

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

این خاصیت ها را در جلسه آموزش شی XHR توضیح داده ایم.

خصوصیت onreadystatechange یک تابع را زمانیکه حالت readyState تغییر می کند، اجرا می کند.

خصوصیت status و خصوصیت statusText وضعیت XMLHttpRequest را حفظ می کند.

خصوصیت	توضیحات
onreadystatechange	تعریف یک تابع را وقتی که propertyState property تغییر می کند فراخوانی می کند.
readyState	دارای وضعیت XMLHttpRequest است: ۰: درخواست اولیه نشده است. ۱: اتصال به سرور برقرار شد. ۲: درخواست دریافت شد. ۳: درخواست پردازش. ۴: درخواست تکمیل شده و پاسخ آماده است.
status	۲۰۰: “OK” ۴۰۳: “Forbidden” ۴۰۴: “Page not found” برای یک لیست کامل به Http Messages Reference مراجعه کنید
statusText	وضعیت (“status-text (e.g. “OK” or “Not Found را برمی گرداند.

وقتی که readyState 4 و وضعیت ۲۰۰ هست، پاسخ آماده است:

مثال : ارسال پاسخ در وضعیت 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();
}

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

}

استفاده از Callback Function در Ajax

یک Callback Function یک تابع را به عنوان پارامتر به نابعی دیگر ارسال می کند.

اگر شما بیش از یک کار یا وظیفه در وب سایت دارید، باید یک تابع برای اجرای شی XHR ایجاد کنید و هر وظیفه را به این تابع callback fuction کنید.

مثال : استفاده از callback function

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
}

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	response data را در قالب رشته می گیرد.
responseXML	response data را در قالب داده ی XML می گیرد.

متدهای پاسخ سرور

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

خاصیت responseText

این خاصیت پاسخ سرور را در قالب یک رشته string بر می گرداند.

مثال:

مثال : خاصیت responseText

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

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

خاصیت responseXML

شی XHR یک مفسر xml درون خود دارد.

این خاصیت پاسخ سرور را در قالب یک شی XML DOM بر می گرداند.

مثال:

مثال : خصوصیت responseXML

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

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

متد ()getAllResponseHeadres

این متد تمام هدر های اطلاعات دریافتی از سرور را بر می گرداند.

مثال:

مثال :

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML =
    this.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();

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

جلسه آموزش دریافت پاسخ از سرور در Ajax نیز به پایان رسید.
در جلسه بعد به آموزش کار با پایگاه داده در Ajax خواهیم پرداخت. با ما همراه باشید.

QR: جلسه ۹۶ : دریافت پاسخ از سرور در AJAX

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۹۶ : دریافت پاسخ از سرور در AJAX

خاصیت onreadystatechange

استفاده از Callback Function در Ajax

خصوصیات پاسخ سرور

متدهای پاسخ سرور

خاصیت responseText

خاصیت responseXML

متد ()getAllResponseHeadres

متد ()getResponseHeader

لیست مطالب دوره

کار با فرم ها

اشیا

توابع

HTML DOM

BOM

AJAX

JSON

مقایسه ی جاوا اسکریپت با jQuery

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ