AJAX (Asynchronous JavaScript and XML) تکنیکی برای ساختن صفحات وب تعاملیتر یا اصطلاحاً وب تعاملی محسوب میشود که امکان بارگذاری و ارسال داده را بدون تازهسازی کامل صفحه وب فراهم میسازد. به کمک AJAX، بخشهایی از صفحه وب میتوانند به صورت خودکار و در پسزمینه با سرور ارتباط برقرار نمایند و اطلاعات را دریافت یا ارسال کنند؛ در حالی که رابط کاربری برای کاربر قفل نمیشود؛ نتیجه؟ این روش باعث بهبود قابل توجه تجربه کاربری، کاهش زمان انتظار و واکنشپذیری بیشتر صفحات میشود. اگر علاقهمندید که بدانید ajax چیست و اطلاعات جامعتری در رابطه با آن به دست آورید، از شما دعوت میکنیم در ادامه این مقاله با مجموعه آژانس دیجیتال مارکتینگ سوم شخص همراه باشید.
ajax چیست؛ تعریف AJAX و تفکیک آن از فناوریهای قبلی و همزمان
AJAX یک الگوی برنامهنویسی است که از تکنولوژیهای استاندارد وب نظیر HTML، CSS، مدل DOM، XMLHttpRequest یا Fetch API و زبان جاوااسکریپت (JavaScript) برای ارسال همزمان داده با سرور استفاده میکند؛ پس ایجکس یک زبان جدید نیست. در روشهای قدیمی و سنتی وب، هر تعامل کاربر نیازمند ارسال یک درخواست HTTP (HTTP Request) جدید به سرور و بارگذاری مجدد کل صفحه بود که این روند ضمن مصرف پهنای باند، تجربه کاربری را نیز کُند میکرد. AJAX با برقراری ارتباط ناهمگام بدون رفرش صفحه، امکان بهروزرسانی قسمتهایی از صفحه را فراهم میآورد.
بنابراین، ایجکس یک زبان برنامهنویسی مستقل نیست؛ بلکه ترکیبی از چند فناوری است که با همکاری هم، ساختار صفحات وب را پویاتر خواهند کرد. این فناوری در اواسط دهه ۲۰۰۰ میلادی با معرفی اصطلاح «ایجکس» توسط جسی جیمز گرت (Jesse James Garrett) به اوج محبوبیت رسید. البته، عناصر بنیادی آن پیشینهای قدیمیتر دارند؛ به عنوان مثال مایکروسافت در IE5 (سال ۱۹۹۹) شیء XMLHttpRequest را معرفی کرد و از آن در سرویس Hotmail (اکسچنج سرور ۲۰۰۰) استفاده نمود. پس از آن، تمرکز شرکتهایی چون گوگل و تولید اپلیکیشنهایی مانند جیمیل و گوگل مپ در سال ۲۰۰۴ سبب رواج وسیع معماری AJAX شد.
چرا به جای XML، JSON بیشتر استفاده میشود؟
تاریخچه AJAX نشان میدهد که در گذشته از XML به عنوان قالب اصلی تبادل داده استفاده میشد، ولی مشکلاتی داشت؛ ساختار دستوری طولانی و پردازش سختافزاری آن باعث شده بود حجم دادهها بالا و کار با آن دشوار باشد. به همین دلیل، کمکم قالب JSON (JavaScript Object Notation) محبوب شد. JSON سبکتر، خواناتر و نزدیکتر به ساختار داخلی جاوااسکریپت است، بهطوری که به آسانی میتوان رشته JSON را به یک شیء JavaScript تبدیل کرد. بر خلاف XML، در JSON نیازی به تگهای بسته مجزا نیست و حجم متن کمتر بوده اما در برخی موارد خاص احتمال دارد دادهها به صورت HTML یا حتی XML ارسال شوند، اما کاربرد آنها محدودتر خواهد بود.
چرخه کاری AJAX در ۴ مرحله
چرخه کاری ajax چیست؟ مراحل استاندارد عملکرد AJAX را میتوان به چهار گام کلی تقسیم کرد:
-
مرحله ۱: کاربر یک اکشن انجام میدهد
در قدم اول کاربر یک عملی را انجام میدهد؛ به عنوان مثال، کاربر روی یک دکمه کلیک میکند، فرم را پر مینماید یا در کادر جستجو متنی وارد خواهد کرد. این رویداد به کد جاوااسکریپت اطلاع میدهد که باید از تکنیک AJAX استفاده شود.
-
مرحله ۲: مرورگر درخواست AJAX میفرستد
در این مرحله، جاوااسکریپت یک شیء XMLHttpRequest ایجاد یا از تابع fetch استفاده میکند و یک درخواست HTTP به سرور ارسال مینماید. این درخواست به طور غیر همزمان (غیرمسدودکننده) است؛ یعنی چه؟ یعنی این که در حالی که منتظر پاسخ میماند، رابط کاربری مسدود نمیشود و کاربر میتواند به فعالیت ادامه دهد.
-
مرحله ۳: سرور پاسخ را ارسال میکند
در این مرحله سرور درخواست را دریافت کرده، پردازشهای لازم مثل پرسوجوی دیتابیس را انجام میدهد و یک پاسخ مناسب آماده میکند. این پاسخ به طور معمول شامل دادهها (با قالب JSON یا HTML) خواهد بود. سپس، سرور پاسخ را به مرورگر برمیگرداند.
-
مرحله ۴: جاوااسکریپت صفحه را بدون رفرش بهروزرسانی میکند
بعد از دریافت پاسخ سرور توسط مرورگر، کد جاوااسکریپت مقدار آن را میخواند و با آن بخشهای مشخصی از صفحه را تغییر میدهد. در طی این فرایند دیگر کل صفحه دوباره بارگذاری نمیشود و تغییرات به صورت پویا در همان صفحه اعمال خواهند شد. به عنوان مثال، میتوان تنها محتوای یک جدول، لیست یا فرم را با دادههای جدید بهروزرسانی کرد.
مهمترین کاربردهای AJAX در طراحی وب
حالا که میدانیم ایجکس ajax چیست، در این بخش سراغ کاربردهای این فناوری میرویم:
1.ارسال و دریافت اطلاعات فرمها بدون رفرش
به کمک AJAX میتوان فرمهای ورود کاربر، نظرسنجی، ثبتنام و… را بدون نیاز به بارگذاری مجدد صفحه ارسال کرد و پاسخ دریافت شده را در همان صفحه نمایش داد. این روش تجربه کاربری بسیار بهتری در مقایسه با مدل سنتی دارد.
2.تکمیل خودکار (Autocomplete) و پیشنهادهای لحظهای
زمانی که کاربر در یک فیلد جستجو یا ورودی متن شروع به تایپ میکند، AJAX میتواند درخواستهایی به سرور ارسال کند تا دادههای مرتبط دریافت و در یک منوی کشویی به کاربر نشان داده شوند. یکی از نمونههای کلاسیک این قابلیت، پیشنهادگر جستجوی گوگل است که با هر بار تایپ کاراکتر، از سرور نتایج احتمالی را بازیابی میکند.
بیشتر بخوانید: طراحی یک سایت چقدر زمان میبرد
3.ثبت رأی و امتیازدهی به محتوا
سیستمهای امتیازدهی، لایک و دیسلایک و نظردهی معمولاً با ajax پیاده میشوند تا کاربر بدون خروج از صفحه یا رفرش بتواند رأی خود را ثبت نماید و بلافاصله نتایج را مشاهده کند.
4.بهروزرسانی لحظهای محتوا
سرویسها و شبکههای اجتماعی مانند ایکس (توییتر سابق) یا سیستمهای خبرخوان با AJAX امکان نمایش محتواهای جدید را فراهم میکنند؛ به عنوان مثال زمانی که توییتی ارسال یا مطالب جدیدی منتشر میشود، این بخشها در رابط کاربری بدون نیاز به رفرش بهروزرسانی خواهند شد.
5.اعتبارسنجی و اعتباردهی فرمها
اعتبارسنجی دادههای ورودی مثل بررسی قوی بودن رمز عبور یا صحت ایمیل نیز میتواند به کمک AJAX انجام شود؛ به گونهای که خطاهای ورودی به محض تایپ یا قبل از ارسال نهایی به کاربر نشان داده شود، بدون این که نیاز به ارسال داده به سرور و رفرش کامل صفحه باشد.
6.چت آنلاین و پیامرسانی فوری
در برنامههای چت روم یا مسنجرهای وب نظیر Gmail Chat، ایجکس باعث میشود که پیامهای ارسال شده بدون تغییر صفحه ارسال و پیامهای دریافتی در لحظه نمایش داده شوند؛ به طور معمول یک درخواست دورهای برای دریافت پیامهای جدید و یک درخواست برای ارسال پیام مورد استفاده قرار میگیرد.
7.رابطهای کاربری پویا و گرافیکی
استفاده از AJAX امکان ساخت منوها، پنجرههای مودال نظیر لایتباکس به جای پاپآپ و و ابزارکهای خارجی مثل Google Maps، ویدجتهای آبوهوا یا نمایش قیمت لحظهای ارز را فراهم میسازد. این ابزارکها به طور معمول با درخواستهای AJAX داده دریافت میکنند و میتوانند بدون بارگذاری مجدد صفحه بهروزرسانی شوند.
مزایا و محدودیتهای استفاده از ajax چیست؟
استفاده از AJAX مزایا و معایبی دارد که باید هنگام طراحی سایت حرفه ای در نظر گرفته شوند؛ در جدول زیر این مزایا و معایب را مورد بررسی قرار میدهیم:
| مزایا | معایب |
| افزایش سرعت واکنش صفحه با ارسال درخواستهای کوچک و ناهمزمان.
کاربر میتواند بدون وقفه با صفحه تعامل کند. |
وابستگی به جاوااسکریپت.
در مرورگرهای قدیمی یا غیرفعالبودن JS برخی قابلیتها کار نمیکند. |
| کاهش مصرف پهنای باند چون فقط دادههای لازم بین کلاینت و سرور منتقل میشود، نه کل صفحه. | دشوارشدن بوکمارککردن و ناوبری با دکمههای «برگشت/جلو» چون URL صفحه معمولاً تغییر نمیکند. |
| کاهش بارِ سرور و بهبود کارایی کلی بهدلیل عدم رفرش کامل صفحه. | افزایش پیچیدگی توسعه و اشکالزدایی نسبت به روشهای سنتی. |
| تجربه کاربری روانتر و امکان پیادهسازی رابطهای پیچیده و داینامیک
(مثل نقشههای تعاملی و ابزارکها). |
حساسیت بیشتر به خطاهای شبکه و تاخیر در پاسخ
نیازمند طراحی دقیق و مدیریت خطا در درخواست/پاسخ. |
AJAX و تأثیر آن بر سئو
ایجکس در حوزه سئو و بهینه سازی وب سایت نیز تأثیرات مثبتی دارد و در عین حال ممکن است که چالشهایی را ایجاد نماید. از یک طرف، بهبود سرعت صفحه و تعامل بیشتر کاربران میتواند عامل مثبتی باشد؛ در واقع با استفاده از AJAX صفحات وب میتوانند سریعتر و پویاتر پاسخ دهند که معیار «سرعت سایت» و «نرخ تعامل کاربر» (KPI) را بهبود میبخشد و این در نهایت به بهبود سئوی سایت منجر خواهد شد.
از سوی دیگر، بزرگترین چالش ایجکس برای سئو در رابطه با ایندکس شدن محتوای داینامیک است. چنانچه محتوایی فقط پس از بارگذاری با AJAX یا کلیک روی دکمهای خاص ظاهر شود، موتورهای جستجوگر احتمالاً آن را نمیبینند و به تبع ایندکس هم نمیکنند. این مسئله در صورتی شدیدتر خواهد شد که محتوا به طور کل بعد از لود اولیه صفحه با AJAX ارائه شود؛ در نتیجه، ممکن است بخشهایی از سایت که با AJAX پویاسازی شدهاند، در نتایج جستجو نمایش داده نشوند و رتبهبندی سایت آسیب ببیند.
روشهایی برای بهبود SEO سایتهای مبتنی بر AJAX
برای این که معایب ایندکس نشدن AJAX کمتر شود و موتورهای جستجو صفحات داینامیک را نیز ببینند، روشهای زیر توصیه میشوند:
1.صفحات جایگزین (Fallback) یا Progressive Enhancement
میتوان برای محتواهای حساس، نسخهای استاتیک یا پایه نظیر قرار دادن محتوا در تگ <noscript> در نظر داشت که مرورگرهای بدون پشتیبانی از جاوااسکریپت یا خزندههای موتور جستجو بتوانند آن را بخوانند؛ به این معنا که در صورت عدم اجرای AJAX، نسخه سادهای از محتوا نشان داده شود تا همه کاربران و رباتها به آن دسترسی داشته باشند.
2.ایجاد URLهای قابل اشتراک و قابل ایندکس
طراحی مسیرها (Routes) یا URLهای منحصربهفرد برای هر بخش از محتوا باعث میشود هر صفحه محتوا، آدرس ثابت خود را داشته باشد. به عنوان مثال، در یک برنامه AJAX ممکن است برای هر «ویدیو» یا «آیتم محتوا» URL خاصی تعریف شود. در این حالت موتورهای جستجو با دنبال کردن این لینکها میتوانند محتوای هر صفحه را ایندکس کنند.
3.استفاده از HTML5 History API (pushState)
قابلیت history.pushState اجازه میدهد URL صفحه بدون رفرش تغییر کند. با این روش میتوان هنگام نمایش محتوای جدید با AJAX آدرس مرورگر را نیز آپدیت کرد؛ در نتیجه، برای هر وضعیت جدید صفحه یک URL جدید ایجاد میشود که خزندههای موتورهای جستجو قادرند آن را تحلیل کنند.
4.بارگذاری اولیه قابل ایندکس (Server-Side Rendering)
در برخی موارد میتوان محتوای مهم را از سمت سرور تولید کرد تا در بارگذاری اولیه در HTML صفحه حاضر باشد؛ به عنوان مثال، استفاده از فریمورکهایی که SSR را پشتیبانی میکنند یا تولید نسخه HTML توسط سرور.
5.استفاده از روشهای پیشنهادی موتورهای جستجو
در گذشته گوگل استاندارد «Hashbang (#…!)» را معرفی کرده بود تا URLهای مبتنی بر هَش را قابل ایندکس کند؛ هرچند این روش منسوخ شده، اما دانستن آن برای درک توسعه SEO ایجکس مفید است.
سوم شخص؛ ارائهدهنده خدمات بازاریابی دیجیتال + طراحی سایت + سئو
در این مقاله دانستیم که ajax چیست و کاربرد آن را در طراحی صفحات وب مورد بررسی قرار دادیم. اگر تصمیم به طراحی سایت برای کسبوکار خود را دارید یا این که نیازمند خدمات تخصصی سئو و مشاوره دیجیتال مارکتینگ هستید، مجموعه سوم شخص مفتخر است با تکیه بر تجربیات و دانش تخصصی خود در این زمینه، به شما یاری رساند. برای کسب اطلاعات بیشتر میتوانید با کارشناسان سوم شخص تماس حاصل نمایید.
سوالات متداول
- آیا AJAX یک زبان برنامهنویسی است؟
خیر. AJAX یک زبان نیست، بلکه ترکیبی از فناوریهای وب برای ایجاد وب تعاملی است.
- تفاوت AJAX و Fetch API چیست؟
AJAX یک مفهوم کلی است و Fetch API نسخه مدرن و Promise-محور برای اجرای همان ارتباط ناهمزمان است.
- AJAX چه تاثیری بر سئو دارد؟
استفاده درست از AJAX سرعت و UX را بهبود میدهد، اما در صورت بارگذاری کامل محتوا با AJAX، ایندکسپذیری و سئو آسیب میبیند.
