Ajax چیست؟ مفهوم، کاربردها و نمونه کد

Ajax (ایجکس) برگرفته از عبارت  “Asynchronous JavaScript and XML” و به معنای جاوا اسکریپت و XML ناهمگام است و به‌عنوان روشی برای برقرارکردن ارتباط میان سرور و کلاینت شناخته می‌شود. با استفاده از Ajax می‌توانید بخش‌های مختلف یک وب‌سایت را بدون نیاز به بارگذاری دوباره کل صفحه، به‌روزرسانی کنید و تجربه کاربری بهتر خلق نمایید. این تکنیک، یکی از ابزارهایی است که به وب‌سایت‌ها امکان پویایی بیشتر می‌دهد. در این مطلب از مجله سبزلرن قصد داریم بررسی کنیم Ajax چیست، چه نقشی در وب ایفا می‌کند و مسیر درست یادگیری آن چگونه است.

Ajax چیست و چرا مهم است؟

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

 نمونه‌هایی مانند جست‌وجوی زنده، لایک کردن یا پیام‌رسانی بدون رفرش صفحه. یکی از مثال‌های شناخته‌شده استفاده از Ajax، قابلیت Google Suggest است که هنگام تایپ در نوار جستجوی گوگل، پیشنهادها را فورا از سرور دریافت و نمایش می‌دهد، و به همین دلیل وب‌سایت‌های بزرگی مانند Gmail، YouTube و Facebook به‌طور گسترده از Ajax استفاده می‌کنند.

آشنایی با مفهوم asynchronous بودن

قبل از شروع یادگیری Ajax، لازم است با مفهوم درخواست‌های “Asynchronous” آشنا شوید. درخواست‌ها به دو دسته “Synchronous” و “Asynchronous” تقسیم می‌شوند. در درخواست‌های “Synchronous”، عملیات‌ها به‌صورت متوالی اجرا می‌شوند و تا زمانی که یک درخواست به‌طور کامل پردازش نشود، درخواست بعدی آغاز نمی‌شود. این نوع درخواست‌ها باعث مسدود شدن Thread اصلی مرورگر می‌شوند و تا پایان درخواست، اجرای سایر کدها و تعامل کاربر متوقف می‌گردد که در نتیجه تجربه کاربری به‌شدت کاهش می‌یابد. در مقابل، درخواست‌های “Asynchronous” بدون مسدود کردن Thread اصلی اجرا می‌شوند و به مرورگر اجازه می‌دهند هم‌زمان به سایر وظایف و تعاملات کاربر پاسخ دهد، که این موضوع منجر به عملکرد روان‌تر و تجربه کاربری بهتر می‌شود.

Ajax چگونه کار می‌کند؟ (مکانیزم پشت‌صحنه)

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

• یک شیء “XMLHttpRequest” در مرورگر برای ارسال درخواست به سرور
• جاوااسکریپت و “HTML DOM” برای نمایش یا به‌کارگیری داده‌های دریافت‌شده

اگر می‌خواهید بدانید مراحل اجرای Ajax چیست موارد زیر رو دنبال کنید:

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

مزایا و کاربردهای Ajax در توسعه وب

استفاده از Ajax در برنامه‌های وب چهار مزیت اصلی دارد که مهم‌ترین آن‌ها عبارت‌اند از:

ارسال داده بدون بارگذاری مجدد صفحه

با استفاده از Ajax، می‌توان داده‌های فرم یا درخواست‌های کاربر را بدون نیاز به بارگذاری مجدد صفحه به سرور ارسال کرد. این کار باعث کاهش حجم تبادل داده، استفاده بهینه‌تر از شبکه و افزایش سرعت ارسال و دریافت اطلاعات می‌شود؛ موضوعی که به‌ویژه در سایت‌ها و محیط‌هایی با پهنای باند محدود، تأثیر قابل‌توجهی در بهبود عملکرد دارد.

فراخوانی غیرهمگام (Making Asynchronous Call)

ایجکس به شما این اجازه را می‌دهد تا فراخوانی غیرهمگام با وب سرور برقرار کنید. این ویژگی به مرورگر این امکان را می‌دهد تا بدون نیاز به انتظار برای دریافت کامل داده‌ها، به‌فعالیت‌های دیگر پرداخته و کاربر نیز بتواند هم‌زمان عملیات دیگری انجام دهد.

کاربرپسند بودن (User-Friendly)

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

سرعت بالا (Increased Speed)

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

Ajax و JSON چه ارتباطی دارند؟

امروزه بسیاری از توسعه‌دهندگان برای تبادل اطلاعات و به‌روزرسانی داده‌ها بین کلاینت و سرور از ترکیب AJAX و فرمت “JSON” استفاده می‌کنند. برای مثال سایت‌های خبری با بهره‌گیری از AJAX، جدول امتیاز و تعداد گل‌های تیم‌های ورزشی را به‌صورت زنده و بدون بارگذاری مجدد صفحه به‌روزرسانی می‌کنند. برای این منظور اطلاعات مربوطه ابتدا روی سرور ذخیره می‌شوند تا صفحه وب بتواند آن‌ها را در زمان لازم دریافت کند. توسعه‌دهندگان معمولاً این داده‌ها را در قالب JSON آماده کرده و نگهداری می‌کنند.

تمامی اطلاعاتی که با AJAX بین کلاینت و سرور تبادل می‌شوند، می‌توانند در قالب JSON ذخیره شوند. در سمت کلاینت هم جاوااسکریپت این داده‌ها را دریافت کرده و پس از “parse”، می‌تواند یکی از عملیات زیر را انجام دهد:

• مقادیر parse شده را در متغیرها ذخیره کرده و سپس آن‌ها را برای پردازش بیشتر یا نمایش در صفحة وب مورداستفاده قرار دهد.
• داده‌ها مستقیماً به المان‌های “DOM” صفحه وب اختصاص داده می‌شوند تا در وب‌سایت نمایش داده شوند.

تفاوت Ajax با Fetch و Axios

در برنامه‌نویسی وب سه روش اصلی برای ارسال درخواست‌های غیرهمگام به سرور شامل “Ajax”، “Fetch” و “Axios” است. Ajax یک روش کلی برای ارسال درخواست‌های غیرهمزمان است. در گذشته اغلب با کتابخانه “jQuery” استفاده می‌شد، اما امروزه می‌توان آن را با “XMLHttpRequest” یا API مدرن Fetch بدون نیاز به jQuery پیاده‌سازی کرد. اما تفاوت  Fetch با  Ajax چیست؟ Fetch جایگزینی مدرن برای “XHR” است که در خود جاوا اسکریپت وجود دارد و با استفاده از Promise، مدیریت درخواست‌ها را تمیزتر و خواناتر می‌کند و کار با JSON را ساده‌تر می‌سازد. Axios نیز یک کتابخانه بر پایه Promise است که در آموزش Node.js و سمت کلاینت هم از آن استفاده می‌شود و برای پروژه‌های بزرگ و پیچیده بسیار مناسب است.

مثال‌های کاربردی Ajax در وب

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

مثال‌های عملی از Ajax در جاوااسکریپت

یکی از مثال‌های ایجکس در جاوااسکریپت را می‌توان در قالب کدهای زیر بیان کرد، محتوای یک فایل HTML بدون رفرش شدن صفحه از سرور دریافت شده و داخل یک المان در صفحه نمایش داده می‌شود. این سناریو در لود بخش‌هایی مثل about، faq یا توضیحات محصول بسیار رایج است.

<button id="loadBtn">نمایش محتوا</button>
<div id="content"></div>
<script>
document.getElementById("loadBtn").addEventListener("click", function () {
  fetch("content.html")
    .then(response => response.text())
    .then(data => {
      document.getElementById("content").innerHTML = data;
    })
    .catch(error => {
      console.error("خطا در دریافت فایل", error);
    });
});
</script>

تکنیک‌ها و نکات مهم در استفاده از Ajax

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

سوالات متداول