illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

Ajax چیست و چه کاربردی دارد ؟

17294 ۲۴ دی ۹۲

Ajax چیست؟


شاید نتوان Ajax را به سادگی توصیف کرد ولی میتوان در یک جمله گفت Ajax ما را قادر میسازد بخشهایی از صفحه را بدون بارگذاری کل صفحه (refresh) به روز رسانی کنیم. مسلماً این قابلیتی است که خیلی ها به دنبال آن هستند زیرا بارگذاری مجدد صفحات وب همواره زمانبر و خسته کننده است ضمن اینکه باعث میشود پهنای باند کاربر نیز بیش از حد مصرف شود. Ajax تکنیکی برای ایجاد صفحات وب سریع و پویا میباشد. Ajax به صفحات وب این امکان را میدهد که به صورت غیر همزمان و تنها با تبادل اطلاعات اندکی با سرور، بخشی از صفحه را به روز رسانی کنند. به این ترتیب میتوان تنها بخش(هایی) از صفحه را بدون بارگذاری کل صفحه به روز رسانی کرد. در صورتی که صفحات معمولی باید کل صفحه را به منظور تغییر محتوا به روز رسانی کنند. بسیاری از سایتهای معروف از جمله Google Maps، Gmail، YouTube و Facebook به شکل وسیعی از این فن آوری استفاده می کنند. یکی از معروفترین مثالهای Ajax، سیستم Google Suggest است که به شکل بسیار زیبایی پیاده سازی شده است. شما عبارتی را در کادر جستجوی Google تایپ میکنید و Google بلافاصله با یک عملیات Ajax پیشنهادهایی را در مورد این عبارت به شما ارائه می کند.

AJAX-SEO

فن آوری های مورد استفاده


عبارت Ajax به طیف وسیعی از فن آوری های وب اشاره دارد که میتوانند برای پیاده سازی یک برنامه تحت وب بکار روند، فن آوریهایی که در پشت صحنه و در سرور فعالیت می کنند و در نتیجه با وضعیت جاری صفحه وب تداخلی ندارند. بطور کلی میتوان گفت فن آوریهای زیر مورد استفاده قرار میگیرند:
-    HTML (یا XHTML) و CSS به منظور نمایش محتوا
-    فن آوری DOM (Document Object Model یا مدل شیئی صفحه) برای نمایش پویای داده ها و تعامل با آنها
-    XML برای تبادل داده ها و XSLT برای مدیریت داده ها
-    XMLHttpRequest نیز برای تبادل غیر متقارن داده ها بکار میرود
-    JavaScript به منظور یکپارچه سازی این فن آوری ها
البته در حال حاضر عمدتاً بجای XML (که فرمتی نسبتاً سنگین است) از JSON برای تبادل داده ها استفاده میشود و حتی امکان استفاده از HTML فرمت بندی شده یا متن ساده نیز به این منظور وجود دارد.
برای درک بهتر طرز کار این فن آوری به تصویر زیر نگاه کنید

11-13-2013 09-28-04 ب

 

میتوانیم شکل بالا را در چند مرحله خلاصه کنیم:

  1. ابتدا یک رویداد client (یعنی یک رویداد در مرورگر) رخ میدهد
  2. یک شیء از نوع XMLHttpRequest ساخته میشود
  3. این شیء XMLHttpRequest با اطلاعات لازم پیکربندی میشود
  4. سپس این شیء یک تقاضای غیر همزمان به سرور وب ارسال میکند
  5. وب سرور نیز پس از انجام پردازش لازم، نتیجه را که حاوی شیء XML (یا JSON) است برگشت میدهد
  6. شیء XMLHttpRequest تابع callback (تابعی که پس از انتهای عملیات فراخوانی میشود) را صدا کرده و نتیجه حاصله (شیء XML) را پردازش می کند.
  7. در نهایت ساختار HTML صفحه به روز رسانی میشود

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

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


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

  • مولفه های آشنا و تعاملی رابط کاربری مانند نشان دهنده پیشرفت (progress bar)، tooltipها، و همچنین پنجره های pop-up
  • کارایی بهتر برای برنامه های وب فرم، زیرا بیشتر بخشهای پردازشی صفحه وب میتواند در مرورگر انجام شود
  • به روز رسانی مقطعی صفحه (partial update) که تنها بخش تغییر یافته صفحه را refresh میکند
  • یکپارچه سازی بخشهای client-side برنامه با خدمات برنامه سرور، بخصوص در فرآیند تایید اعتبار، تعیین نقش کاربران و پروفایل کاربران
  • توانایی سفارشی سازی کنترلهای سرور به منظور استفاده از ظرفیتهای client
  • پشتیبانی از بیشتر مرورگرهای معروف، از جمله IE، فایرفاکس، کروم و سافاری

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

معایب Ajax


البته هر پدیده جدیدی در کنار ارائه مزایای متعدد ممکن است نقاط ضعف یا کمبودهایی داشته باشد که در اینجا به برخی از مشکلات فن آوری Ajax نیز اشاره میکنیم:

  • هر مرورگری که از JavaScript یا سیستم تقاضای XMLHttp پشتیبانی نکند، یا در صورتی که کاربر این قابلیت مرورگر خود را غیر فعال کرده باشد، امکان استفاده صحیح از صفحاتی که به Ajax متکی هستند را نخواهد داشت. دستگاه هایی از جمله تلفنهای همراه هوشمند و PDAها نیز ممکن است پشتیبانی کاملی از این فن آوری نداشته باشند اگرچه این مسئله در آینده نزدیک مرتفع خواهد شد.
  • با توجه به ساختار صفحاتی که از این فن آوری استفاده می کنند و ماهیت پویای محتوای Ajax، ممکن است خواندن این محتوا توسط برنامه های Crawler امکان پذیر نباشد، در نتیجه این صفحات ممکن است بخوبی در موتورهای جستجوگر رتبه بندی نشوند.
  • از نقطه نظر برنامه نویسی نیز حفظ و نگهداری، اشکالزدایی و تست صفحاتی که چنین محتوایی تولید می کنند دشوار خواهد بود.
  • برخلاف صفحات معمولی که در آنها کاربر میتواند با فشردن دکمه Back صفحه کلید یا آیکون Back مرورگر به صفحات قبلی بازگردد، صفحاتی که از محتوای Ajax استفاده می کنند امکان بازگشت به صفحه پیشین را ندارند، البته این مسئله در HTML5 به نوعی حل شده است.

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

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


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

  • بررسی وجود کاربر مشابه در هنگام ثبت نام کاربران: یکی از کاربردهای نسبتاً ساده ولی در عین حال مفید Ajax، بررسی دیتابیس سایت در هنگام ثبت نام کاربران جدید میباشد. فرض کنید کاربری قبلاً در سایت شما با یک نام کاربری خاص ثبت نام کرده است، اکنون کاربر دیگری میخواهد با همین نام کاربری ثبت نام کند و احتمالاً شما نمیخواهید دو کاربر با یک نام کاربری یکسان ثبت نام کنند. در حالت معمول شما میتوانید پس از فشردن دکمه ثبت نام توسط کاربر و در کد مربوط به دکمه ثبت نام، دیتابیس را بررسی کرده و در صورت وجود نام کاربری یکسان، عملیات ثبت کاربر جدید را متوقف کنید یا به کاربر پیام بدهید. در هر صورت به این ترتیب یک postback کامل خواهید داشت که شاید چندان خوشایند کاربر نباشد. اما به کمک Ajax میتوانید عملیات postback را حذف کرده و سرعت کار را افزایش دهید. کافیست یک تابع استاتیک (WebMethod) در کد سرور بنویسید که دیتابیس را چک کرده و در صورت وجود نام کاربری مشابه یک مقدار مشخص بازگشت دهد. سپس میتوانید در تابع client مربوط به خروج از کادر متنی نام کاربری یا در تابع client مربوط به کلیک دکمه ثبت نام، از طریق JQuery این تابع را فراخوانی نمایید و در صورت وجود نام کاربری یکسان در دیتابیس پیامی به کاربر بدهید و البته اجازه اجرای کد سرور را نیز ندهید. به این ترتیب احتیاجی به رفرش صفحه نخواهد بود، همین تکنیک را میتوانید به صورتهای دیگری نیز استفاده کنید.
  • احتمالاً نحوه نمایش commentها در سایت facebook یا نمایش تصاویر در بخش جستجوی تصاویر google توجه شما را جلب کرده است. هر دو سایت رویکرد مشابهی دارند، در ابتدا بخش کوچکی از اطلاعات را نمایش میدهند تا صفحه خیلی سریع بارگذاری شود، سپس در صورت لزوم اطلاعات بیشتر را آرام آرام بارگذاری می کنند. شما نیز میتوانید به کمک Ajax این تکنیک زیبا را شبیه سازی کنید. به این منظور باید یک تابع سرور برای ایجاد اطلاعات صفحات جدید در قالب html بسازید، و این تابع را در رویداد scroll down صفحه فراخوانی کنید. در این صورت وقتی کاربر صفحه را scroll کرده و به انتهای صفحه برسد تابع استاتیک مربوطه از JQuery Ajax اجرا شده و محتوای صفحه جدید به مرورگر ارسال میشود. سپس شما این محتوای جدید را در صفحه نمایش میدهید. البته از آنجاییکه مرورگر چیزی جز html نمیفهمد شما هم باید صرفاً محتوای html ارسال کنید، یعنی تابع استاتیک سرور باید اطلاعات را به فرمت html تولید کرده و به صورت رشته ارسال کند. حتی شما میتوانید در زمان اجرای پشت صحنه تابع سرور دریافت صفحات (که ممکن یکی دو ثانیه طول بکشد) یک فایل gif animated را در صفحه پخش کنید تا کاربر متوجه شود که صفحات جدید به زودی نمایش داده میشوند.
  • یکی از کاربردهای مفید Ajax در توسعه وب، انجام فعالیتهای دیتابیسی در پشت صحنه میباشد. از آنجا که عملیات مربوط به دیتابیس همواره سنگین و زمان بر بوده و میتواند موجب کندی اجرای صفحات وب شود، شما میتوانید برخی از عملیاتهای مربوط به دیتابیس از جمله و خواندن و نوشتن و یا حذف از دیتابیس را توسط Ajax انجام دهید. به این ترتیب احتیاجی به رفرش صفحه نخواهد بود و در نتیجه سرعت اجرای سایت شما افزایش خواهد یافت. البته بخاطر داشته باشید که ممکن است به دلایل مختلف (از جمله عدم پشتیبانی مرورگر یا غیر فعال کردن جاوا اسکریپت توسط کاربر) امکان استفاده از Ajax وجود نداشته باشد، و در این شرایط شما باید سناریوی دیگری را به منظور مدیریت فعالیتهای دیتابیس به پیش ببرید.

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 8 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    عالی بود :)

  • ‏‏
    حسین محمدی(۲۴ دی ۱۳۹۲)

    ممنون آقای ساطع

  • ‏‏
    hamed17n(۲۴ دی ۱۳۹۲)

    بسیار عالی بود اگه میشه به آموزش آژاکس هم بپردازید

  • ‏‏
    منصوررمضانخانی(۲۶ دی ۱۳۹۲)

    با سلام و احترام
    خسته نباشید
    از شما فرهیخته عزیز تقاضا می کنم برای من دیگه مباحث آموزشی را ایمیل نکنید .
    با تشکر فراوان

    • ‏‏
      لقمان آوند(۲۶ دی ۱۳۹۲)

      سلام
      ما ایمیلی ارسال نمی کنیم . ممکنه مشترک فیدبرنر ما شده باشید که در این صورت در زیر ایمیل هایی که براتون ارسال میشه یه لینک unsabscribe هست که با کلیک رو اون می تونید اشتراکتون رو لغو کنید .

  • ‏‏
    mfurotan2(۳۰ دی ۱۳۹۲)

    خیلی عالیه دست شما درد نکنه
    اگه میشه آموزش ای جکس رو هم بذارید . ممنون

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram