گروه مقاله : طراحی سایت
تاريخ انتشار : 1396/07/16 - 15:38
كد :7885

پاسخ دهی به سرور با ای جکس

در این مقاله نحوه دریافت بازخورد از سرور توسط آجاکس را بررسی می کنیم.

پاسخ دهی به سرور با ای جکس

ویژگی onreadystatechange

ویژگی readyState وضعیت درخواست XMLHttpRequest را نگه میدارد.

صفت onreadystatechange یک عملگر را برای پردازش تغییر صفت readyState تعریف می کند.

صفت status و صفت statusText وضعیت شیئ XMLHttpRequest را نگه داری می کنند.

 

ویژگی

توصیف

onreadystatechange

تعریف یک عملگر برای فراخوانی در هنگامی که صفت readyState تغییر می کند .

readyState

نگه داری وضعیت درخواست XMLHttpRequest

0: درخواست ایجاد نشده است

1: اتصال به سرور پایدار است

2: درخواست دریافت شده است.

3: پردازش درخواست

4: پردازش درخواست به اتمام رسیده و پاسخ آماده است.

status

200: پیام OK

403: بازدید ممنوع است

404: صفحه یافت نشد

statusText

بازگردانی درخواست the status-text ("OK" or "Not Found")

 

عملگر onreadystatechange هربار که readyState تغییر می کند فراخوانی میشود.

هنگامیکه 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 چهار بار فراخوانی میشود. هربار برای هر تغییر در readyState .

استفاده از عملگر Callback

یک عملگر callback یک عملگراست که بصورت یک پارامتر در یک عملگر دیگر ارسال میشود.

اگر شما در وبسایت خود بیش از یک دستور AJAX دارید شما باید یک عملگر برای پردازش شیئ XMLHttpRequest استفاده کرده و از یک عملگر callback برای هر یک از دستورات AJAX بهره بگیرید.

فراخوانی عملگر باید دارای آدرس باشد و همچین باید عملگری که فراخوانی می کنید مشخص باشد.

مثال:

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

بازگردانی اطلاعات هدر خاص از درخواست سرور

getAllResponseHeaders()

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

 

صفت  responseText

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

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

 

صفت responseXML

شیئ XML HttpRequest دارای یک in-built XML parser میباشد.

صفت responseXML به پاسخ سرور بصورت شیئ XML DOM بازمیگردد.

با استفاده از این صفت میتوانید پاسخ را بصورت یک شیئ XML DOM تبدیل کنید.

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() همه اطلاعات هدر را از پاسخ سرور بازمیگرداند:

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

 

براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد

نظرات كاربران :