میلاد با سعادت رسول اکرم(ص) و امام صادق(ع) مبارک، (کد تخفیف 35%: MiladeRasol)

سبد خرید (0)

تبلیغات

آموزش آجاکس رویدادها

 رویداد onreadystatechange

هنگامی که یک درخواست به سرور ارسال می شود، ما می خواهیم تا بر اساس پاسخ مورد نظر، برخی اقدامات انجام شوند. 

هرزمان که readyState  تغییر می کند، رویداد onreadystatechange روی می دهد. 

خصوصیت readyState  درواقع وضعیت XMLHttpRequest را در خود نگه داری می کند.

در جدول زیر، سه خصوصیت مهم شیء XMLHttpRequest را مشاهده می کنید:

خصوصیتتوضیحات
onreadystatechange

یک تابع(یا نام آن) را دربردارد که هر زمان که خصوصیت readyState تغییر می کند، به طور اتوماتیک فراخوانی می شود.

readyState

وضعیت XMLHttpRequest را دربر دارد. و از 0 تا 4 متغیر است:

0: درخواست مقدار دهی اولیه نشده است

1: اتصال به سرور برقرار شد

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

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

4: درخواست پایان یافت و پاسخ آماده است

status

200: "OK"
404: صفحه پیدا نشد

در رویداد onreadystatechange، ما مشخص می کنیم که هنگامی که پاسخ سرور آماده ی پردازش است چه اتفاقی می افتد.

هنگامی که readyState برابر با 4 است و status برابر با 200 است، پاسخ آماده است:

مثال

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }
};
خودتان امتحان کنید »

نکته: رویداد onreadystatechange پنج بار روی می دهد( موارد 0 تا 4)، هر بار برای یک تغییر در readyState.


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

یک تابع فراخوانی(callback) یک تابعی است که بعنوان یک پارامتر در یک تابع دیگر به کار می رود. 

اگر شما بیش از یک وظیفه ی آجاکس را در وب سایت خود می خواهید مشخص کنید، شما باید برای ایجاد XMLHttpRequest یک تابع استاندارد ایجاد کنید و آن را برای هر وظیفه ی آجاکس فراخوانی کنید.

تابع فراخوانی باید شامل URL مورد نظر و آنچه که می خواهیم در onreadystatechange انجام دهیم باشد(که احتمالا برای هر فراخوانی متفاوت می باشد):

مثال

function loadDoc(cFunc) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    cFunc(xhttp);
  }
خودتان امتحان کنید »