AJAX - شیء XMLHttpRequest

XMLHttpRequest بنای AJAX است

  1. ایجاد XMLHttpRequest
  2. تعریف تابع بازگشتی
  3. XMLHttpRequest باز می‌شود
  4. درخواست به سرور ارسال می‌شود

XMLHttpRequest

همه مرورگرهای مدرن از آن پشتیبانی می‌کنند XMLHttpRequest.

XMLHttpRequest شبه‌افزار برای تبادل داده‌ها با سرور وب در پس‌زمینه است. این به این معناست که می‌توان بخشی از محتوای وب‌سایت را به‌روزرسانی کرد بدون اینکه کل صفحه دوباره بارگذاری شود.

ایجاد XMLHttpRequest

همه مرورگرهای مدرن (Chrome، Firefox، IE، Edge، Safari، Opera) XMLHttpRequest داخلی دارند. XMLHttpRequest.

شیوه‌نویسی ایجاد XMLHttpRequest:

variable = new XMLHttpRequest();

تعریف تابع بازگشتی

توابع بازگشتی توابعی هستند که به عنوان پارامتر به یک تابع دیگر منتقل می‌شوند.

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

xhttp.onload = function() {
  // کاری که باید انجام شود زمانی که پاسخ آماده شود
}

ارسال درخواست

برای ارسال درخواست به سرور می‌توانید از XMLHttpRequest استفاده کنید open() و send() روش:

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

مثال

// ایجاد XMLHttpRequest
const xhttp = new XMLHttpRequest();
// تعریف تابع بازگشتی
xhttp.onload = function() {
  // می‌توانید در اینجا داده‌ها را استفاده کنید
}
// ارسال درخواست
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

با دست خود امتحان کنید

دسترسی بین دامنه‌ها (Access Across Domains)

به دلیل دلایل امنیتی، مرورگرهای مدرن دسترسی بین دامنه‌ها را نمی‌پذیرند.

این بدان معناست که وب‌سایت و فایل XML که سعی در بارگذاری آن دارد باید در یک سرور باشند.

مثال‌های موجود در CodeW3C.com XML فایل‌های باز شده در دامنه CodeW3C.com هستند.

اگر می‌خواهید مثال بالا را در یکی از صفحات خود استفاده کنید، فایل XML بارگذاری شده باید در سرور خود شما باشد.

روش‌های XMLHttpRequest

روش توضیح
new XMLHttpRequest() ایجاد XMLHttpRequest جدید.
abort() لغو درخواست فعلی.
getAllResponseHeaders() بازگشت اطلاعات سربرگ.
getResponseHeader() بازگشت اطلاعات سربرگ خاص.
open(method, url, async, user, psw)

تعیین درخواست.

  • methodنوع درخواست GET یا POST
  • urlموقعیت فایل
  • asyncبله (همزمان) یا خیر (غیرهمزمان)
  • userنام کاربری انتخابی
  • pswپسورد انتخابی
send() ارسال درخواست به سرور، برای درخواست‌های GET.
send(string) ارسال درخواست به سرور، برای درخواست‌های POST.
setRequestHeader() افزودن یک برچسب/مقدار به سربرگ‌های ارسالی.

خصوصیات XMLHttpRequest

ویژگی توضیح
onload تعریف تابعی که هنگام دریافت (بارگذاری) درخواست فراخوانی می‌شود.
onreadystatechange تعریف تابعی که هنگام تغییر مقادیر readyState فراخوانی می‌شود.
readyState

وضعیت XMLHttpRequest را ذخیره می‌کند.

  • 0: درخواست هنوز تنظیم نشده است
  • 1: اتصال سرور برقرار شده
  • 2: درخواست دریافت شده
  • 3: در حال پردازش درخواست
  • 4: درخواست انجام شده و پاسخ آماده است
responseText با داده‌های متنی پاسخ را بازمی‌گرداند.
responseXML با داده‌های متنی پاسخ را بازمی‌گرداند.
وضعیت

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

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

برای لیست کامل به اینجا بروید مستند مرجع پیام HTTP
statusText با داده‌های XML پاسخ را بازمی‌گرداند.

متن وضعیت را بازمی‌گرداند (مثلاً "OK" یا "Not Found")

ویژگی onload

برای استفاده از XMLHttpRequest، می‌توانید یک تابع بازگشتی تعریف کنید که هنگام دریافت پاسخ درخواست اجرا می‌شود. onload تابع را در این ویژگی تعریف کنید:

مثال

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

با دست خود امتحان کنید

تعداد تابع‌های بازگشتی

اگر در وب‌سایت چندین وظیفه AJAX وجود دارد، باید یک تابع ایجاد کنید که XMLHttpRequest را اجرا می‌کند و برای هر وظیفه AJAX یک تابع بازگشتی ایجاد کنید.

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

مثال

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}
function myFunction1(xhttp) {
  // اینجا عمل است
}
function myFunction2(xhttp) {
  // اینجا عمل است
}

ویژگی onload

readyState وضعیت XMLHttpRequest را ذخیره می‌کند.

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

وضعیت ویژگی و statusText ویژگی وضعیت XMLHttpRequest را ذخیره می‌کند.

ویژگی توضیح
onreadystatechange تابعی را تعریف می‌کند که هنگام تغییر readyState属性 فراخوانی می‌شود.
readyState

وضعیت XMLHttpRequest را ذخیره می‌کند.

  • 0: درخواست هنوز تنظیم نشده است
  • 1: اتصال سرور برقرار شده
  • 2: درخواست دریافت شده
  • 3: در حال پردازش درخواست
  • 4: درخواست انجام شده و پاسخ آماده است
وضعیت

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

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

برای لیست کامل به اینجا بروید مستند مرجع پیام HTTP
statusText statusText

برگردانیدن متن حالت (مثلاً "OK" یا "Not Found").

هر بار که readyState تغییر کند، تابع onreadystatechange فراخوانی می‌شود. 4 و status 200 وقتی که پاسخ آماده است:

مثال

function loadDoc() {
  const 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");
  xhttp.send();
}

با دست خود امتحان کنید

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