AJAX (Asynchronous JavaScript and XML) تکنیکی است که به ما اجازه می‌دهد بدون بارگذاری مجدد صفحه، داده‌ها را از سرور دریافت یا به سرور ارسال کنیم.

📌 با AJAX می‌توانیم وب‌اپلیکیشن‌های دینامیک‌تر، سریع‌تر و کاربرپسندتر بسازیم.

🔹 1. AJAX چیست؟

• مخفف: Asynchronous JavaScript and XML

• نیازی به بارگذاری مجدد صفحه ندارد.

• می‌تواند با سرور در پس‌زمینه تبادل داده داشته باشد.

• فرمت داده‌ها می‌تواند XML, JSON, یا متن ساده باشد (امروزه JSON رایج‌تر است).

🔹 2. تکنولوژی‌های پشت AJAX

AJAX ترکیبی از چند تکنولوژی است:

1. HTML / CSS → برای ساخت رابط کاربری

2. JavaScript → برای منطق برنامه

3. DOM → برای تغییر محتوا و ساختار صفحه

4. XMLHttpRequest / Fetch API → برای ارسال درخواست به سرور

5. JSON / XML → برای تبادل داده

🔹 3. نحوه کار AJAX

1. رویدادی (مثل کلیک روی دکمه) اتفاق می‌افتد.

2. جاوااسکریپت یک درخواست AJAX به سرور می‌فرستد.

3. سرور داده را پردازش کرده و پاسخ می‌دهد.

4. جاوااسکریپت داده دریافت‌شده را در صفحه نمایش می‌دهد بدون رفرش کامل صفحه.

🔹 4. مثال با XMLHttpRequest

let xhttp = new XMLHttpRequest();

xhttp.onload = function() {
  document.getElementById("demo").innerText = this.responseText;
};

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

📌 این کد محتوای فایل data.txt را از سرور می‌گیرد و در صفحه نمایش می‌دهد.

🔹 5. مثال مدرن‌تر با Fetch API

fetch("data.txt")
  .then(response => response.text())
  .then(data => {
    document.getElementById("demo").innerText = data;
  })
  .catch(err => console.error("Error:", err));

🔹 6. کاربردهای AJAX

• نمایش محتوای جدید بدون بارگذاری صفحه

• جستجوی زنده (Live Search)

• اعتبارسنجی فرم‌ها به صورت آنی

• بارگذاری داده‌ها در پس‌زمینه (infinite scroll)

• چت آنلاین و اپلیکیشن‌های real-time

✅ خلاصه

• AJAX → تکنیکی برای تبادل داده با سرور بدون رفرش صفحه

• ابزارها: XMLHttpRequest یا Fetch API

• داده‌ها معمولاً در قالب JSON رد و بدل می‌شوند

• کاربردها: چت، جستجوی زنده، آپدیت محتوا، بارگذاری داده در پس‌زمینه