آشنایی با Ajax در ASP.MVC
این کلمه مخفف عبارت asynchronous JavaScript and XML می باشد. این یعنی از جاوا اسکریپت و XML به صورت نامگام استفاده کنیم. منظور از ناهمگام بودن این است که درخواست شما به سرور ارسال میشود و بلافاصله به کاربر(Client) برگشت میکند. در این لحظه کاربر میتواند کار خود را در صفحه ی وب ادامه دهد. به محض اینکه پیامی از سمت سرور در پاسخ به درخواست دریافت شود مرورگر آن را به صفحه ی وب اطلاع میدهد.
کاربردها
درحالت معمول بعد از هر درخواست (Request) صفحه ی مرورگر تازه (Refresh) میشود. برای صفحات کم حجم ممکن است زیاد به نظر نرسد. اما در صفحه های شلوغ این کار برای چند لحظه ارتباط کاربر با صفحه ی وب را مختل میکند. AJAX باعث میشود بروز رسانی صفحه در پس زمینه صورت گیرد و کار کاربر نرم ادامه پیدا کند.
در خیلی از موارد نیاز داریم تنها بخشهایی از صفحه ی وب را بروز کنیم. اگر قرار باشد با هر بار تغییر نتیجه ی بازی فوتبال یا هر بار دریافت پیام همه ی صفحه را بروز کنیم علاوه بر اینکه صفحه در سمت کلایت برای مدتی از دسترس خارج میشود فشار زیادی به سرور وارد میکند. چرا که همه ی اطلاعات باید از نو خوانده شده و به سمت کاربر ارسال شود.
در نهایت AJAX هم سرعت کار با صفحه ی وب را افزایش میدهد و هم بار ترافیکی آن را کم میکند. همچنین طراحی UI را بسیار کاربر پسند تر میکند.
اطلاعات کلی
اول باید بدانید که AJAX برنامه نویسی در سمت Client است و یک قابلیت در جاوا اسکریپت شمرده میشود. اگر شما جاوااسکریپت بلد باشید با هر زبان برنامه نویسی وب میتوانید از AJAX استفاده کنید. برای برنامه نویسی ناهمگام در سمت سرور در ASP از کلاسهای دات نت استفاده میشود.
اگرچه استفاده از jQuery کار کردن با AJAX را بسیار ساده میکند. اما در محیط برنامه نویسی ASP.MVC 4 بهتر است از کمک AJAX یا همان AjaxHelper استفاده کنید. دلیل اول این است که کد نویسی آن ساده تر است و دلیل دوم این است که فریم ورک jquery.unobtrusive-ajax.js خودش همه ی کدهای جاوا اسکریپت مورد نیاز را در صفحه درج میکند و نیاز به نوشتن کدهای جاوا اسکریپت را به حداقل میرساند.
AJAX میتواند در پاسخ به رویداد Submit یک فرم یا کلیک روی یک عکس یا حرکت موس فعال شود. در این مورد محدویتی وجود ندارد.
برنامه ی نمونه
در برنامه ی نمونه تلاش میکنیم یک سیستم نظر دهی به مطلب برای یک سایت ساده طراحی کنیم. دقت کنید که برای ساده سازی سایت تنها شامل یک مطلب است و اطلاعات نظر ها بعد از ارسال به سرور در یک لیست ذخیره میشود. در صورتی که صفحه را refresh کنید پاک خواهد شد. هدف از این پروژه نمایش سیکل رفت و برگشت داده و اثبات این قضیه که صفحه به طور کامل بروز نمیشود بوده است. در ادامه تصویر سایت را مشاهده می کنید :
میبینید مطلبی داریم که که قبلا دو کاربر درباره ی آن نظر ثبت کرده اند. در قسمت درج نظر یک فرم وجود دارد که شما میتوانید با وارد کردن اطلاعات و زدن دکمه ی ثبت نظر جدید ثبت کنید. سرور به محض دریافت اطلاعات فرم، آن را در بانک ذخیره میکند و نتیجه را دوباره به کاربر (کلاینت) برگشت میدهد. این اطلاعات برگشتی میتواند هر چیزی باشد( مثلا پیامی که اعلام کند اطلاعات در سرور ثبت شده است). در اینجا ما عین نظر ثبت شده را به انتهای لیست نظرات قبلی اضافه می کنیم.
جادو چگونه اتفاق می افتد !؟
برای پیاده سازی این فرم در ساده ترین حالت ابتدا به یک کنترلر نیاز دارید . این کنترلر با نام Home دارای یک اکشن با نام Index است و صفحه ای که مطلب در آن قرار دارد را نمایش میدهد. این اکشن نظراتی که قبلا در مورد مطلب در بانک ثبت شده است را در می آورد و سپس آنها را در قابل یک مدل به View اصلی با نام Index منتقل می کند. تا اینجای کار هیچ ربطی به AJAX ندارد و شما فقط دارید عصای جادوگری را دستانتان تاب میدهید.
(آموزش تصویری و همراه با عکس میباشد - متن کامل مقاله همراه با پروژه )
دانلود آموزش AJAX در ASP.MVC 4
همراه با پروژه ی نمونه - ویژوال استودیو 2012 - حجم 2.5 مگابایت