پاسخ (AJAX Response)
اینجا «پاسخ آژاکس» را می خوانیم. آژاکس یعنی دریافت پاسخ بدون رفرش صفحه. مثل وقتی نمره آنلاین، سریع روی همان صفحه می آید.
onreadystatechange و readyState
ویژگی readyState وضعیت درخواست را نگه می دارد. رویداد onreadystatechange هر بار با تغییر وضعیت اجرا می شود. همچنین status و statusText نتیجه HTTP را نشان می دهند.
- یک تابع روی onreadystatechange تنظیم کن.
- در حالت 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();
}
خلاصه وضعیت ها و کدها
| ویژگی | توضیح |
|---|---|
| readyState | 0: شروع نشده، 1: اتصال، 2: دریافت، 3: پردازش، 4: آماده |
| status | مانند 200 OK، 403 Forbidden، 404 Not Found |
| statusText | متن وضعیت مانند "OK" |
نکته: رویداد onreadystatechange چهار بار برای وضعیت های 1 تا 4 رخ می دهد.
الگوی تابع بازگشتی (Callback)
تابع بازگشتی (Callback) یعنی تابعی که به تابع دیگر پاس می دهی تا بعداً اجرا شود. برای چند کار آژاکسی، یک اجراکننده و چند Callback بساز.
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 DOM |
متدهای خواندن هدر پاسخ
| متد | توضیح |
|---|---|
| getResponseHeader() | گرفتن یک هدر خاص |
| getAllResponseHeaders() | گرفتن همه هدرها |
responseText: متن پاسخ
می خواهی متن خام را نشان بدهی؟ از responseText استفاده کن.
document.getElementById("demo").innerHTML = xhttp.responseText;
responseXML: پاسخ به صورت XML
شیء XMLHttpRequest پارسر XML داخلی دارد. می توانی XML را مثل درخت بخوانی.
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 استفاده کن.
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.getResponseHeader("Last-Modified");
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
پیوندهای داخلی
برای ارسال، صفحه ارسال درخواست آژاکس را ببین. برای شروع از ابتدا، ساخت شیء XMLHttpRequest را بخوان. همچنین برای XML بعدی، فایل XML در AJAX را دنبال کن.
جمع بندی سریع
- پاسخ آژاکس با readyState و status سنجیده می شود.
- responseText متن خام را برمی گرداند.
- responseXML یک شیء DOM می دهد.
- getResponseHeader و getAllResponseHeaders هدرها را می دهند.
- Callback ها کد را تمیز و ماژولار می کنند.