برای پیاده‌سازی AJAX در جاوااسکریپت، شیء اصلی که استفاده می‌شود XMLHttpRequest است.
این شیء به ما اجازه می‌دهد با سرور ارتباط برقرار کنیم و داده‌ها را بدون بارگذاری مجدد صفحه دریافت یا ارسال کنیم.

🔹 1. ایجاد شیء XMLHttpRequest

let xhttp = new XMLHttpRequest();

📌 با این دستور یک شیء جدید برای ارسال درخواست‌های HTTP می‌سازیم.

🔹 2. متدهای اصلی XMLHttpRequest

🟢 open(method, url, async)

• method → متد درخواست (GET یا POST)

• url → آدرس منبع یا API

• async → پیش‌فرض true (غیرهمزمان)

xhttp.open("GET", "data.txt", true);

🟢 ()send

ارسال درخواست به سرور.

xhttp.send();

🟢 ()setRequestHeader

تنظیم هدر درخواست (معمولاً در متد POST).

xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

🔹 3. ویژگی‌های مهم

• readyState → وضعیت درخواست

  • 0: درخواست ساخته شده

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

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

  • 3: در حال پردازش

  • 4: پاسخ آماده است

• status → وضعیت پاسخ HTTP

  • 200: موفقیت

  • 404: منبع پیدا نشد

  • 500: خطای سرور

• responseText → پاسخ به صورت متن

• responseXML → پاسخ به صورت XML

🔹 4. رویداد onreadystatechange

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerText = this.responseText;
  }
};

📌 وقتی پاسخ آماده شد (readyState == 4) و درخواست موفق بود (status == 200)، داده نمایش داده می‌شود.

🔹 5. مثال کامل (GET Request)

let xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerText = this.responseText;
  }
};

xhttp.open("GET", "data.txt", true);
xhttp.send();

🔹 6. مثال (POST Request)

let xhttp = new XMLHttpRequest();

xhttp.open("POST", "submit.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhttp.send("name=Ali&age=25");

✅ خلاصه

• شیء اصلی AJAX → XMLHttpRequest

• مراحل:

  1. ساخت شیء: ()new XMLHttpRequest

  2. تنظیم درخواست: open(method, url, async)

  3. ارسال درخواست: ()send

  4. پردازش پاسخ با onreadystatechange

• متدها: GET, POST

• پاسخ‌ها: responseText یا responseXML