مهدی رضائیان
مهدی رضائیان
خواندن ۶ دقیقه·۲ سال پیش

تکنولوژی AJAX چه کاربردی در طراحی صفحات وب دارد؟

تکنولوژی AJAXیا (ایجکس،اژاکس) یک تکنیک پرکاربرد در طراحی وب، برای تبادل اطلاعات با سرور و به روزرسانی بخش هایی از محتوای صفحه وب بدون نیاز به لود و بارگذاری مجدد کل صفحه می باشد.

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

یکی از معروف ترین کاربردهای ایجکس، سیستم Google Suggest بوده که به زیبایی طراحی و تعبیه شده است. هنگامی که شما عبارتی را در کادر جستجوی Google وارد می کنید، Google بلافاصله پیشنهادات مشابه با عبارت شما را از سرور دریافت نموده و آن ها را نمایش می دهد. این امکان توسط تکنولوژی AJAX برای شما تعبیه شده و درواقع این تکنولوژی ایجکس است که نتایج را به سرعت برای شما نمایش می دهد.

مطالب مرتبط: فیچر اسنیپت چیست؟

برای آشنایی کامل تر با نحوه کار تکنولوژی ایجکس و اجزای آن، تا انتهای این مقاله با من همراه باشید.

معرفی تکنولوژی AJAX

سرواژه AJAX مختصر شدۀ عبارت Asynchronous JavaScript And XML و به معنای ترکیب جاوا اسکریپت و xml غیرهمزمان و ناهمگام است. آشنایی با این تکنولوژی پرکاربرد برای توسعه دهندگان و طراحان امری ضروریست.

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

اگر به عملکرد صفحات وب توجه کنید متوجه می شوید که برای نمایش هر مطلب یا صفحه ی جدید، صفحات وب مجدداً (refresh) می شوند تا محتوای جدید را نمایش دهند. تکنولوژی ایجکس این قابلیت را دارد که هنگام تغییر یک صفحه به جای لود شدن کل آن، تنها بخش تغییر داده شده را لود می کند. در واقع تکنولوژی ایجکس به کاربر این امکان را می دهد که بدون بارگذاری مجدد صفحه، داده هایی را به سرور ارسال کند تا در آنجا پردازش شوند. پس از آن اطلاعات را دریافت نماید و در صفحه وب به نمایش در آورد.

مطالب مرتبط: نرخ تبدیل چیست؟

اگر فناوری AJAX نبود، کاربر برای دریافت اطلاعات از سرور، حتی اطلاعات سبک، می بایست کل صفحه را Refresh می‌کرد. بسیاری از سایت های معروف دنیا مانند Gmail، YouTube و Facebook به صورت گسترده از این فناوری استفاده می‌کنند.

تاریخچه فناوری AJAX

فناوری هایی که Ajax را تشکیل می دهند علی رغم تمام جذابیت ها و مزایای خود جدید و نوین نیستند. توانایی برقراری ارتباط با سرور، از طریق یک فریم مخفی و بدون ارسال صفحه اصلی به سرور، از مدت ها پیش شناخته شده است. برقراری ارتباط میان کلاینت و سرور، از زمان معرفی قابلیت Internet Explorerبرای اسکریپت نویسی کنترل های ActiveX برروی مرورگر کلاینت (که به اواخردهه ۱۹۹۰میلادی بازمیگردند) قابل دسترسی بوده است.

تکنولوژی‎ های مورداستفاده AJAX

اژاکس تنها یک کلمه است اما پشت آن مفاهیم و تکنولوژی های بسیاری قرار دارد. که استفاده از این تکنیک را میسّر می سازد. تکنولوژی هایی که در سرور فعال هستند و تداخلی با فعالیت کاربر در سایت ندارند.

کدهای HTML یا XHTML و CSS بخشی مهمی در کار با AJAX هستند و به کمک آن ها محتوای صفحه نمایش داده می شود.

از فناوری DOM (Document Object Model)برای تعامل بیشتر با داده‌ها و نمایش پویای عناصر استفاده می شود.

به کمک XML داده ها را تبادل نموده و با XSLT داده ها را مدیریت می کنیم.

شئ XMLHttpRequest نقش مهمی در Ajax ایفا می‌کند و اجازه می دهد داده ها به صورت نامتقارن جا به جا شوند.

همچنین برای یکپارچه سازی تکنولوژی های بالا از زبان جاوا اسکریپت استفاده می شود.

به خاطر سنگین بودن فرمت XML، برای تبادل داده ها بیشتر JSON را به کار می بریم.

نحوه عملکرد AJAX

عملکرد این تکنولوژی طی چند مرحله و با ایجاد یک رویداد آغاز می شود. برای نمونه، با کلیک برروی یک دکمه یا لینک و یا فوکوس برای تایپ در فیلد نام کاربری در یک فرم ثبت نام، می تواند به عنوان یک رویداد برای اجرای کدهای جاوا اسکریپت جهت ارسال داده های بخش معینی به سرور تعیین شود. پس از اینکه رویدادی اتفاق می افتد، ابتدا مرورگر به کمک جاوا اسکریپت یک شئ XMLHttpRequest یا XHR می سازد و در خواست به شکل Httprequestبه سرور ارسال می شود.

این شئ یک API می باشد. که می‌تواند با جاوا اسکریپت، انواع مرورگرها و زبان های دیگر به منظور انتقال و مدیریت داده های XML ارسالی و دریافتی از مرورگرها از طریق HTTP مورد استفاده قرارگیرد.

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

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

مطالب مرتبط: TTFB چیست؟

مزایای AJAX

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

· رندر شدن سریع تر صفحات

· خواندن اطلاعات از سرور پس از لود شدن صفحه

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

· ارسال دیتا به سرور در پس زمینه سایت

· پشتیبانی از به روزرسانی هر بخشی از صفحه وب

· رابط کاربری سریع و پرمحتوا

· کاهش مصرف منابع سرور

· در نسخه NET4.0 این امکان فراهم شده تا داده های JSON از سرور با روشی کاملا موثر و قابل مدیریت، به زبان HTML رندر شوند.

معایب AJAX

· با توجه به پویا بودن تکنولوژی ایجکس، امکان دارد که Crawlerگوگل به درستی نتواند در محتوای صفحات بخزد. و این امر سبب می شود تا صفحاتی که با این تکنولوژی نوشته شده اند، از نظر سئو رتبه ی خوبی کسب نکنند.

· دشواری در رفع مشکل و تست کدهای برنامه های ایجکس

· کاهش سرعت لود شدن سایت

· استفاده از درخواست xmlhttp که توسط برخی از مرورگر‌ها پشتیبانی نمیشود.

· اجرا نشدن دستورات AJAX در مرورگری که از قابلیت جاوا اسکریپت پشتیبانی نمیکند. یا این قابلیت مرورگر توسط کاربر غیرفعال شده باشد.

موارد استفاده از AJAX

درواقع بهتر است از این تکنولوژی در پنل کاربری و مدیریتی که نیاز به ایندکس شدن و سئو ندارد و همچنین شامل محتویات خواندنی توسط کاربران نیست، استفاده شود. در این بخش برخی از کاربردهایی که بهتر است از AJAX در آن ها استفاده شود را شرح می دهیم.

· اعتبار سنجی فرم ها

· لایت باکس

· مرتب سازی یا فیلتر

· رای دهی

· لایک و ستاره دار کردن

· چت و گفتگوها

· کپچا (Captcha)

· موارد خاص در پروژه های اختصاصی

نتیجه گیری

در این مطلب به معرفی تکنولوژی Ajax (ایجکس،اژاکس) پرداختیم. باتوجه به این مطلب به صورت کلی دانستید که با استفاده از این فناوری، امکان دسترسی سریع به اطلاعات جدید هر صفحه وجود دارد. همچنین در رابطه با مزیت ها و معایب این تکنولوژی صحبت کردیم و در نهایت به این نتیجه رسیدیم که این فناوری هنوز آنگونه که باید تکامل نیافته است و در صورتی که واقعاً به آن نیاز ندارید، از آن استفاده نکنید، زیرا برای سئو سایت شما دردسر ساز خواهد شد.

جاوا اسکریپتajaxایجکسایجکس در جاواسکریپتhtml
من یه سئوکار جدیدم. شاید حرفه ای نباشم ولی چیزایی که از مطالعاتم یاد میگیرم رو در سایت ravis-ag.ir بارگذاری میکنم. خوشحال میشم حمایتم کنید.
شاید از این پست‌ها خوشتان بیاید