article

فریم ورک های ای جکس (Ajax Frameworks)

ajax-framework

اغلب استفاده ما از ای جکس (Ajax) در برنامه نویسی وب به قابلیت های ذاتی و استاندارد آن محدود می شود و شاید خواندن این مطلب برای کاربردهای عمومی چندان هم ضروری نباشد اما اگر بخواهیم تا حد تسلط کامل پیش برویم ناگزیر باید با مبحث فریم ورک های ای جکس حداقل در حد اطلاعات اولیه آشنا باشیم، بعضا ممکن است در پروژه های بزرگ برنامه نویسی برخی کارهای پیچیده با صرف کدنویسی ای جکس و متدهای متداول آن محقق نشود یا در کارهای گروهی به دلیل ایجاد سرعت و هماهنگی بیشتر یا سلیقه اعضاء تیم نیاز به کار با کتابخانه ها، API ها و توابع دیگری باشد که در این آموزش در مجموع به آنها فریم ورک می گوئیم، به همین خاطر در ادامه مباحث مقدماتی ای جکس (Ajax) این مطلب را اختصاص داده ایم به آشنایی با فریم ورک های ای جکس (Ajax Frameworks) تا با نگاهی بازتر بتوانیم از تمام قابلیت های تکنیک غیرهمزمانی در وب استفاده کنیم.

فریم ورک (Framework) چیست؟


منظور از فریم ورک (Framework) قابلیتی است که معمولا با کمک گرفتن از مجموعه ای از دستورالعمل ها، کتابخانه ها، رابط کاربری، کلاس ها و در کل امکانات فراهم شده از جانب یک نرم افزار یا یک زبان برنامه نویسی، ساختاری جدید ایجاد می کند تا به کارگیری آن نرم افزار یا زبان برنامه نویسی در راستای اهداف ایجاد فریم ورک، ساده تر و نتیجه با سهولت بیشتری محقق گردد، به عبارتی هدف از ایجاد فریم ورک ها معمولا فراهم نمودن ساز و کاری است که بتوان از امکانات یک نرم افزار یا زبان برنامه نویسی به نحو سریع تر و در برخی موارد کاملتر و حرفه ای تر استفاده کرد، فریم ورک های ای جکس نیز از این امر مستثنی نیستند و قابلیت ارسال درخواست و دریافت پاسخ از سرور و همچنین کار با آبجکت XMLHttpRequest را دارند و معمولا برای ساخت برنامه های تحت وب با رابط کاربری (User Interface) بهینه به کار می روند.

فریم ورک های ای جکس چه قابلیت هایی دارند؟


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

پر کاربرد ترین فریم ورک ها و کتابخانه های ای جکس


اینکه برای کار با ای جکس از چه فریم ورکی باید استفاده کنیم مسئله بسیار مهمی است چرا که انتخاب اشتباه می تواند دوباره کاری های زیادی را سبب شود و آرامش ما را بر هم زند! به همین دلیل توصیه می شود از فریم ورک هایی استفاده کنیم که شناخته شده، پرکاربرد و به روز باشند، در زیر لیستی جهت نمونه ارائه می شود.

کتابخانه جی کئوری (jQuery Library)


جی کئوری (jQuery) در واقع یک کتابخانه (Library) از متدها و توابع جاوا اسکریپتی با پشتیبانی از ای جکس است،  یادگیری این کتابخانه بسیار آسان و کاربردی است و مثال های زیادی برای کار با آن در فضای وب وجود دارد، در واقع شعار برنامه نویسان و توسعه دهندگان jQuery کم بنویس و کارهای زیاد انجام بده (Write Less, Do More) است!، این فریم ورک در آدرس 
jquery.com
در دسترس قرار دارد و کافی است فایل اصلی آن را دانلود و در صفحه خود به صورت یک سورس جاوا اسکریپتی معمولی وارد کنیم، سپس می توانیم از قابلیت ها و دستورات آن متناسب با نیاز برنامه استفاده کنیم:
https://api.jquery.com/jquery.ajax/
مثال:
<input name="user" id="user" type="text">
<div id="result"></div>
<script>
var user = $("#user").val();
$.ajax({
  type: "GET",
  url: "index.php",
  data: user,
  cache: false,
  success: function(data){
     $("#result").text(data);
  }
});
</script>
در این نمونه کد مقادیر فیلد متنی user به فایل index.php ارسال و نتیجه در بلاک div با آی دی result نمایش داده می شود.
در صورت آشنایی با جاوا اسکریپت کار با جی کئوری بسیار ساده تر و روند فرآیندها سریع تر خواهد بود.

رابط برنامه های کاربردى گوگل یا Google APIs


یکی دیگر از پرکاربردترین کتابخانه های توابع و کلاس ها در ای جکس توسط تیم توسعه وب گوگل ارائه شده است، این بستر عمدتا مبتنی بر جی کئوری است و جهت ایجاد ساز و کاری برای استفاده از امکانات برنامه ها و خدمات مختلف این غول دنیای فناوری در دسترس است که تحت عنوان Google APIs (API مخفف Application Programming Interface یا رابط برنامه کاربردی) شناخته می شود، بیشتر سایت هایی که از فریم ورک های ای جکس استفاده می کنند ترجیح می دهند از این سورس های آماده بهره بگیرند چرا که کافی است کاربر یک بار از سایتی با این API دیدن کند تا از آن پس فایل فریم ورک در حافظه مرورگر ذخیره شده و در مشاهدات بعدی از همان صفحه یا سایر صفحاتی که از فایل مشابه استفاده می کنند به سرعت بارگذاری شود، این کتابخانه ای جکس گوگل در آدرس های مستقیم به فایل آن قابل دسترسی است، به طور مثال نمونه کد زیر آدرس نسخه 1.7.1 جی کئوری بهینه شده (فشرده سازی شده) را فراخوانی می کند که باید کد آن را مطابق نمونه زیر در صفحه خود درج کنیم (یا حتی می توانیم فایل را دانلود کرده و در سرور خود آپلود و فراخوانی کنیم).
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
همچنین بد نیست به آدرس 
https://developers.google.com/closure
نیز سری بزنیم (متاسفانه در حال حاضر این لینک برای IP های ایران مسدود است)، در این آدرس توسعه دهنده گان گوگل مجموعه ابزارهایی را تحت عنوان Closure Tools معرفی کرده اند که برای استفاده بهینه از جاوا اسکریپت می تواند کاربردی باشد.

کتابخانه ای جکسی مایکروسافت


برای کسانی که به زبان ASP.NET برنامه نویسی می کنند امکانات بسیار خوبی در زمینه متدهای ای جکس و کتابخانه های از پیش طراحی شده توسط شرکت مایکرسافت ارائه شده است که در آدرس 
asp.net/ajax
قابل دسترسی است.

سایر فریم ورک های ای جکس


در پایان این مطلب بد نیست اشاره ای داشته باشیم به سایر فریم ورک های مرتبط با ای جکس از جمله کتابخانه Mootools در آدرس
mootools.net
کتابخانه Prototype  در آدرس 
prototypejs.org
و همچنین کلاس (در حال تکمیل شدن) Tiny Ajax برای PHP در آدرس
codeigniter.com/wiki/TinyAjax
به نظر می رسد W3C با توسعه آبجکت XMLHttpRequest در نسخه های بعدی نیاز به استفاده از فریم ورک ها را به حداقل ممکن کاهش خواهد داد.
sectionدسته بندی: آموزش مقدماتی » Ajax
related مطالب بیشتر:
» آموزش ای جکس (Ajax)، تکنیک غیرهمزمانی در وب
» نمایش پیام در حال بارگذاری با ای جکس (Ajax)
» ارسال و دریافت اطلاعات با متد GET و POST در ای جکس (Ajax)
» نمایش افکت fade in با ای جکس (Ajax)
» ذخیره و نمایش اطلاعات فایل با ای جکس (Ajax) و PHP
commentنظرات (۱۱ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: احسان
۱۸:۲۴ ۱۳۹۱/۰۹/۰۸
نوشته ها تون خیلی عالی بود خدا خیرت بده
نویسنده: وحید
۰۰:۲۵ ۱۳۹۲/۰۴/۱۷
سلام
من تقریبا نصف مطالب رو خوندم همه چی داره ولی بد نیست یه قسمت دیگه زیر تیتر بهینه سازی اضافه کنین
مثلا تیتر امنیت یا کدهای ایمنی یا نکته های امنیتی خلاصه در مورد امنیت کامل یک وبسایت لطفا
پاسخ: 
ممنون از پیشنهاد ارزشمند شما، در صورت امکان اضافه خواهد شد.
نویسنده: خلیل
۱۳:۱۹ ۱۳۹۲/۰۷/۲۷
ممنون خیلی خوب بود . اره میتونین در منوی درختی سمت راست بعد از دانستنی ها یه صفحه در موضوع امنیت اضافه کنین که خیلی خیلی بهتر میشه چون موضوع امنیت بیشتر به کار میره . البته یه پیشنهاد بود . بازم ممنون
پاسخ: 
خیلی ممنون از پیشنهاد ارزشمند شما، در صورت امکان اضافه خواهد شد.
نویسنده: Ali
۲۲:۵۶ ۱۳۹۳/۰۳/۲۸
سلام
ممنون از مطالب جالبتون...
من میخوام یک برنامه با آژاکس بنویسم که با در حین چت کردن متن رو همونجا نمایش بده
میتونین یه بخش به عنوان مثال های کاربردی بزنین؟ اگه ممکن باشه چند تا برنامه ساده با آجاکس رو توش بزارین ؟
متشکر از شما
پاسخ: 
طراحی سیستم چت نیاز به داشتن دانش و آشنایی در حد حرفه ای با مباحث مختلف جاوا اسکریپت و ترکیب آن با Ajax، PHP و MySQL است، متاسفانه نمی توان برای این مورد برنامه یا نمونه ساده ای نوشت! ذاتا پیچیده است و مباحث زیادی را شامل می شود، اگر به دنبال نمونه های ساده هستید، در آموزش های مقدماتی و در خلال مطالب به صورت موردی نمونه هایی وجود دارد.
نویسنده: مهدی
۱۶:۴۸ ۱۳۹۳/۰۵/۲۳
بازم عالی
نویسنده: CHRIS-7
۰۶:۴۴ ۱۳۹۴/۰۱/۱۰
با سلام - دوستان بنده چگونه می توانم از آژاکس برای انجمن SMF استفاده کنم - من کدها را در فایل دیگری نوشته اما می خوام آن فایل را فراخوانی کنم - ساده تر بگویم می خوام پستی را که می دهم بتوانم بدون بارگذاری مجدد پیش نمایش پست را مشاهده کنم.
با تشکر
پاسخ: 
سوال کلی است! ابتدا باید درک درستی از Ajax و قابلیت های آن داشته باشید، در کنار این موضوع باید با ساختار کدنویسی سیستم مدیریت محتوای انجمن نیز آشنا باشید، به عبارت دیگر بدون بررسی دقیق نمی توان راه حل ساده ای ارائه کرد!
نویسنده: CHRIS-7
۲۰:۴۲ ۱۳۹۴/۰۱/۱۹
ممنون بنده توانستم با دانش خود مشکلم را حل کنم.
با تشکر از شما و سایت بسیار مفید و کاربردیتان.
نویسنده: وحید الوندی
۱۴:۴۱ ۱۳۹۵/۰۱/۱۲
من برای اولین بار یک فریم ورک ساده css با نام رکسانا توسعه دادم که بر پایه scss است شما با معرفی این فریم ورک بنده را در توسعه و پیشرفت اولین فریم ورک ایرانی کمک کنید
لینک توضیحات
http://goo.gl/mO9jzJ
نویسنده: linkody
۱۴:۰۸ ۱۳۹۵/۰۵/۱۷
استفاده از ajax تو همه زبان های برنامه نویسی یه جوره؟ یعنی همونطوری که توی asp براش کد میزنیم تو php هم میزنیم؟
پاسخ: 
بله، استفاده از قابلیت Ajax به زبان برنامه نویسی سمت سرور ارتباط مستقیمی ندارد!
نویسنده: مهدی
۱۷:۴۰ ۱۳۹۵/۰۸/۰۸
googleapis چه جوری تلفظ میشه؟
پاسخ: 
تلفظ فارسی: "گوگل اپیز" تلفظ اصلی:
https://translate.google.com/#en/fa/googleapis

https://www.youtube.com/watch?v=gZTn6AQDy1g
نویسنده: امیر
۱۴:۰۵ ۱۳۹۶/۰۶/۲۳
با سلام خدمت شما دوست عزیز
من یک فرم با ایجکس درست کردم که یک سری اطلاعات رو برای یک صفحه php ارسال میکنه و اطلاعات هم درست در بانک من ذخیره میشه ولی من یک ایراد دارم که تا به امروز رفع نشده ؟ اونم اینکه وقتی اطلاعات ثبت میشه اطلاعات فیلدها هنوز وجود دارند که این درست نیست به زبان سادتر من می خوام وقتی اطلاعات ذخیره میشن فرم هم یا کلن display بشه و یا اینکه مقادیر فیلدها پاک بشن
ممنون میشم جواب بدین
پاسخ: 
انجام این کار با کدهای جاوا اسکریپت در متد readyState ممکن است:
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
document.getElementById('input-id').value = '';
}
}
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





6 × 2
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴

form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳

form mahtab
در:
سلام خسته نباشین ببخشید میخواستم بپرسم که چجوری میتونیم یه کلیپ رو از کامپیوتر از انیستا دانلود کنیم ؟؟ اها اینم بگم...
۱۳۹۹/۰۷/۰۲

form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱

form Iman Mafakheri
در:
سلام من یه قالب خارجی اوردم راست چینش کردم حتی فونتشم تغییر دادم اما متاسفانه وقتی متن فارسی مینویسم حروف رو جدا جدا مینویسه نمیدونم...
۱۳۹۹/۰۶/۳۰

form میثم صدیق
در:
سلام برای اضافه کردن یک المان با (append) من یک کلید گذاشتم اضافه میشه ولی با هر بار کلیک کردن اضافه میشود اگر بخواییم یک...
۱۳۹۹/۰۶/۲۹

form amin
در:
سلام و خسته نباشید می خواستم Slash ( / ) رو به صورت اتوماتیک از تمامی URL ها حذف کنم البته با کمک htaccess...
۱۳۹۹/۰۶/۲۵

form محمد
در:
سلام وقت بخیر من یه همچین کدی دارم میشه لطفا راهنمایی کنید مشکلش چیه؟ سپاسگزارم
۱۳۹۹/۰۶/۲۴

form سروش
در:
سلام . من اطلاعات را از دیتابیس دریافت میکنم و در جدول میبینم . میخوام مثلا 6 مورد آخر را در یک ردیف ببینم و...
۱۳۹۹/۰۶/۲۳

form Behdad kanani
در:
سلام اصلا نمی شه اینکارو انجام داد
۱۳۹۹/۰۶/۲۲

form جعفری
در:
سلام قبل از تبدیل تاریخ نوشتید مثلا خب این مقدار تاریخ برای من در دیتابیس در جدولی بنام startedtm بصورت یونیکس...
۱۳۹۹/۰۶/۲۰

form احمد
در:
با عرض سلام و خسته نباشید ببخشید برای فایل دانلودی باید از چه دستوری استفاده کنم فایل با پسوند pdf رو میخوام بزارم اگر امکانش...
۱۳۹۹/۰۶/۲۰

form شیما
در:
سلام آیا وقتی در قسمت وبلاگ دوستان وبلاگی رو ثبت میکنیم صاحب وبلاگ با استفاده از برنامه های خاصی میتونه متوجه بشه ؟
۱۳۹۹/۰۶/۱۹

form mahtab
در:
سلام خسته نباشین من نمیدونم چرا مدیریت وبم برام باز میشه اما وقتی میزنم مشاهده وب رو میزنم نمیاره واسم فقط امیدوارم هک...
۱۳۹۹/۰۶/۱۸

form ساناز محمدی
در:
سلام دوباره این ساب دامین بنده هست اگر یکی از مطالب را مشاهده کنید هر محصولی که ارسال شده داخل از طریق مدیریت یک...
۱۳۹۹/۰۶/۱۷
form محسن
در:
سلام و عرض ادب مجدد کد زیر هم کار نمیکنه مشکل چی میتونه باشه ؟!
۱۳۹۹/۰۶/۱۶
form ساناز محمدي
در:
سلام بنده یه ساب دامین دارم با دامنه شخصی حالا داخل این ساب دامین طرف آدرس سایت خودش رو داخل ساب دامین بنده میذاره مثلآ...
۱۳۹۹/۰۶/۱۶
form محسن
در:
سلام و عرض ادب لطفا راهنمایی کنید مشکل کد زیر چیه
۱۳۹۹/۰۶/۱۶
form احمد
در:
با عرض سلام ببخشید من با دستور append میخوام یه سطری رو به سبدم اضافه کنم ولی چطوری باید داخل append تگ ها رو بنویسم...
۱۳۹۹/۰۶/۱۵
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید طبق فرمایش شما من قبل از دستور else دستور if را نوشته بودم تا جایی که اطلاع...
۱۳۹۹/۰۶/۱۴
form احمد
در:
با سلام ببخشید طریقه استفاده از دستور else در ایجکس به چه صورت هست ایا باید دوباره فانکشن دان رو در هنگام شرط گذاشتن بزارم....
۱۳۹۹/۰۶/۱۳
form مجتهد
در:
سلام ابتدائا از سایت مفیدتون تشکر می کنم. من خیلی از آموزه هام رو از سایت شما یاد گرفتم. یه سوال دارم...
۱۳۹۹/۰۶/۱۳
form محمد حسین
در:
سلام لینک های من وقتی کلیک شوند اررور 404 تولید میکنند. علت چیست؟
۱۳۹۹/۰۶/۱۱
form حسین
در:
سلام بر شما و با تشکر از سایت خوبتون. من ابتدا با تابع mail پیش رفتم و یک if ایجاد کردم که اگر ایمیل...
۱۳۹۹/۰۶/۱۰
form mehdi
در:
خطای -22 مربوط به چیه؟
۱۳۹۹/۰۶/۱۰
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.