AJAX چیست؟

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

AJAX مخفف Asynchronous JavaScript and XML است. هرچند امروزه به‌جای XML، بیشتر از JSON استفاده می‌شود چون سبک‌تر و خواناتر است. در AJAX، ارتباط مرورگر و سرور «آسنکرون» انجام می‌شود، یعنی در پس‌زمینه و بدون این‌که صفحه دوباره بارگذاری شود.

XMLHttpRequest vs Fetch API

سال‌ها پیش، برای برقراری این ارتباط از شیء XMLHttpRequest استفاده می‌شد. این شیء امکان ارسال و دریافت داده را بدون رفرش فراهم می‌کرد. هرچند کاربردی بود، اما نوشتن کدهایش طولانی و کمی پیچیده بود. به همین دلیل در نسخه‌های جدید جاوااسکریپت، ابزار تازه‌ای معرفی شد به نام Fetch API که همان کار XMLHttpRequest را انجام می‌دهد اما به‌مراتب ساده‌تر، تمیزتر و قابل‌خواندن‌تر است.

امروزه تقریباً در هر پروژه مدرن از Fetch API استفاده می‌شود، هرچند دانستن تفاوت‌های این دو روش همچنان مهم است، چون در برخی پروژه‌های خاص یا مرورگرهای قدیمی ممکن است XMLHttpRequest هنوز کاربرد داشته باشد.

Load More

کاربردهای AJAX بسیار گسترده است و در بخش‌های مختلف سایت به کمک می‌آید. مثلاً یکی از معروف‌ترین کاربردها، قابلیت Load More است. تصور کن در اینستاگرام یا یک فروشگاه اینترنتی در حال اسکرول هستی و وقتی به پایین صفحه می‌رسی، بدون هیچ رفرش یا تغییر ناگهانی، محتوا یا محصولات جدید بارگذاری می‌شوند. این همان Load More است که کمک می‌کند سایت سریع و جذاب به نظر برسد و کاربر حس کند همیشه محتوای تازه در انتظارش است.

Auto Save

نمونه دیگر از کاربردهای AJAX، Auto Save است. اگر در حال نوشتن یک پست طولانی در یک وبلاگ یا مدیریت محتوا باشی، حتماً دیدی که هر چند ثانیه یک پیام «ذخیره خودکار» ظاهر می‌شود. این باعث می‌شود اگر اینترنت قطع شد یا مرورگر بسته شد، متن تو از دست نرود. همه این اتفاق‌ها بدون رفرش و پشت‌صحنه با AJAX انجام می‌شود و کاربر عملاً متوجه هیچ‌چیز نمی‌شود.

API Requests

یکی دیگر از کاربردهای بسیار مهم AJAX، API Requests است. سایت‌ها برای گرفتن اطلاعات از سرورهای دیگر، مثل قیمت ارز، وضعیت آب‌وهوا، اخبار یا حتی داده‌های کاربری، نیاز دارند به این سرورها درخواست بفرستند و داده‌ها را دریافت کنند. این کار بدون AJAX عملاً ممکن نبود یا باعث رفرش صفحه می‌شد که تجربه کاربری را خراب می‌کرد.

Fetch API

امروزه بیشتر توسعه‌دهندگان ترجیح می‌دهند به‌جای XMLHttpRequest از Fetch API استفاده کنند. چون کدهای Fetch هم کوتاه‌تر است، هم خواناتر و هم مدیریت خطا در آن بسیار راحت‌تر شده است. Fetch API یک ابزار مدرن است که تقریباً در همه پروژه‌های امروزی دیده می‌شود و راهکار اصلی ارتباط بدون رفرش به حساب می‌آید.

درخواست GET

یکی از ساده‌ترین کارهایی که می‌توان با Fetch API انجام داد، ارسال درخواست GET است. این مدل درخواست بیشتر برای مواقعی استفاده می‌شود که می‌خواهی اطلاعاتی را از سرور بگیری، بدون این‌که داده جدیدی ثبت یا تغییر داده شود. مثل گرفتن لیست محصولات یا اطلاعات پروفایل کاربر. درخواست GET باعث نمی‌شود داده‌ای در سرور تغییر کند و فقط اطلاعات موجود را برمی‌گرداند.

درخواست POST

ولی اگر بخواهی داده‌ای را به سرور بفرستی، مثلاً وقتی کاربر در یک فرم ثبت‌نام می‌کند یا نظری ارسال می‌کند، از درخواست POST استفاده می‌شود. تفاوت اصلی این دو روش در این است که GET داده‌ها را در URL ارسال می‌کند، اما POST داده‌ها را در بدنه (body) درخواست قرار می‌دهد و امنیت بیشتری دارد. درخواست POST معمولاً برای ذخیره یا به‌روزرسانی داده‌ها استفاده می‌شود.

Headerها

هنگام کار با Fetch API، خیلی وقت‌ها باید Headerها را تنظیم کنی. Headerها به سرور اعلام می‌کنند چه نوع داده‌ای در حال ارسال یا دریافت است. مثلاً در اغلب درخواست‌های مدرن، header به نام Content-Type مشخص می‌کند داده‌ها JSON هستند یا فرم معمولی. همچنین اگر بخواهی از یک API محافظت‌شده استفاده کنی، باید یک Authorization Token هم در header بفرستی تا سرور مطمئن شود تو مجاز هستی.

Body و JSON.stringify()

اغلب اوقات، داده‌هایی که می‌خواهی ارسال کنی، به‌صورت Object در جاوااسکریپت هستند. اما قبل از ارسال باید آن‌ها را به JSON تبدیل کنی. این کار با JSON.stringify() انجام می‌شود که داده‌های جاوااسکریپت را به فرمت متنی JSON تبدیل می‌کند. این تبدیل لازم است، چون سرورها داده‌ها را به‌صورت متنی دریافت می‌کنند، نه به‌صورت اشیاء جاوااسکریپت.

دریافت و پردازش JSON

به همان شکل که داده‌ها را به‌صورت JSON ارسال می‌کنی، وقتی سرور پاسخی می‌فرستد، معمولاً به‌صورت JSON است. پس باید آن را دوباره به Object تبدیل کنی. این کار با JSON.parse() انجام می‌شود. این تبدیل باعث می‌شود بتوانی به‌راحتی داده‌های دریافتی را در جاوااسکریپت استفاده کنی و نمایش دهی.

مدیریت خطا با try/catch یا .catch()

در کار با Fetch API، همیشه احتمال خطا وجود دارد. شاید اینترنت قطع شود، یا مسیر درخواست اشتباه باشد، یا سرور خطا بدهد. برای همین باید مدیریت خطا را بلد باشی. این موضوع کمک می‌کند اگر مشکلی پیش آمد، هم کاربر پیام درستی ببیند و هم سایت دچار اختلال نشود. در Fetch API می‌توان از روش then().catch() استفاده کرد یا از دستورات try/catch در کدهای async/await کمک گرفت. این دو روش هر دو بسیار رایج هستند و بستگی به سبک کدنویسی تو دارند.

تمام این مفاهیم یعنی AJAX و Fetch API، به تو کمک می‌کند داده‌ها را بدون نیاز به رفرش صفحه بخوانی یا ارسال کنی و سایتت را به یک وب‌اپلیکیشن سریع و حرفه‌ای تبدیل کنی. این همان چیزی است که تجربه کاربری امروز از یک سایت مدرن انتظار دارد.