XMLHttpRequest

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

ساختار و استفاده:

// 1. ایجاد یک شیء XMLHttpRequest

const xhr = new XMLHttpRequest();

// 2. پیکربندی درخواست

xhr.open(‘GET’, ‘https://example.com/api/data’, true); // نوع، URL، و حالت (غیرهمگام)

// 3. تنظیم رویداد برای دریافت پاسخ

xhr.onreadystatechange = function () {

        if (xhr.readyState === 4 && xhr.status === 200) {

             console.log(xhr.responseText); // پردازش پاسخ

          }

};

// 4. ارسال درخواست

xhr.send();

توضیحات:

1. open(): نوع درخواست (مانند GET یا POST)، URL مقصد، و نحوه ارسال (همگام یا غیرهمگام) را تنظیم می‌کند.
2. send(): درخواست را ارسال می‌کند.
3. onreadystatechange: برای مدیریت پاسخ از سرور استفاده می‌شود. وضعیت‌های مختلف با استفاده از readyState بررسی می‌شوند:
   • 0: مقداردهی اولیه (initialization)
   • 1: باز شدن (connection established)
   • 2: ارسال شده (request received)
   • 3: پردازش (processing)
   • 4: تکمیل شده (done)
4. status: وضعیت پاسخ HTTP (مانند 200 برای موفقیت یا 404 برای پیدا نشدن).

مثال استفاده با POST:

const xhr = new XMLHttpRequest();

xhr.open(‘POST’, ‘https://example.com/api/data’, true);

xhr.setRequestHeader(‘Content-Type’, ‘application/json’);

xhr.onreadystatechange = function () {

       if (xhr.readyState === 4 && xhr.status === 201) {

           console.log(‘Data saved:’, xhr.responseText);

}

};

const data = JSON.stringify({ name: ‘John’, age: 30 });

xhr.send(data);

نکات مهم:

• XMLHttpRequest با وجود محبوبیتش در گذشته، اکنون اغلب با fetch یا کتابخانه‌هایی مانند Axios جایگزین شده است.
• پشتیبانی از بازگشت داده‌ها در فرمت‌های مختلف مانند JSON, XML, یا text وجود دارد.
• پشتیبانی از مدیریت خطاها با استفاده از status و onerror.