فروم بچه های تولز

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

Ajax مخفف عبارت Asynchronous JavaScript and XML است و به تکنیکی در توسعه وب گفته می‌شود که قابلیت تبادل داده با سرور و ارتقا بخش‌هایی از صفحه را بدون بارگذاری مجدد کل صفحه فراهم می‌کند. این روش باعث می‌شود وب‌سایت‌ها سریع‌تر‌تر و تعاملی‌تر عمل کنند. برای مثال، نتایج جست‌وجو می‌توانند هم‌زمان با تایپ کاربر نمایش داده شوند.
اصطلاح Ajax در ۱۸ فوریه ۲۰۰۵ توسط جسی جیمز گرت در مقاله‌ای با عنوان «رویکردی نوین به برنامه‌های وب» معرفی و به‌تدریج به یکی از تکنیک‌های پرکاربرد در توسعه وب تبدیل شد. در روز جاریه تکنولوژی Ajax با استفاده از ابزارهایی مانند JavaScript و XMLHttpRequest، توانایی برقراری ارتباط غیرهمزمان (asynchronous) بین مرورگر و سرور را فراهم می‌کند.

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

ایجکس فقط یک ابزار ساده برای زیبایی سایت نیست، بلکه هسته اصلی تبدیل صفحات استاتیک به برنامه‌های پویا و تعاملی است. وقتی می‌خواهیم تجربه کاربری (UX) را ارتقا دهیم و هم‌زمان بار اضافی روی سرور را کم کنیم، این تکنولوژی وارد میدان می‌شود. مهم‌ترین کاربردهای ایجکس را می‌توان در ۴ دسته اصلی خلاصه کرد:

اعتبارسنجی زنده داده‌ها: در روش‌های قدیمی، کاربر فرم ثبت‌نام را پر می‌کرد و تازه بعد از رفرش صفحه متوجه می‌شد که نام کاربری تکراری است. با ایجکس، در همان لحظه تایپ کردن، داده‌ها با دیتابیس چک می‌شود. این کار نرخ تبدیل (Conversion Rate) فرم‌ها را به‌شدت بالا می‌برد.
ورود و خروج بدون وقفه: فرایند احراز هویت در زمان Login و Logout جامعا در پس‌زمینه مدیریت می‌شود. کاربر رمز عبور را وارد می‌کند و سرور آن را تایید یا رد می‌کند، بدون اینکه نیاز باشد او را به یک صفحه سفید و تازه ریدایرکت کنید.

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

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

برنامه‌های تک‌صفحه‌ای (SPA): در فریم‌ورک‌های مدرن، ساختار اصلی سایت فقط یک بار لود می‌شود. پس از آن، کاربر روی هر لینکی کلیک کند، ایجکس فقط محتوای متنی یا تصویری نوین را می‌گیرد و داخل ساختار قبلی قرار می‌دهد.
نقشه‌های تعاملی: وقتی یک نقشه آنلاین را بزرگنمایی یا zoom می‌کنید یا آن را به اطراف می‌کشید، مختصات نوین به سرور ارسال شده و ایجکس فقط عکس‌ها مربوط به همان بخش را دریافت و جایگزین می‌کند.

کارایی Ajax در چند مرحله انجام می‌شود:

۱. وقوع رویداد (Trigger): همه چیز با یک اکشن در مرورگر شروع کار می‌شود. مثلا کاربر روی دکمه‌ای کلیک می‌کند، فرمی را می‌فرستد یا صفحه را اسکرول می‌کند.

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

۳. پردازش در سمت سرور: سرور درخواست را دریافت می‌کند، عملیات لازم مانند تایید گزارش‌ها یا جست‌وجو در دیتابیس را انجام می‌دهد و داده‌های خروجی را آماده می‌کند.

۴. ارسال و دریافت پاسخ: حاصل پردازش معمولا در قالب داده‌های سبک JSON یا XML از سرور به مرورگر برمی‌گردد و جاوا اسکریپت آن را دریافت می‌کند.

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

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

بسیاری از مواقع، ممکن است بدون اینکه متوجه باشیم، در حال استفاده کردن از ایجکس باشیم. برای مثال هر بار که یکی از کارهای زیر را انجام می‌دهیم، ممکن است Ajax در حال اجرا باشد:

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

ایجکس هم مانند سایر فناوری‌های توسعه وب، مزایا و محدودیت‌های خودش را دارد. در ادامه با مزایا و معایب Ajax بیشتر آشنا می‌شویم:

مهم‌ترین مزایای ایجکس عبارتند از:

برخی از محدودیت‌های ایجکس عبارتند از:

ایجکس، جاوا اسکریپت و Fetch API مفاهیم متفاوتی هستند، اما ارتباط نزدیکی با یکدیگر دارند. اگر بخواهیم تعریفی دقیق از هر یک ارائه دهیم، باید اشاره کنیم که:

در جدول زیر به تحلیل تفاوت AJAX با JavaScript و Fetch API می‌پردازیم:

برای کار با ایجکس نیازی به یادگیری یک زبان برنامه‌نویسی نوین یا تسلط جامع بر برنامه‌نویسی سمت سرور ندارید. ایجکس در حقیقت یک تکنیک ارتباطی است و برای اجرای آن، درک بازده سه ابزار پایه طراحی وب کفایت می‌کند:

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

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

خیر، ایجکس ذاتا برای سئو مضر نیست؛ اما اگر ساختار Ajax به ‌گونه‌ای پیاده ‌سازی شود که موتورهای جست‌وجو نتوانند محتوای بارگذاری ‌شده را بخزند یا ایندکس کنند، ممکن است به سئو آسیب بزند.

jQuery Ajax روشی برای ارسال و دریافت غیرهمزمان داده‌ها با استفاده از کتابخانه jQuery است.

بله، برای اجرای دستورات Ajax لزوما نیازی به jQuery ندارید و می‌توانید از ابزارهایی مانند Fetch API یا XMLHttpRequest استفاده کنید.