ajax چیست: ایجکس چه کاربردی دارد؟ معایبش چیست؟
Ajax ما را قادر میسازد بخشهایی از صفحه را بدون بارگذاری کل صفحه بروز رسانی کنیم. بارگذاری مجدد صفحات وب همواره زمانبر و خسته کننده است و باعث میشود پهنای باند کاربر بیش از حد مصرف شود. با ما همراه شوید تا بدانیم Ajax چیست و چه کاربردهایی و چه معایبی دارد؟
Ajax چیست؟ (ایجکس)
Ajax (ایجکس) تکنیکی برای ایجاد صفحات وب سریع و پویا میباشد. ایجکس به صفحات وب این امکان را میدهد که به صورت غیر همزمان و تنها با تبادل اطلاعات اندکی با سرور، بخشی از صفحه را به روز رسانی کنند. به این ترتیب میتوان تنها بخش هایی از صفحه را بدون بارگذاری کل صفحه به روز رسانی کرد.
در صورتی که صفحات معمولی باید کل صفحه را به منظور تغییر محتوا به روز رسانی کنند. بسیاری از وب سایت های معروف از جمله Google Maps، Gmail، YouTube و Facebook به شکل وسیعی از این فن آوری استفاده میکنند.
یکی از معروفترین مثالهای AJAX، سیستم Google Suggest است که به شکل بسیار زیبایی پیاده سازی شده است. شما عبارتی را در کادر جستجوی Google تایپ میکنید و Google بلافاصله با یک عملیات AJAX پیشنهادهایی را در مورد این عبارت به شما ارائه میکند. در اینجا نمونه هایی از تکنولوژی ایجکس را مشاهده کنید.
Ajax و فناوریهای مورد استفاده
عبارت Ajax به طیف وسیعی از فن آوری های وب اشاره دارد که میتوانند برای پیاده سازی یک برنامه تحت وب بکار روند، فنآوریهایی که در پشت صحنه و در سرور فعالیت میکنند و در نتیجه با وضعیت جاری صفحه وب تداخلی ندارند. بهطور کلی میتوان گفت فنآوریهای زیر مورد استفاده قرار میگیرند:
- HTML (یا XHTML) و CSS به منظور نمایش محتوا
- فن آوری DOM (Document Object Model یا مدل شیئی صفحه) برای نمایش پویای دادهها و تعامل با آنها
- XML برای تبادل دادهها و XSLT برای مدیریت دادهها
- XMLHttpRequest نیز برای تبادل غیر متقارن دادهها بکار میرود
- JavaScript به منظور یکپارچه سازی این فنآوریها
البته در حال حاضر عمدتاً بجای XML (که فرمتی نسبتاً سنگین است) از JSON برای تبادل دادهها استفاده میشود و حتی امکان استفاده از HTML فرمت بندی شده یا متن ساده نیز به این منظور وجود دارد. برای درک بهتر طرز کار ایجکس را در چند مرحله خلاصه کنیم:
- ابتدا یک رویداد Client (یعنی یک رویداد در مرورگر) رخ میدهد
- یک شیء از نوع XMLHttpRequest ساخته میشود
- این شیء XMLHttpRequest با اطلاعات لازم پیکربندی میشود
- سپس این شیء یک تقاضای غیر همزمان به سرور وب ارسال میکند
- وب سرور نیز پس از انجام پردازش لازم، نتیجه را که حاوی شیء XML (یا JSON) است برگشت میدهد
- شیء XMLHttpRequest تابع Callback (تابعی که پس از انتهای عملیات فراخوانی میشود) را صدا کرده و نتیجه حاصله (شیء XML) را پردازش میکند.
- در نهایت ساختار HTML صفحه به روز رسانی میشود. البته توجه داشته باشید که همواره لازم نیست استفاده از Ajax به خاطر انجام تغییری در صفحه باشد، گاهی اوقات شما ممکن است بخواهید یک عملیات سروری (همچون یک عملیات دیتابیس) را توسط AJAX انجام دهید، به گونهای که کاربر متوجه نشود.
چرا از Ajax استفاده کنیم؟
برنامههای تحت وبی که از ایجکس بهره میبرند خصوصیات زیر را دارا هستند:
- مؤلفه های آشنا و تعاملی رابط کاربری مانند نشان دهنده پیشرفت (progress bar)، tooltip ها، و همچنین پنجرههای pop-up
- کارایی بهتر برای برنامههای وب فرم، زیرا بیشتر بخشهای پردازشی صفحه وب میتواند در مرورگر انجام شود
- به روز رسانی مقطعی صفحه (partial update) که تنها بخش تغییر یافته صفحه را refresh میکند
- یکپارچه سازی بخشهای client-side برنامه با خدمات برنامه سرور، بخصوص در فرآیند تأیید اعتبار، تعیین نقش کاربران و پروفایل کاربران
- توانایی سفارشی سازی کنترلهای سرور به منظور استفاده از ظرفیتهای client
- پشتیبانی از بیشتر مرورگرهای معروف، از جمله IE، فایرفاکس، کروم و سافاری
اما مایکروسافت بهعنوان بزرگترین سازنده ابزارهای توسعهای و ارائه دهنده سیستم قدرتمند ASP.NET، نسخهای از Ajax را با نام Microsoft Ajax عرضه میکند که عمدتاً مبتنی بر ASP.NET است.
معماری Microsoft Ajax چیست؟
در واقع یک برنامه وب مایکروسافت ایجکس از یک پروژه صرفاً client-side و یا ترکیبی از یک client و server تشکیل شده است. یک پروژه صرفاً client از کتابخانه Microsoft Ajax بهره میبرد ولی از کنترلهای سرور استفاده نمیکند. مثلاً یک صفحه HTML میتواند حاوی مؤلفه های script باشد که از فایلهای کتابخانه AJAX استفاده میکنند.
از سوی دیگر کتابخانه AJAX مایکروسافت نیز به برنامههای Ajax امکان میدهد کلیه پردازشها را در سمت client صورت دهند. یک پروژه ترکیبی client و server نیز از کتابخانه Ajax مایکروسافت و کنترلهای سرور ASP.NET بهره میبرد.
معایب Ajax
البته هر پدیده جدیدی در کنار ارائه مزایای متعدد ممکن است نقاط ضعف یا کمبودهایی داشته باشد که در اینجا به برخی از مشکلات فن آوری ایجکس نیز اشاره میکنیم:
- هر مرورگری که از JavaScript یا سیستم تقاضای XMLHttp پشتیبانی نکند، یا در صورتی که کاربر این قابلیت مرورگر خود را غیر فعال کرده باشد، امکان استفاده صحیح از صفحاتی که به ایجکس متکی هستند را نخواهد داشت.
- با توجه به ساختار صفحاتی که از این فن آوری استفاده میکنند و ماهیت پویای محتوای ایجکس، ممکن است خواندن این محتوا توسط برنامههای Crawler امکان پذیر نباشد، در نتیجه این صفحات ممکن است به خوبی در موتورهای جستجوگر رتبه بندی نشوند.
- از نقطه نظر برنامه نویسی نیز حفظ و نگهداری، اشکالزدایی و تست صفحاتی که چنین محتوایی تولید میکنند دشوار خواهد بود.
- برخلاف صفحات معمولی که در آنها کاربر میتواند با فشردن دکمه Back صفحه کلید یا آیکون Back مرورگر به صفحات قبلی بازگردد، صفحاتی که از محتوای ایجکس استفاده میکنند امکان بازگشت به صفحه پیشین را ندارند، البته این مسئله در HTML5 به نوعی حل شده است.
- هنگامی که شما از ایجکس برای تغییر دینامیک محتوای صفحه استفاده میکنید، امکان مشاهده محتوای اضافه شده را در بخش view source صفحه نخواهید داشت زیرا محتوای صفحه همان چیزی است که در ابتدا از سرور خوانده شده بود، به این ترتیب پس از رفرش مجدد صفحه نیز محتوا به همان حالت قبلی برمیگردد. اگر میخواهید در محیط ASP.NET از ایجکس استفاده کنید باید در ابتدای صفحه خود یک کنترل ScriptManager قرار دهید. نماد اصلی ایجکس در ASP.NET، کنترلی به نام UpdatePanel است. میتوانید این کنترل را به همراه سایر کنترلهای مربوط به ایجکس در برگهای با نام Ajax در نوار ابزار ویژوال استودیو بیابید.
کاربردهای Ajax
با توجه به توضیحاتی که ارائه کردهایم، قطعاً نمیتوان فهرست مشخصی از کاربردهای Ajax ارائه کرد چون این فنآوری میتواند در بخش های مختلف کاربرد داشته باشد اما در اینجا برخی کارکردهای رایج و مهم Ajax را بهطور مختصر بررسی میکنیم:
بررسی وجود کاربر مشابه در هنگام ثبت نام کاربران: یکی از کاربردهای نسبتاً ساده ولی در عین حال مفید ایجکس، بررسی دیتابیس وبسایت در هنگام ثبت نام کاربران جدید می باشد. فرض کنید کاربری قبلاً در وب سایت شما با یک نام کاربری خاص ثبت نام کرده است، اکنون کاربر دیگری میخواهد با همین نام کاربری ثبت نام کند و احتمالاً شما نمیخواهید دو کاربر با یک نام کاربری یکسان ثبت نام کنند.
در حالت معمول شما میتوانید پس از فشردن دکمه ثبت نام توسط کاربر و در کد مربوط به دکمه ثبت نام، دیتابیس را بررسی کرده و در صورت وجود نام کاربری یکسان، عملیات ثبت کاربر جدید را متوقف کنید یا به کاربر پیام بدهید. در هر صورت به این ترتیب یک postback کامل خواهید داشت که شاید چندان خوشایند کاربر نباشد. اما به کمک Ajax میتوانید عملیات postback را حذف کرده و سرعت کار را افزایش دهید.
کافیست یک تابع استاتیک در کد سرور بنویسید که دیتابیس را چک کرده و در صورت وجود نام کاربری مشابه یک مقدار مشخص بازگشت دهد. سپس میتوانید در تابع client مربوط به خروج از کادر متنی نام کاربری یا در تابع client مربوط به کلیک دکمه ثبت نام، از طریق JQuery این تابع را فراخوانی نمایید و در صورت وجود نام کاربری یکسان در دیتابیس پیامی به کاربر بدهید و البته اجازه اجرای کد سرور را نیز ندهید. به این ترتیب احتیاجی به رفرش صفحه نخواهد بود، همین تکنیک را میتوانید به صورتهای دیگری نیز استفاده کنید.
احتمالاً نحوه نمایش نظرات در وبسایت Facebook یا نمایش تصاویر در بخش جستجوی تصاویر Google توجه شما را جلب کرده است. هر دو وبسایت رویکرد مشابهی دارند، در ابتدا بخش کوچکی از اطلاعات را نمایش میدهند تا صفحه خیلی سریع بارگذاری شود، سپس در صورت لزوم اطلاعات بیشتر را آرام بارگذاری میکنند. شما نیز میتوانید به کمک Ajax این تکنیک زیبا را شبیه سازی کنید.
یکی از کاربردهای مفید ایجکس در توسعه وب، انجام فعالیتهای دیتابیسی در پشت صحنه میباشد. از آنجا که عملیات مربوط به دیتابیس همواره سنگین و زمان بر بوده و میتواند موجب کندی اجرای صفحات وب شود، شما میتوانید برخی از عملیاتهای مربوط به دیتابیس از جمله و خواندن و نوشتن و یا حذف از دیتابیس را توسط ایجکس انجام دهید.
به این ترتیب احتیاجی به رفرش صفحه نخواهد بود و در نتیجه سرعت اجرای وبسایت شما افزایش خواهد یافت. البته به خاطر داشته باشید که ممکن است به دلایل مختلف از جمله عدم پشتیبانی مرورگر یا غیر فعال کردن جاوا اسکریپت توسط کاربر امکان استفاده از ایجکس وجود نداشته باشد، و در این شرایط شما باید سناریوی دیگری را به منظور مدیریت فعالیتهای دیتابیس به پیش ببرید.
میزان آشنایی شما با ایجکس تا چه اندازه است و شما برای چه مواردی از آن استفاده می کنید؟