۲۸
اردیبهشت

جلسه ۲۳ : آموزش کار با Server Response در AJAX

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

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

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و علاقمندان و کاربرانی که علاقمند به یادگیری دوره XML هستند. در جلسه گذشته در خصوص Request و کاربرد آن در AJAX مطالبی مطرح شد. در این جلسه و در بیست و سومین جلسه از دوره آموزش XML با آموزش کار با Server Response در AJAX همراه شما هستیم.

آموزش کار با Server Response در AJAX

ویژگی onreadystatechange

ویژگی readyState وضعیت XMLHttpRequest را نگه می دارد.
زمانی که حالت readyState تغییر می کند ویژگی onreadystatechange تعریف یک تابع را اجرا می کند.
ویژگی های status و statusText وضعیت XMLHttpRequest object را حفظ می نماید.

ویژگی	توضیحات
onreadystatechange	هنگام تغییر ویژگی readyState تابعی را که قرار است فراخوانی شود تعریف می نماید.
readyState	وضعیت XMLHttpRequest را نگه می دارد. ۰: درخواست اولیه نشده است ۱: اتصال به سرور برقرار شد ۲: درخواست دریافت شد ۳: درخواست پردازش ۴: درخواست تکمیل شده و پاسخ آماده است
status	۲۰۰: “خوب” ۴۰۳: “ممنوع” ۴۰۴: “صفحه یافت نشد” برای مشاهده لیست کامل به Http Messages Reference مراجعه کنید
statusText	وضعیت متن (مثلا “OK” یا “Not Found”) را بازمی گرداند

هر زمان که readyState تغییر کند تابع onreadystatechange فراخوانی می گردد.
و هرگاه که 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(); 
}

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 چهار مرتبه (۱-۴)، یک بار برای هر تغییر در readyState فعال می شود.

استفاده از تابع Callback

یک تابع Callback تابعی است که به عنوان یک پارامتر به یک تابع دیگر منتقل می شود.
اگر بیش از یک AJAX task در وب سایت خود دارید، در آن صورت باید یک تابع برای اجرای XMLHttpRequest object ایجاد کنید و یک تابع callback برای هر یک از کارهای 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) {
  // 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

}

ویژگی های Response Properties

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

روش های Response Properties

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

Property responseText

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

مثال :

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

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

ویژگی responseXML

XML HttpRequest object دارای یک تجزیه کننده XML است.
ویژگی responseXML پاسخ سرور را به عنوان یک XML DOM object بازگردانی می کند.
با استفاده از این ویژگی می توانید پاسخ را به عنوان یکXML DOM object تجزیه کنید:

مثال :

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

روش ()getAllResponseHeaders

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

مثال :

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 اطلاعات 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();

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

کلام آخر

در این جلسه آموزش کار با Server Response در AJAX را به علاقمندان این دوره ارائه کردیم.
در جلسه بعدی شما را به فراگیری کار با PHP در AJAX دعوت می کنیم.
با پی وی لرن همراه باشید.

QR: جلسه ۲۳ : آموزش کار با Server Response در AJAX

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

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

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

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

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

جلسه ۲۳ : آموزش کار با Server Response در AJAX

مقدمه

آموزش کار با Server Response در AJAX

ویژگی onreadystatechange

استفاده از تابع Callback

ویژگی های Response Properties

روش های Response Properties

Property responseText

ویژگی responseXML

روش ()getAllResponseHeaders

روش ()getResponseHeader

کلام آخر

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

XML AJAX

XML DOM

XPath Tutorial

XSLT Tutorial

XQuery

DTD

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ