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




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

form نرگس
در:
یه سوال دبیرمون بهم داده که با استفاده از آرایه پنج نمره رو دریافت کرده و در حلقه for معدلشان را محاسبه کرده و نمایش...
۱۳:۰۳:۵۵ ۱۳۹۸/۰۹/۱۳

form محمد صادق نصرتی رامش
در:
چکونه لینک بگذارم و پول در بیاورم؟
۱۶:۰۵:۳۴ ۱۳۹۸/۰۹/۱۱

form مصطفی
در:
ببخشید چرا قسمت جستجوی سایتتون عمل نمیکنه!؟ دنبال مقاله راجع سشن ها و ساخت پنل مدیریت برای سی ام اسم میگردم یادمه یه مقاله قبلا...
۰۰:۱۹:۰۳ ۱۳۹۸/۰۹/۰۸

form مصطفی
در:
سلام نه هر چه کردم کد درست عمل نکرد و مجبور شدم یک ایندکس بسازم لینک بزارم با این کار قصد دارم هم بتونم سایت...
۲۱:۵۶:۰۱ ۱۳۹۸/۰۹/۰۷

form مصطفی
در:
سلام ادرس سایت من
www.ory.ir
است من 2 تا قالب درست کردم در دو پوشه اما با دستور زیر در روت مشکل دارم و...
۰۸:۰۳:۳۵ ۱۳۹۸/۰۹/۰۷

form مصطفی
در:
سلام . وقتی داریم یک رکورد رو آپدیت میکنیم ، چطوری بفهمیم کدوم ستون ها داره آپدیت میشه و اونارو بفرستیم به یک view ؟
۱۴:۳۴:۵۵ ۱۳۹۸/۰۹/۰۶

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

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

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

form پرتو
در:
با عرض سلام و خسته نباشید امیدوارم حالتون خوب باشه من دو سه سال پیش وبلاگم رو حذف کردم ایا امکانش هست برگرده؟ ادرس...
۱۴:۵۵:۵۲ ۱۳۹۸/۰۸/۲۰

form علی
در:
سلام من نمی تونم html tag رو چطور در وبلاگم قرار بدم وبلاگم اینه
tagtak.blog.ir
۱۰:۲۳:۳۴ ۱۳۹۸/۰۸/۲۰

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

form سمیه
در:
سلام ممنون بابت آموزش مفیدتون توی تگ ها هرچیزی که در تگ head قرار بگیره نمایش داده نمیشه، اما ممنون میشم...
۲۰:۴۹:۲۳ ۱۳۹۸/۰۸/۱۷

form استادمجازی
در:
سلام. از ادمین عزیز و همگی دعوت می کنم آموزش های خوبتون را بصورت آموزش ویدیویی یا صوتی و... در سایت ostadmajazi.com استادمجازی ...
۲۲:۱۲:۲۳ ۱۳۹۸/۰۸/۱۳