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

Ajax چیست؟

.: دانلود این فیلم آموزشی با کیفیت بالا و حجم ۲۵ مگ :.

Ajax تکنیکی برای ایجاد صفحات وب به طور  سریع و پویا می‌باشد. Ajax به صفحات وب این امکان را می‌دهد که به صورت غیر همزمان و تنها با تبادل اندک اطلاعات با سرور، بخشی از صفحه را بروزرسانی کنند. به این ترتیب می‌توان تنها بخش‌هایی از صفحه را بدون بارگذاری کل صفحه، تغییر داد. اگر Ajax وجود نداشت کاربر برای دریافت اطلاعات از سرور، هر چند دریافت اطلاعاتی سبک، باید کل صفحه را Refresh می‌کرد. بسیاری از سایت‌های معروف دنیا مانند Gmail، YouTube و Facebook به شکل گسترده از این فناوری استفاده می‌کنند.

یکی از معروف‌ترین مثال‌های Ajax، سیستم Google Suggest بوده که به زیبایی طراحی و پیاده سازی شده است. کافی است شما عبارتی را در کادر جستجوی Google وارد کنید و Google بلافاصله با یک عملیات Ajax، پیشنهادهای مشابه با عبارت شما را از سرور دریافت کرده و آن‌ها را نمایش می‌دهد.

Ajax از چه تکنولوژی هایی استفاده می‌کند؟

Ajax تنها یک کلمه است اما پشت آن مفاهیم و تکنولوژی‌های مختلفی قرار دارد که استفاده از این تکنیک را میسر می‌سازد. تکنولوژی‌هایی که در پشت پرده یعنی در سرور فعال هستند و تداخلی با فعالیت کاربر در سایت ندارند. HTML (یا XHTML) و CSS بخشی مهمی در کار با Ajax هستند و ما به کمک آن‌ها محتوای صفحه را نمایش می‌دهیم. از فناوری DOM (Document Object Model) برای تعامل بیشتر با داده‌ها و نمایش پویای عناصر استفاده می‌کنیم.

همینطور به کمک XML داده‌ها را تبادل کرده و با XSLT داده‌ها را مدیریت می‌کنیم. همینطور XMLHttpRequest نقش مهمی در Ajax ایفا می‌کند و اجازه می‌دهد داده‌ها به طور غیرمتقارن جا به جا شوند. همینطور برای یکپارچه‌سازی تکنولوژی‌های بالا از زبان جاوا اسکریپت استفاده می‌کنیم. به خاطر سنگین بودن فرمت XML، برای تبادل داده‌ها بیشتر از JSON به جای XML استفاده می‌شود و حتی امکان استفاده از HTML فرمت بندی شده یا متن ساده نیز وجود دارد. تصویر زیر به شما کمک می‌کند Ajax را درک کنید.

می‌توانیم تصویر بالا در مراحل زیر خلاصه کنیم و مرحله به مرحله بررسی کنیم که Ajax چطور کار می‌کند. این تصویر برای آشنایی با Ajax کمک زیادی به شما می‌کند.

1. ابتدا یک رویداد در client یعنی مرورگر کاربر رخ می‌دهد.

2. یک شیء از نوع XMLHttpRequest ساخته می‌شود.

3. شیء XMLHttpRequest با اطلاعات لازم پیکربندی می‌شود.

4. سپس این شیء یک تقاضای غیر همزمان به سرور ارسال می‌کند.

5. وب سرور نیز پس از انجام پردازش لازم، نتیجه را که حاوی شیء XML (یا JSON) است برمی‌گرداند.

6. شیء XMLHttpRequest تابع callback (تابعی که پس از انتهای عملیات فراخوانی می‌شود) را صدا می‌زند.

7. نتیجه بدست آمده (شیء XML) توسط تابع Callback پردازش می‌شود.

8. در نهایت ساختار HTML صفحه بروز رسانی می‌شود.

چرا باید از Ajax استفاده کنیم؟

برنامه‌های تحت وب که از Ajax استفاده می‌کنند خصوصیات زیر را دارند:

• استفاده مولفه‌های آشنا و تعاملی رابط کاربری مانند نشان دهنده پیشرفت (progress bar)، tooltip و همچنین پنجره‌های pop-up

• کارایی در برنامه‌های وب فرم بالا است. زیرا بیشتر بخشهای پردازشی صفحه وب می‌توانند در مرورگر مدیریت شوند

• به روز رسانی مقطعی صفحه (partial update) که تنها بخش تغییر یافته صفحه refresh می‌شود

• یکپارچه سازی بخشهای client-side برنامه با خدمات برنامه سرور، بخصوص در فرآیند تایید اعتبار، تعیین نقش کاربران و پروفایل کاربران

• توانایی سفارشی سازی کنترلهای سرور به منظور استفاده از ظرفیت‌های client

• پشتیبانی از بیشتر مرورگرهای معروف، مانند IE، فایرفاکس، کروم و سافاری

معایب Ajax

البته هر فناوری جدید در کنار مزایا، ممکن است نقاط ضعف یا کمبودهایی هم داشته باشد. در اینجا به برخی از مشکلات تکنولوژی Ajax اشاره می‌کنیم:

• هر مرورگری که از JavaScript یا سیستم تقاضای XMLHttp پشتیبانی نکند یا اگر کاربر این قابلیت را در مرورگر خود غیر فعال کرده باشد، امکان استفاده درست از تکنولوژی Ajax وجود نخواهد داشت. بعضی از دستگاه‌های دیجیتال مانند گوشی‌های هوشمند و PDAها نیز ممکن است پشتیبانی کاملی از این فناوری نداشته باشند. البته این موضوع در حال بررسی بوده و در آینده‌ای نزدیک به طور کامل رفع خواهد شد.

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

• از نظر برنامه نویسی حفظ و نگه‌داری، اشکال زدایی و تست صفحاتی که چنین محتوایی دارند دشوار خواهد بود.

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

هنگامی که شما از Ajax برای تغییر داینامیک محتوای صفحه وب استفاده می‌کنید، امکان مشاهده محتوای اضافه شده به صفحه را در بخش view source نخواهید داشت زیرا محتوای صفحه همان چیزی است که در ابتدا از سرور خوانده شده بود، به این ترتیب پس از رفرش مجدد صفحه نیز محتوا به همان حالت قبلی باز می‌گردد.

رابطه مایکروسافت با Ajax

مایکروسافت بعنوان بزرگترین سازنده ابزارهای توسعه و ارائه دهنده سیستم قدرتمند ASP.NET، نسخه ای از Ajax را با نام Microsoft Ajax عرضه می‌کند که عمدتاً مبتنی بر ASP.NET است. اما منظور از معماری Microsoft Ajax چیست؟ مولفه‌های مختلف موجود در این سیستم چطور با هم کار می‌کنند؟ در واقع یک برنامه وب Microsoft Ajax از یک پروژه کاملا client-side و یا ترکیبی از یک client و server تشکیل شده است.

یک پروژه صرفاً client از کتابخانه Microsoft Ajax استفاده می‌کند ولی با کنترل‌های سرور کار نمی‌کند. مثلاً یک صفحه HTML می‌تواند حاوی مولفه‌های script باشد که از فایلهای کتابخانه Ajax استفاده می‌کنند. از سوی دیگر کتابخانه Ajax مایکروسافت نیز به به برنامه‌ها کمک می‌کند کلیه پردازشها را در سمت client انجام دهند. یک پروژه ترکیبی client و server نیز از کتابخانه Ajax مایکروسافت و کنترلهای سرور ASP.NET بهره می‌برد.

اگر می‌خواهید در محیط ASP.NET از Ajax استفاده کنید باید در ابتدای صفحه خود یک کنترل ScriptManager قرار دهید. نماد اصلی Ajax در ASP.NET، کنترلی به نام UpdatePanel است. می‌توانید این کنترل را به همراه سایر کنترلهای مربوط به Ajax در برگه ای با نام Ajax در نوار ابزار ویژوال استودیو پیدا کنید.

کاربردهای فناوری Ajax

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

بررسی وجود کاربر مشابه در هنگام ثبت نام

یکی از کاربردهای نسبتاً ساده ولی در عین حال مفید Ajax، بررسی پایگاه داده سایت در هنگام ثبت نام کاربر جدید می‌باشد. فرض کنید کاربری قبلاً در سایت شما با یک نام کاربری خاص ثبت نام کرده باشد، اکنون کاربر دیگری با همین نام می‌خواهد عضو سایت شود و شاید دوست نداشته باشید که کاربران شما نام کاربری یکسانی داشته باشند. در حالت عادی می‌توانید بعد از فشردن دکمه ثبت نام توسط کاربر و در کد مربوط به دکمه ثبت نام، دیتابیس را بررسی کرده و در صورت وجود نام کاربری یکسان، عملیات ثبت کاربر جدید را متوقف کنید یا به کاربر پیام بدهید. به هر ترتیب در این حالت یک postback کامل خواهید داشت که شاید چندان برای کاربر خوشایند نباشد.

اما به کمک Ajax میتوانید عملیات postback را حذف کرده و سرعت کار را افزایش دهید. کافی است یک تابع استاتیک (WebMethod) در کد سرور بنویسید که دیتابیس را چک کرده و در صورت وجود نام کاربری مشابه، یک مقدار مشخص را برگرداند. سپس می‌توانید در تابع client مربوط به خروج از کادر متنی نام کاربری یا در تابع client مربوط به کلیک دکمه ثبت نام، از طریق JQuery این تابع را فراخوانی کنید و در صورت وجود نام کاربری یکسان در دیتابیس پیامی به کاربر نشان دهید. همینطور نباید اجازه اجرای کد را به سرور بدهید و به این ترتیب احتیاجی به رفرش صفحه نخواهد بود، همین تکنیک را می‌توانید به روش‌های دیگری نیز پیاده سازی کنید.

نظرات سایت‌ها

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

شما هم می‌توانید به کمک Ajax این تکنیک زیبا را پیاده‌سازی کنید. به این منظور باید یک تابع سرور برای ایجاد اطلاعات صفحات جدید در قالب html بسازید، و این تابع را در رویداد scroll down صفحه فراخوانی کنید. در این صورت وقتی کاربر صفحه را scroll کرده و به انتهای صفحه برسد، تابع استاتیک مربوطه از JQuery Ajax اجرا شده و محتوای صفحه جدید به مرورگر ارسال می‌شود. سپس محتوای جدید شما در صفحه نمایش داده می‌شود. البته زبان قابل فهم مرورگر HTML است و شما هم باید محتوای خود را در قالب HTML ارسال کنید، یعنی تابع استاتیک سرور باید اطلاعات را به فرمت html تولید کرده و به صورت رشته ارسال کند. یک ترفند جالب هم وجود دارد. می‌توانید در مدت زمانی که تابع سرور در حال دریافت صفحات است، یک فایل Gif Animated را در صفحه نمایش دهید تا کاربر متوجه بشود که صفحات جدید در حال بارگذاری هستند.

کار با پایگاه داده

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

جمع بندی

Ajax یک تکنولوژی بسیار مفید و کاربردی است. اگر می‌خواهید بخشی از محتوای سایت شما بروز شده اما کل صفحه Refresh نشود می‌توانید از Ajax استفاده کنید. یعنی به کمک این تکنیک نیازی نیست برای یک تغییر کوچک کل صفحه دوباره بارگیری شود. این کار مزایای زیادی مانند تجربه کاربری بهتر و صرفه‌جوبی در مصرف پهنای باند را به همراه دارد. البته برخی از معایب آن را هم باید مدنظر داشته باشید. ممکن است Ajax موتور جستجو را گمراه کرده و موتور جستجو هنگام Crawl کردن صفحات دچار مشکل شود. یا احتمال دارد بعضی از دستگاه‌ها به خوبی از این تکنولوژی پشتیبانی نکنند.