AJAX - پاسخ سرور

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
تعریف شیء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
۱مقدمه
۲ AJAX XMLHttp
۳درخواست AJAX
۴پاسخ سرور
۵مثال‌های XML در AJAX
۶مثال‌های PHP در AJAX
۷مثال‌های ASP در AJAX
۸مثال پایگاه داده در AJAX
۹نرم‌افزارهای XML
۱۰مثال‌های AJAX
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

ویژگی onreadystatechange

ویژگی readyState وضعیت XMLHttpRequest را نگهداری می‌کند. [۱]

ویژگی onreadystatechange تابعی را که می‌بایست زمانی که مقدار ویژگی readyState تغییر کرد اجرا شود را مشخص می‌کند.

ویژگی status و statusText وضیعت شیء XMLHttpRequest را نگه داری می‌کند.

ویژگی توضیحات
onreadystatechange تابعی را که می بایست زمانی که Ready state تغییر کرد، اجرا شود را مشخص می‌کند
readyState وضعیت XMLHttpRequest را نگهداری می‌کند.

۰: درخواست مقدار دهی نشده‌است

۱: ارتباط با سرور برقرار شد

۲: درخواست دریافت شد

۳: درخواست در حال پردازش

۴: پردازش درخواست به پایان رسید، پاسخ (به انگلیسی: Response) آماده است

status شماره وضعیت یک درخواست را برمی‌گرداند

200: "ok"

403: "forbidden"

404: "not found"

<translate> نکته</translate>  نکته: برای مشاهده یک لیست کامل به مرجع کامل پیام‌های HTTP مراجعه کنید

statusText متن وضعیت درخواست مانند ("OK" or "Not Found") را برمی‌گرداند.

تابعی که برای ویژگی onreadystatechange مشخص شده‌است هر دفعه که مقدار readyState تغییر کند، فراخوانی می‌شود.

زمانی که پاسخ آماده است، مقدار readyState برابر با ۴ و مقدار ویژگی status برابر با ۲۰۰ است.

مثال

 1 function loadDoc() {
 2   var xhttp = new XMLHttpRequest();
 3   xhttp.onreadystatechange = function() {
 4     if (this.readyState == 4 && this.status == 200) {
 5       document.getElementById("demo").innerHTML =
 6       this.responseText;
 7     }
 8   };
 9   xhttp.open("GET", "ajax_info.txt", true);
10   xhttp.send();
11 }
رویداد onreadystatechange چهار بار اتفاق می‌افتد (۴–۱)، یک بار برای هر تغییر ویژگی.

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

تابع Callback تابعی است که پارامتری را به یک تابع دیگر پاس می‌دهد.

اگر شما بیش از یک کار Ajax در یک وب‌سایت دارید، شما می‌بایست یک تابع برای اجرای شیء XMLHttpRequest بسازید و برای کار AJAX یک تابع callback بسازید.

فراخوانی تابع می‌بایست شامل URL و تابعی باشد که می‌بایست زمانی که پاسخ آماده بود فراخوانی شود، باشد.

مثال

 1 loadDoc("url-1", myFunction1);
 2 
 3 loadDoc("url-2", myFunction2);
 4 
 5 function loadDoc(url, cFunction) {
 6   var xhttp;
 7   xhttp = new XMLHttpRequest();
 8   xhttp.onreadystatechange = function() {
 9     if (this.readyState == 4 && this.status == 200) {
10       cFunction(this);
11     }
12   };
13   xhttp.open("GET", url, true);
14   xhttp.send();
15 }
16 
17 function myFunction1(xhttp) {
18   // action goes here
19 }
20 function myFunction2(xhttp) {
21   // action goes here
22 }

ویژگی‌های پاسخ سرور

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

متدهای پاسخ سرور

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

ویژگی responseText

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

مثال

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

ویژگی responseXML

شیء XMLHttpRequest یک تبدیل کننده (به انگلیسی: parser) تعبیه شده یا پیشفرض XML دارد.

ویژگی responseXML پاسخ سرور را به صورت یک شیء XML DOM برمی‌گرداند.

با استفاده از این ویژگی شما می‌توانید پاسخ را به صورت یک شیء XML DOM تبدیل (parse) کنید:

مثال

فایل "cd_catalog.xml" را درخواست می‌کند و نتیجه را تبدیل می‌کند:

1 xmlDoc = xhttp.responseXML;
2 txt = "";
3 x = xmlDoc.getElementsByTagName("ARTIST");
4 for (i = 0; i < x.length; i++) {
5   txt += x[i].childNodes[0].nodeValue + "<br>";
6 }
7 document.getElementById("demo").innerHTML = txt;
8 xhttp.open("GET", "cd_catalog.xml", true);
9 xhttp.send();
شما مطالب بیشتری را درمورد XML DOM در فصل‌های DOM این آموزش خواهید آموخت.

متد getAllResponseHeaders()

متد getAllResponseHeaders() تمامی اطلاعات header از پاسخ (به انگلیسی: Response) سرور را برمی‌گرداند.

مثال

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

متد getResponseHeader()

متد getResponseHeader() اطلاعات header به خصوصی را از پاسخ سرور برمی‌گرداند.

مثال

1 var xhttp = new XMLHttpRequest();
2 xhttp.onreadystatechange = function() {
3   if (this.readyState == 4 && this.status == 200) {
4     document.getElementById("demo").innerHTML =
5     this.getResponseHeader("Last-Modified");
6   }
7 };
8 xhttp.open("GET", "ajax_info.txt", true);
9 xhttp.send();


منابع آموزشی