AJAX چیست؟

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

AJAX چیست؟

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

تاریخچه AJAX

در دهه ۱۹۹۰، صفحات وب به صورت کامل بارگذاری می‌شدند. هر بار که کاربر درخواستی به سرور ارسال می‌کرد (مثلا پر کردن یک فرم)، کل صفحه دوباره از سرور فراخوانی می‌شد که نتیجه‌ آن کندی و تجربه کاربری ضعیف برای کاربر بود.

به مرور پس از پیشرفت‌ تکنولوژی‌های مختلف در این زمینه، در سال ۲۰۰۵ یکی از اعضای شرکت Adaptive Path به نام جسی جیمز گارت (Jesse James Garret)، اصطلاح AJAX را برای توصیف روشی نوین در توسعه وب معرفی کرد. این اصطلاح به تکنیکی اشاره دارد که امکان ارسال و دریافت داده از سرور را به صورت غیر‌همزمان و بدون نیاز به بارگذاری مجدد صفحه فراهم می‌کند.

یکی از اولین نمونه‌های موفق AJAX توسط گوگل در سرویس‌هایی مانند Google Maps و Gmail به کار گرفته شد. Google Maps به کاربران اجازه می‌داد بدون نیاز به بارگذاری مجدد صفحه، نقشه را جابجا کرده و به بخش‌های مختلف آن دسترسی داشته باشند. این قابلیت، تجربه کاربری کاملا جدیدی را به همراه داشت و به سرعت بین کاربران و توسعه‌دهندگان محبوب شد.

اگرچه اصطلاح AJAX در سال ۲۰۰۵ معرفی شد، اما پایه‌های آن از قبل هم وجود داشتند. شیء XMLHttpRequest که هسته AJAX است، اولین بار توسط شرکت مایکروسافت برای مرورگر اینترنت اکسپلورر ۵ در سال ۱۹۹۹ معرفی شد. این قابلیت بعد‌ها در مرورگر‌های دیگر مانند فایرفاکس، سافاری و کروم هم به کار گرفته شد.

AJAX از چه فناوری‌هایی استفاده می‌کند؟

AJAX از تکنولوژی‌های مختلفی برای ایجاد ارتباط بین کلاینت و سرور استفاده می‌کند که در ادامه آن‌ها را معرفی می‌کنیم:

استفاده از XMLHttpRequest

ایجکس از شیء XMLHttpRequest به عنوان هسته اصلی برای برقراری ارتباط با سرور استفاده می‌کند. این شیء به شما امکان می‌دهد درخواست‌های HTTP (مانند GET و POST) را ارسال و پاسخ‌ها را دریافت کنید. اگرچه فرمت XML در نام آن دیده می‌شود، اما از فرمت‌های مختلفی مانند JSON و HTML هم پشتیبانی می‌کند.

بیشتر بخوانید: تفاوت متد GET و POST

XHTML، HTML و CSS

سه زبان HTML، XHTML و CSS در برنامه‌نویسی وب برای ساختاردهی و ایجاد استایل دلخواه در صفحات وب استفاده می‌شود. AJAX به خوبی از این زبان‌ها پشتیبانی کرده و برای نمایش و به‌روزرسانی محتوای صفحات از آن‌ها استفاده می‌کند.

XML و JSON

در ابتدا AJAX برای ارسال و دریافت داده‌ها در فرمت XML طراحی شده بود، اما به مرور پشتیبانی از فرمت‌های دیگر مثل JSON و HTML را ارائه داد. امروزه معمولا از JSON برای انتقال داده‌ها در AJAX استفاده می‌شود که فرمت سبک‌تر و خوانا‌تری است.

جاوا اسکریپت

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

پشتیبانی از DOM (Document Object Model)

قابلیت DOM در AJAX صفحات HTML و XML را به صورت یک ساختار درختی سازمان‌دهی می‌کند. DOM از نود‌هایی تشکیل شده که به نود‌ها یا اشیاء فرعی بیشتری متصل می‌شوند. این ساختار به شما امکان می‌دهد کد‌های موجود در صفحات خاص را به صورت مؤثر‌تری استایل‌دهی یا ویرایش کنید.

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

ایجکس در زمینه‌های مختلفی استفاده می‌شود که در ادامه به مهم‌ترین موارد آن اشاره می‌کنیم:

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

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

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

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

مراحل اجرای AJAX

نحوه اجرا و استفاده از AJAX بسیار ساده است. این مراحل شامل ایجاد یک شیء XMLHttpRequest، برقراری ارتباط با سرور به وسیله متد open (برای مشخص کردن نوع درخواست مانند GET یا POST)، ارسال درخواست به سرور با متد send و در نهایت دریافت و پردازش پاسخ از سرور با استفاده از متد onreadystatechange است. پس از دریافت پاسخ، داده‌ها در صفحه بدون نیاز به بارگذاری مجدد به‌روزرسانی می‌شوند.

در ادامه یک مثال ساده از AJAX در جاوا اسکریپت را مشاهده می‌کنیم.

function run() {

let xhr = new XMLHttpRequest();

let url = ‘https://abcdefg.com/abc/1’;
xhr.open(“GET”, url, true);
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
}
xhr.send();
}
run();

مزایا و معایب AJAX

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

مزایای AJAX

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

بهبود تجربه کاربری: کاربران می‌توانند به صورت تعاملی و بدون نیاز به بارگذاری مجدد با صفحه‌های وب کار کنند.

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

غیر همزمان بودن (Asynchronous): در AJAX امکان ارسال درخواست‌های غیر همزمان به سرور وب وجود دارد، به این معنی که مرور‌گر‌ها نیاز به منتظر ماندن برای دریافت کامل داده‌ها قبل از نمایش محتوا ندارند. این قابلیت باعث می‌شود صفحه سریع‌تر و بدون تاخیر به‌روزرسانی شود.

معایب AJAX

مسائل امنیتی: اگر از AJAX به درستی استفاده نشود، ممکن است سایت دچار حملات امنیتی مانند حملات XSS (Cross-Site Scripting) و CSRF (Cross-Site Request Forgery) شود. این تکنیک‌ها می‌توانند از طریق درخواست‌های AJAX مورد سوءاستفاده قرار بگیرند.

بهینه‌سازی موتور‌های جستجو (SEO): موتور‌های جستجو معمولا محتوای بارگذاری شده از طریق AJAX را نمی‌بینند. بنابراین، استفاده بیش از حد از AJAX می‌تواند باعث مشکلاتی مثل تاثیر منفی بر رتبه‌بندی سایت در نتایج جستجو شود.

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

پیچیدگی بیشتر در کدنویسی و نگهداری: کدنویسی با AJAX می‌تواند پیچیدگی بیشتری نسبت به روش‌های سنتی داشته باشد. زیرا نیاز به مدیریت درخواست‌های غیرهمزمان، خطا‌های احتمالی و به‌روزرسانی‌های داینامیک دارد. این پیچیدگی می‌تواند نگهداری و دیباگ کردن کد را دشوار‌تر کند.

سخن آخر

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

منابع:

tps://aws.amazon.com/what-is/ajax/
https://www.geeksforgeeks.org/how-to-make-ajax-call-from-javascript/
https://www.geeksforgeeks.org/ajax-introduction/?ref=header_outind/
https://en.wikipedia.org/wiki/Ajax_(programming)/