AJAX چیست ؟

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

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

AJAX چیست ؟

ماهیت صفحات وب و پروتکل HTTP به گونه ای است که به ازای هر کنش و واکنش میان کاربر و سایتی که در حال کار با آن است، کل یک صفحه وب از نو بارگذاری و تازه سازی (refresh) می شود.

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

AJAX مجموعه ای از استانداردها و فناوری های وب است که به کمک آنها می توان برنامه هایی مبتنی بر وب تولید کرد که به آسانی با کاربران تعامل داشته باشند؛ این فناوری‎ها در جهت تبادل داده‎ها با یک سرور و بروز رسانی قسمتی از یک صفحه وب بدون بارگذاری مجدد آن است.

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

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

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

چرا AJAX ؟

1- عدم نیاز به بارگذاری مجدد کل یک صفحه وب

2- صرفه‎جویی در مصرف پهنای‎ باند

3- افزایش محسوس سرعت نرم‎افزارهای تحت وب

4- پشتیبانی از بیشتر مرورگرهای معروف

5- توانایی سفارشی سازی کنترلهای سرور به منظور استفاده از ظرفیت‎های client

مزایای استفاده از Ajax در طراحی سایت

- پشتیبانی مرورگرهای معروف از تکنیک Ajax، از جمله IE، فایرفاکس، کروم و سافاری

- سرعت و کارایی بهتر برای قسمت هایی از سایت که نیاز نیست کل اطلاعات سایت دوباره بارگذاری شود مثل فرم های ثبت نام و سبد خرید

- فقط قسمتی که تکنیک Ajax استفاده شده است در طراحی سایت تغییر می یابد یعنی اینکه فقط قسمتی از یک صفحه نه کل صفحه سایت رفرش شود

طراحی پورتال

معایب 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 را اولین بار کارشناسی از شرکت Adaptive Path به نام جسی جیمزگرت در مقاله ای با عنوان ای جکس؛ و خیلی سریع این تکنیک توسط برنامه نویسان در سراسر جهان استفاده شد، عامیانه ترین مثال برای Ajax سیستم Google Suggest که وقتی شما عبارتی را جستجو می کنید گوگل عبارتهای دیگر را با تکنیک Ajax برای شما می آورد یا مثلا سبدهای خرید سایت های فروشگاه اینترنتی وقتی شما کالایی را به سبد خرید اضافه می کنید فقط سبد خرید آپدیت می شود نه کل سایت یا در خیلی از فرم های ثبت نام این تکنیک به کار برده شده است یا مثلا در سایتی که خود ما طراحی کردیم کاربر بدون اینکه دوباره صفحه بارگذاری شود و حجم زیادی از پهنای باند کم شود خیلی راحت با تکنیک Ajax محصول شما بارگذاری می شود امروزه بسیاری از سایت های معروف دنیا نظیر فیس بوک، Google Maps، Gmail، YouTube از این تکنیک استفاده می کنند که کاربران را خسته نکنند و سرعت سایت بالاتر برود.  هزینه طراحی سایت       

کاربردهای فن آوری 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 استفاده کند نه اینکه کل صفحات سایت AJAX باشد نه قسمتی از صفحه مثلا سبد خرید بخش ثبت نام سایت که هم برای کاربر پویایی لازم را در سایت داشته باشد هم اینکه سرعت لود و بارگذاری سایت بالاتر برود.