ایجکس چیست؟
ایجکس (AJAX) مخفف عبارت “جاوااسکریپت ناهمگام و XML” (Asynchronous JavaScript and XML) ترکیبی از فناوری‌های توسعه برنامه‌های کاربردی وب است که برنامه‌های کاربردی وب را در پاسخ به تعامل کاربر، واکنش‌پذیرتر می‌کند. هر زمان که کاربران شما با یک برنامه کاربردی وب تعامل برقرار می‌کنند، مانند زمانی که روی دکمه‌ها کلیک می‌کنند یا جعبه‌های علامت‌دار را انتخاب می‌کنند، مرورگر داده‌ها را با سرور از راه دور تبادل می‌کند. تبادل داده می‌تواند باعث بارگیری مجدد صفحات و اختلال در تجربه کاربر شود. با ایجکس، برنامه‌های کاربردی وب می‌توانند داده‌ها را در پس‌زمینه ارسال و دریافت کنند، به طوری که فقط بخش‌های کوچک صفحه در صورت نیاز به‌روزرسانی می‌شوند.
موارد استفاده از ایجکس چیست؟
می‌توانید از ایجکس برای ایجاد ویژگی‌های مختلف در برنامه‌های کاربردی وب استفاده کنید.
- تکمیل خودکار:
- موتورهای جستجو هنگام جستجوی یک کلمه کلیدی خاص در نوار جستجو، گزینه‌های تکمیل خودکار را در زمان واقعی ارائه می‌دهند. ایجکس به صفحه وب اجازه می‌دهد تا هر ورودی کاراکتر را به سرور وب منتقل کند و فهرستی از توصیه‌های مرتبط را در صفحه موجود برگرداند.
- تأیید فرم:
- ایجکس به برنامه‌های کاربردی وب اجازه می‌دهد تا اطلاعات خاصی را در فرم‌ها قبل از ارسال آنها توسط کاربران تأیید کنند. به عنوان مثال، هنگامی که یک کاربر جدید حساب کاربری ایجاد می‌کند، صفحه وب می‌تواند به طور خودکار تأیید کند که آیا نام کاربری موجود است یا خیر، قبل از اینکه کاربر به بخش بعدی برود.
- عملکرد چت:
- پیام‌رسان‌های متنی و چت‌بات‌ها از ایجکس برای نمایش مکالمات بلادرنگ در مرورگرها استفاده می‌کنند. ایجکس متن نوشته شده توسط کاربر را به سرور ارسال می‌کند و به طور همزمان در رابط‌های چت سایر کاربران منتشر می‌کند.
- رسانه‌های اجتماعی:
- پلتفرم‌های رسانه‌های اجتماعی از ایجکس برای به‌روزرسانی فید کاربران با آخرین محتوا بدون بارگیری صفحه جدید در مرورگر استفاده می‌کنند. به عنوان مثال، توییتر هر زمان که فردی که دنبال می‌کنید به‌روزرسانی توییت می‌کند، فید شما را فورا به‌روزرسانی می‌کند.
- سیستم‌های رأی‌دهی و رتبه‌بندی:
- برخی از انجمن‌ها و سایت‌های نشانه‌گذاری اجتماعی از ایجکس برای نمایش رتبه‌بندی یا آرای پست‌های خاص در زمان واقعی استفاده می‌کنند. به عنوان مثال، می‌توانید یک پست را در ردیت بدون بارگیری مجدد کل صفحه، رأی مثبت یا منفی دهید.
برخی از مثال‌های عملی ایجکس چیست؟
در زیر چندین برنامه کاربردی ایجکس در دنیای واقعی را به اشتراک می‌گذاریم.
- بخوانید که چگونه جعبه ابزار WIND از ایجکس برای واکشی و ارائه داده‌های مکانی جغرافیایی در زمان واقعی استفاده می‌کند. کاربران می‌توانند برای مشاهده دقیق، روی یک منطقه خاص روی نقشه بزرگنمایی کنند.
- بخوانید که چگونه موتور چت Pubnub از ایجکس برای واکشی فایل‌های صوتی استفاده می‌کند که به طور خودکار در یک برنامه چت هوشمند پخش می‌شوند.
- بخوانید که چگونه یک راه حل نظارت بالینی مبتنی بر پیامک چند زبانه از ایجکس در پورتال ثبت نام خود برای تسهیل ثبت نام کاربران در زمان واقعی استفاده می کند. هنگامی که کاربران ثبت نام می کنند، برنامه ایجکس پیامک را به زبان دلخواه آنها ارسال می کند.
ایجکس از چه فناوری‌هایی استفاده می‌کند؟
ایجکس از چندین فناوری وب و برنامه‌نویسی تشکیل شده است که به برنامه‌های کاربردی وب اجازه می‌دهد داده‌ها را به طور ناهمزمان با سرورهای وب تبادل کنند.
- XHTML، HTML و CSS:
- زبان نشانه‌گذاری فرامتن توسعه‌پذیر (XHTML)، HTML و برگه‌های سبک آبشاری (CSS) زبان‌های نشانه‌گذاری هستند. می‌توانید از آنها برای اطلاع‌رسانی به مرورگرهای وب در مورد طراحی و سبک محتوای صفحه وب خود استفاده کنید.
- به عنوان مثال، می‌توانید از XHTML یا HTML برای قرار دادن متن و تصاویر در یک صفحه وب استفاده کنید. سپس، می‌توانید از CSS برای تغییر نوع فونت و رنگ پس‌زمینه استفاده کنید.
- XML:
- XML یک زبان برنامه‌نویسی است که به برنامه‌های کاربردی مختلف اجازه می‌دهد داده‌ها را تبادل کنند. از آنجایی که داده‌ها در برنامه‌های کاربردی مختلف به طور متفاوتی نمایش داده می‌شوند، می‌توانید از XML برای قالب‌بندی داده‌ها در متن ساده استفاده کنید. سپس برنامه‌های کاربردی ایجکس می‌توانند داده‌ها را در قالب XML مشترک تبادل و پردازش کنند.
- XMLHttpRequest:
- XMLHttpRequest یک API است که به مرورگرهای وب اجازه می‌دهد به طور ناهمزمان با سرور وب ارتباط برقرار کنند. می‌توانید از شیء XMLHttpRequest برای ارسال اطلاعات جزئی صفحه وب به سرور در قالب XML استفاده کنید.
- مدل شیء سند (DOM):
- مدل شیء سند (DOM) صفحات HTML و XML را در یک ساختار درختی سازماندهی می‌کند. DOM از گره‌هایی تشکیل شده است که به گره‌ها یا اشیاء فرزند بیشتری شاخه می‌شوند. این امکان را به شما می‌دهد تا کدها را در صفحات خاص به طور کارآمدتری طراحی یا اصلاح کنید.
- جاوااسکریپت:
- جاوااسکریپت یک زبان اسکریپت‌نویسی است که می‌توانید از آن برای ارائه محتوای پویا به صفحات وب استفاده کنید. محتوای پویا به اطلاعات صفحه وب اشاره دارد که در زمان واقعی به‌روزرسانی می‌شود یا به تعاملات کاربر بستگی دارد. به عنوان مثال، در ایجکس، جاوااسکریپت با سایر فناوری‌های وب که در این پست به آنها اشاره می‌کنیم، برای فعال کردن به‌روزرسانی‌های ناهمزمان صفحه کار می‌کند.
ایجکس چگونه کار می‌کند؟
ایجکس از جاوااسکریپت و XML برای فعال کردن تماس‌های ناهمزمان هنگام تبادل داده بین مرورگرها و سرورها استفاده می‌کند. در ادامه، توضیح می‌دهیم که مرورگرها به طور سنتی چگونه داده‌ها را تبادل می‌کنند و آن را با تبادل داده با ایجکس مقایسه می‌کنیم.
تبادل داده بدون ایجکس:
در یک مدل معمولی، هنگامی که کاربر اقدامی انجام می‌دهد، مرورگر یک درخواست HTTP به سمت سرور ارسال می‌کند. سرور وب درخواست را دریافت و پردازش می‌کند و داده‌های به‌روزرسانی شده را به مرورگر ارسال می‌کند. سپس، مرورگر صفحه وب را با داده‌های جدید به‌روزرسانی می‌کند.در این رویکرد، مرورگر کل صفحه را بارگیری مجدد می‌کند، حتی اگر داده‌های درخواستی شامل تغییرات جزئی باشد. علاوه بر این، مرورگر ممکن است درخواست‌های مکرر ارسال کند که نرم‌افزار سرور وب را بارگیری می‌کند.
تبادل داده با ایجکس:
به جای به‌روزرسانی کل صفحه، ایجکس از یک تابع جاوااسکریپت برای ایجاد یک شیء XMLHttpRequest در مرورگر استفاده می‌کند. سپس، اطلاعات صفحه را در قالب XML کامپایل می‌کند، که شیء XMLHttpRequest به سرور وب ارسال می‌کند. سرور وب درخواست را پردازش می‌کند و با داده‌های درخواستی پاسخ می‌دهد. در نهایت، مرورگر صفحه فعلی را با آخرین داده‌ها بدون بارگیری مجدد صفحه به‌روزرسانی می‌کند.
چرا ایجکس کارآمدتر است؟
علیرغم شباهت‌ها در تبادل داده و جریان اطلاعات، ایجکس کارآمدتر از درخواست‌های وب معمولی است. با ایجکس، مرورگر فقط محتوای وب خاصی را بر اساس داده‌های درخواستی به‌روزرسانی می‌کند. این کار بارگیری‌های مجدد غیرضروری را در سایر محتوای صفحه انجام نمی‌دهد. این امر برنامه‌های کاربردی ایجکس را سریع‌تر و واکنش‌پذیرتر از برنامه‌های کاربردی وب معمولی می‌کند.
