معرفی Ajax

در این مقاله معرفی داشته باشیم در مورد ajax و توضیحات کاربردی در رابطه با ای جکس خدمت شما عرض کنم پس با من همراه باشید تا با ajax آشنا بشیم.

معرفی Ajax

 

فرض می کنیم که شما قبلا با jquery و javascript آشنایی داشته باشید، بنابراین شاید هنگامی که کدهای Ajax را ببینید، یک ابهام در ذهن شما به وجود بیاید که اصلا تفاوت Ajax و jquery و javascript در چیست، زیرا احساس می کنید که در حال استفاده از jquery و javascript هستید، نه یک چیز جدید. بنابراین بد نیست که تفاوت این سه را در همین ابتدای معرفی Ajax ، بیان کنیم.  jquery یک کتابخانه (چارچوب – framework) برای javascript است که به ما امکان می دهد که با نوشتن مقدار کمتری کد، عملیات های بیشتر و سطح بالاتری را اجرا کنیم. اما Ajax یک روش جدید برای ارتباط بین صفحه در حال اجرا در مرورگر اینترنت و یک صفحه پویا (با قابلیت تعامل با سرور و پایگاه داده سایت) می باشد. در واقع، Ajax یک تکنیک (technique) است، نه یک زبان جدید یا هر مورد دیگری که ممکن است به ذهن شما برسد. برای اجرای کدهای Ajax ، به پیش نیاز خاصی احتیاج ندارید. یعنی آن را می توان با کدهای javascript به تنهایی اجرا کرد. در واقع، کدهای Ajax ، همان کدهای javascript می باشد و تنها برای این تکنیک و روش ها و کدهای مربوط به آن، لغت Ajax به کار می رود. دقت شود که اگر در کدهای javascript نوشته شده در یک صفحه، روش های کتابخانه jquery هم به کار رفته باشد، باید به فایل کتابخانه jquery ارجاع داده شود (این مورد را به صورت کلی بیان کردیم، نه برای تکنیک Ajax . زیرا گاهی کدهای javascript ، شامل روش های تکنیک Ajax و همچنین روش های کتابخانه jquery می باشد و کاربر وقتی ارجاع به فایل کتابخانه jquery را حذف می کند و مشاهده می کند که کدها به درستی اجرا نمی شوند، آنگاه تصور می کند که تکنیک Ajax به فایل کتابخانه jquery نیاز داشته است).

پیش نیاز اجرای ajax

 

معرفی ajax

 

 

حال که تفاوت بین Ajax و jquery و javascript بیان شد (که حداقل پیش نیاز اجرای آن را بدانید و ابهامی در مورد شروع یادگیری یک زبان جدید نداشته باشید)، بیان می کنیم که اصلا Ajax چه قابلیتی را در اختیار ما قرار می دهد که تاکنون از آن محروم بوده ایم. فرض کنید وب سایت ما با یک زبان پویا (داینامیک) مثل PHP برنامه نویسی شده باشد. وقتی کاربر یک صفحه PHP (با پسوند php) از سایت را در مرورگر اینترنت خود اجرا می کند، کدهای PHP در سرور سایت اجرا شده و نتیجه آن، به صورت کد HTML (که استاتیک است) به کامپیوتر کاربر ارسال شده و در مرورگر اینترنت وی، کدهای HTML اجرا می شوند و کاربر نتیجه را در خروجی مرورگر اینترنت مشاهده می کند. پس مرحله اجرای کد PHP ، در سرور و مرحله اجرای کد HTML ، در کامپیوتر کاربر است. پس صفحه PHP نمی تواند انتخاب های کاربر در صفحه را ببیند، در واقع انتخاب هایی که کاربران در صفحه HTML انجام می دهند (مثل تغییر اطلاعات یک فرم و انتخاب های آن)، تنها با همان کد HTML موجود در صفحه است و تا زمانی که یک درخواست دیگر به سرور نفرستند، صفحات سرور از انتخاب های کاربر با خبر نخواهند بود.

 

تعامل هایی بین کامپیوتر کاربر و صفحات پویا در سرور با استفاده از تکنیک ajax

 

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

Ajax از روش XMLHttpRequest برای ارتباط با سرور (صفحات سرور) استفاده می کند. لغت Ajax ، مخفف Asynchronous Javascript And XML می باشد (در واقع به این نکته اشاره دارد که در آن از کدهای javascript برای ایجاد XMLHttpRequest استفاده می شود).

 

کاربردهای فن آوری 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 وجود نداشته باشد، و در این شرایط شما باید سناریوی دیگری را به منظور مدیریت فعالیتهای دیتابیس به پیش ببرید.

 

چرا باید از 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 بهره میبرد.