گروه مقاله : طراحی سایت
تاريخ انتشار : 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();
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد