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

خاصیت onreadystatechange

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

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

 

رویداد onreadystatechange چهار مرتبه (1-4)، یک بار برای هر تغییر در حالت readyState فعال می شود.

استفاده از یک تابع فراخوانی

یک تابع callback ،  یک تابع به عنوان یک پارامتر به یک تابع دیگر منتقل می شود.

 

اگر بیش از یک کار AJAX در یک وب سایت دارید، باید یک تابع را برای اجرای شیء XMLHttpRequest ایجاد کنید و یک تابع فراخوانی برای هر کار 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
داده های پاسخ را به عنوان داده های XML دریافت کنید responseXML

 

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

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

خاصیت responseText

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

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

ویژگی responseXML

شیء XML HttpRequest یک  XML سرخود(built-in) دارد .

 

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

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<p id=”demo”></p>

<script>
var xhttp, xmlDoc, txt, x, i;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xmlDoc = this.responseXML;
txt = “”;
x = xmlDoc.getElementsByTagName(“ARTIST”);
for (i = 0; i < x.length; i++) {
txt = txt + x[i].childNodes[0].nodeValue + “<br>”;
}
document.getElementById(“demo”).innerHTML = txt;
}
};
xhttp.open(“GET”, “cd_catalog.xml”, true);
xhttp.send();
</script>

</body>
</html>

متد  getAllResponseHeaders

متد  getAllResponseHeaders تمام اطلاعات هدر را از پاسخ سرور باز می کند.

مثال :

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};

متد getResponseHeader

متد getResponseHeader  اطلاعات هدر خاصی را از پاسخ سرور باز می کند.

مثال:

<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<p>The getResponseHeader() function is used to return specific header information from a resource, like length, server-type, content-type, last-modified, etc:</p>
<p>Last modified: <span id="demo"></span></p>
<script>
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();
</script>
</body>
</html>