آگهی
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)، تکنیک غیرهمزمانی در وب
» نمایش افکت fade in با ای جکس (Ajax)
» ذخیره و نمایش اطلاعات فایل با ای جکس (Ajax) و PHP
» ارسال و دریافت اطلاعات با متد GET و POST در ای جکس (Ajax)
» نمایش پیام در حال بارگذاری با ای جکس (Ajax)
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 لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




1 × 2
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form نادی
در:
سلام من دارم تو ری اکت از تگ p استفاده میکنم باید چیکار کنم که نقطه رو نچسبونه به اول خط!؟
۱۰:۵۹:۵۴ ۱۳۹۹/۰۱/۱۱

form amir
در:
سلام و ارادت سال نو مبارک ... من یه صفحه دارم که شامل یه سری پست هست و میخوام امکان لایک مطالب پست...
۱۳:۲۲:۲۱ ۱۳۹۹/۰۱/۱۰

form hadis
در:
سلام من تازه کارم میخاستم بدون اون قسمت درباره وبلاگ تعداد سطرها رو بیشتر و هم طرف راست و هم طرف چپ باشه میشه...
۰۴:۵۲:۱۸ ۱۳۹۹/۰۱/۱۰

form نیلوفر
در:
سلام من منوی سایتم فونتش بهم ریخته من هیچ دستکاری نکردم سایت وردپرسی هستش لطفا اگر اطلاعاتی دارین به من بدید ممنونم
۱۸:۵۹:۵۲ ۱۳۹۹/۰۱/۰۵

form محمود
در:
سلام. ممنون از راهنمایتان و متشکرم. دوباره مزاحم می شوم.
۱۰:۵۹:۴۷ ۱۳۹۹/۰۱/۰۵

form mahdi
در:
سلام استاد عزیز ، عذر میخوام من سوال زیاد میپرسم ، میخواستم بدونم چه توی css و چه javascript ما ie8 رو در نظر بگیریم...
۱۲:۱۳:۲۸ ۱۳۹۹/۰۱/۰۴

form محمود
در:
سلام و عرض ادب. وقتی روی فایل pdf روی سایتم کلیک می شود ،PDF در همان تب باز می شود ولی من می خام...
۱۱:۵۵:۱۸ ۱۳۹۹/۰۱/۰۴

form mahdi
در:
سلام استاد عزیز ، Bubble یا حباب دقیقا یعنی چی ؟ یعنی گسترده شدن رویداد یک عنصر تا عنصر فرزندش؟
۱۰:۴۱:۵۴ ۱۳۹۹/۰۱/۰۴

form D.A.Y.A.N.A
در:
سلام یه سوال داشتم وقتی که میخوام وب رو تو موتورهای جست و جو قرار بدیم اون که کد به ما...
۱۴:۵۳:۲۶ ۱۳۹۹/۰۱/۰۳

form محمود
در:
سلام و احترام. خیلی عالی بود، بسیار متشکر هستم، تمام.
۱۲:۵۴:۲۳ ۱۳۹۹/۰۱/۰۳

form mimi
در:
سلام. روی میهن بلاگ وبلاگ دارم و قالبش رو خودم تهیه کردم. چند ماهه که قالب وبلاگ همینه. رفرنس کدهای css در یک سایت...
۱۰:۰۲:۱۳ ۱۳۹۹/۰۱/۰۳

form محمود
در:
سلام استاد گرامی قبلن از اینکه سایت بسیار پر بار ، عالی و بدرد بخور دارید به شما تبریک می گویم. من می...
۱۳:۰۸:۲۰ ۱۳۹۹/۰۱/۰۲

form mahdi
در:
سلام استاد ، یه سوالی داشتم ، من باید دونه دونه ایونت ها رو یاد بگیرم ؟ چون خیلیاشون رو دیدم که اصلا الکی هستن...
۲۰:۲۸:۱۴ ۱۳۹۹/۰۱/۰۱

form mahdi
در:
سلام استاد عزیز و گرامی و با معرفت ، سال نو رو تبریک میگم بهت امیدوارم خودت و خانوادت سالم و سلامت و همدل و...
۱۹:۴۶:۴۰ ۱۳۹۸/۱۲/۲۹

form Meysam
در:
با سلام میخواستم وقتی پست وبلاگ باز میشه بجای post130 بیاد عنوان پست تو لینک قرار بگیره یجوری میخوام باشه که وقتی پست تو...
۱۱:۴۲:۴۴ ۱۳۹۸/۱۲/۲۸
آگهی