46- آموزش جاوااسکریپت | آموزش AJAX و XMLHttpRequest

در این بخش، کار با AJAX و XMLHttpRequest را شروع می‌کنیم.
AJAX مخفف عبارت Asynchronous JavaScript and XML است.

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

AJAX چیست؟

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

اما با AJAX می‌توان فقط همان بخشی از داده را که نیاز داریم از سرور دریافت کنیم و بدون رفرش کامل صفحه، رابط کاربری را به‌روزرسانی کنیم. این روش هم سریع‌تر است و هم تجربه کاربری بهتری ایجاد می‌کند.

آیا AJAX فقط با XML کار می‌کند؟

با اینکه XML در نام AJAX وجود دارد، امروزه در بیشتر پروژه‌ها از JSON استفاده می‌شود.
JSON نسبت به XML ساده‌تر، سریع‌تر و رایج‌تر است و بیشتر APIها داده‌ها را در این قالب برمی‌گردانند.

AJAX می‌تواند با فرمت‌های مختلفی کار کند، از جمله:

• JSON
• XML
• متن ساده (Plain Text)

نمونه‌ای از داده در قالب JSON:

{
  "name": "Ali",
  "role": "Developer"
}

نمونه‌ای از داده در قالب XML:

<user>
  <name>Ali</name>
  <role>Developer</role>
</user>

نمونه‌ای از متن ساده:

Hello from the server

AJAX چگونه کار می‌کند؟

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

روند کلی کار به این شکل است:

1. مرورگر یا کلاینت یک درخواست ارسال می‌کند.
2. این درخواست از طریق موتور AJAX و شیء XMLHttpRequest انجام می‌شود.
3. سرور پاسخ را برمی‌گرداند.
4. جاوااسکریپت پاسخ را دریافت می‌کند.
5. فقط بخش موردنیاز رابط کاربری به‌روزرسانی می‌شود.

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

XMLHttpRequest چیست؟

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

کاربرد اصلی XMLHttpRequest این است که امکان ارسال و دریافت داده بین مرورگر و سرور را فراهم می‌کند.

نمونه ساخت یک شیء XMLHttpRequest:

const xhr = new XMLHttpRequest();

به کمک این شیء می‌توان درخواست‌های HTTP ارسال کرد؛ مانند:

• GET
• POST
• PUT
• DELETE

نمونه ساده یک درخواست با XMLHttpRequest:

const xhr = new XMLHttpRequest();

xhr.open('GET', 'data.json', true);

xhr.onload = function () {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

xhr.send();

در این مثال:

• با open نوع درخواست و مسیر فایل مشخص می‌شود.
• با onload پاسخ دریافتی مدیریت می‌شود.
• با send درخواست ارسال می‌شود.

AJAX با چه منابعی کار می‌کند؟

درخواست‌های AJAX می‌توانند به منابع مختلفی ارسال شوند، از جمله:

• فایل‌های محلی مثل فایل JSON
• فایل‌های متنی ساده
• سرور محلی
• APIهای عمومی
• سرویس‌های خارجی

برای مثال، می‌توان به APIهایی مثل این‌ها درخواست فرستاد:

• Google Maps API
• GitHub API
• Weather API

دسترسی به APIهای خارجی

وقتی از APIهای خارجی استفاده می‌کنیم، معمولاً باید چند نکته را در نظر بگیریم:

CORS

بسیاری از APIها باید CORS را فعال کرده باشند تا بتوان از دامنه‌ای دیگر به آن‌ها درخواست فرستاد.
CORS امکان ارتباط بین دامنه‌های متفاوت را فراهم می‌کند.

Authentication

بعضی از APIها نیاز به احراز هویت دارند. برای مثال ممکن است از توکن یا استانداردهایی مثل OAuth استفاده کنند. این موضوع در پروژه‌های واقعی بسیار مهم است، اما جزئیات آن معمولاً از سطح مقدماتی فراتر می‌رود.

آیا فقط باید از XMLHttpRequest استفاده کنیم؟

خیر. برای ارسال درخواست‌های HTTP در جاوااسکریپت روش‌ها و ابزارهای مختلفی وجود دارد.

1. XMLHttpRequest

روش قدیمی و کلاسیک AJAX است. هنوز هم مهم است، چون پایه بسیاری از مفاهیم را توضیح می‌دهد.

const xhr = new XMLHttpRequest();

2. Fetch API

روش جدیدتر و ساده‌تر که به‌صورت پیش‌فرض در مرورگر وجود دارد و بخشی از جاوااسکریپت استاندارد محسوب می‌شود.

fetch('data.json')
  .then(response => response.json())
  .then(data => console.log(data));

3. کتابخانه‌های خارجی

برخی کتابخانه‌ها نیز برای ارسال درخواست‌ها استفاده می‌شوند، مانند:

• Axios
• SuperAgent
• jQuery.ajax

نمونه با Axios:

axios.get('data.json')
  .then(response => console.log(response.data));

کدام روش بهتر است؟

اگر بخواهیم بین روش‌های مختلف انتخاب کنیم:

• برای یادگیری مفاهیم پایه، XMLHttpRequest بسیار مهم است.
• برای پروژه‌های مدرن، معمولاً Fetch API انتخاب مناسب‌تری است.
• اگر به امکانات بیشتر نیاز داشته باشید، کتابخانه‌هایی مثل Axios گزینه‌های خوبی هستند.

در عین حال، استفاده از jQuery فقط برای AJAX معمولاً پیشنهاد نمی‌شود؛ چون jQuery یک کتابخانه بزرگ برای کار با DOM و قابلیت‌های دیگر است و برای چنین استفاده محدودی، انتخاب بهینه‌ای نیست.

جمع‌بندی

در این بخش با مفهوم AJAX و نقش آن در توسعه وب آشنا شدیم. مهم‌ترین نکات این آموزش عبارت‌اند از:

• AJAX مجموعه‌ای از فناوری‌ها برای ارسال و دریافت داده به‌صورت غیرهمزمان است.
• با AJAX می‌توان بدون رفرش کامل صفحه، فقط بخشی از رابط کاربری را به‌روزرسانی کرد.
• هسته سنتی AJAX، شیء XMLHttpRequest است.
• امروزه JSON جای XML را در بیشتر کاربردها گرفته است.
• در کنار XMLHttpRequest، روش‌های جدیدتری مثل Fetch API و کتابخانه‌هایی مثل Axios نیز وجود دارند.

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