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

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

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

فریم ورک (Framework) در اصطلاح کلی، معمولا به معنی کتابخانه ای از توابع یا ویژگی های آماده و انعطاف پذیر یک زبان برنامه نویسی است که به جهت تسهیل در روند کدنویسی ایجاد می شود، به این صورت که به جای اینکه در هر برنامه توابع را جداگانه بنویسند، توابعی انعطاف پذیر، برای مقاصد مختلف در قالب یک بسته ارائه می کنند و بر آن نام فریم ورک می نهند، اما بحث فریم ورک در آژاکس از این حالت هم فراتر می رود، فریم ورک های آژاکس قابلیت اتصال به سرور و کار با اشیاء XMLHttpRequest را دارند و معمولا برای ساخت برنامه هایی با رابط کاربری (interface) زیبا و دارای افکت های ویژه،  در وب به کار می روند.

نمایش پیام و تصویر در حال بارگذاری (loading) در آژاکس (ajax)

اگر مطالب قبلی «وبگو» را در رابطه با آژاکس (ajax) در بخش آموزش های مقدماتی مطالعه کرده باشید، حتما تا این لحظه متوجه شده اید که این فناوری تا چه حد جالب و کاربردی است، گفتیم که یک درخواست آژاکسی با کمک XMLHttpRequest ارسال می شود و پس از اینکه حالت onreadystate برابر 4 شد، بازخورد درخواست در صفحه به کاربر نشان داده می شود؛ و اما اکنون در این مطلب می خواهیم یک پارامتر دیگر به کد آژاکس خود اضافه کنیم و آن نمایش پیام در حال بارگذاری یا loading است که احتمالا نمونه آن را در بسیاری از صفحات مبتنی بر آژاکس دیده اید.

پس از ارسال درخواست آژاکسی به سرور، فرآیندی انجام می شود تا نتیجه درخواست به صفحه مرورگر کاربر ارسال شود، موقعی که همه این فعل و انفعالات به پایان می رسد xmlHttp.readyState ما برابر 4 خواهد شد (این یک قانون در آژاکس است و 4 نشانگر کامل شدن درخواست است)، اما در این بین اعداد 1 تا 3 وجود دارند که نشان دهنده در حال پردازش بودن درخواستند، لذا با کمی دقت می توان از آن در تابعی جهت نمایش یک پیام در حال پردازش یا loading استفاده کرد، بخش اصلی این تابع به صورت زیر خواهد بود:

if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
   document.getElementById(div).innerHTML=loadingmessage;
}

ارسال و دریافت اطلاعات با متد get و post در آژاکس (ajax)

پس از آشنایی اولیه با فناوری آژاکس (ajax) و ارسال و دریافت اطلاعات به صورت پنهانی و در پشت زمینه (بدون رفرش صفحه)، در این مطلب می خواهیم نحوه استفاده از متُد get و post (دو شیوه استاندارد برای رد و بدل کردن محتوا بین صفحات وب و فایل های سرور) برای دریافت محتوای یک فایل متنی یا php را آموزش دهیم، لطفا توجه داشته باشید که در این مطلب تنها مباحثی را شرح خواهیم داد که در جلسه قبل ذکر نکرده ایم، لذا اگر نکته ای به نظر مبهم است، قبل از طرح سئوال ابتدا به مطالب گذشته رجوع نمائید.

همانطور که پیش از این گفتیم شیوه نگارش یک درخواست برای دریافت اطلاعات در ajax به صورت زیر است:

xmlhttp.open("GET","textfile.php",true);
xmlhttp.send();

توضیح:
- پارامترهای xmlhttp.open سه مورد هستند: متد، فایل و غيرهمزمانی (asynchronously) که با دو مقدار true یا false مشخص می شود.
- غيرهمزمانی (asynchronously) به معنی این است که با true بودن این قابلیت، درخواست آژاکسی، وقفه ای در اجرای ادامه کد در صفحه ایجاد نمی کند (ادامه کد بدون توجه به دریافت یا عدم دریافت پاسخ درخواست آژاکسی از سرور، اجرا می شود).
- xmlhttp.send برای متد get مقادیری ندارد، اما برای متد post مقادیر رشته ای (string) دارد.

آشنایی با برنامه نویسی آژاکس (ajax)، تئوری نوین وب

آژاکس (ajax) عنوان جذابی است از نوعی برنامه نویسی ترکیبی که از سال 2005 با کاربرد آن توسط موتورهای جستجویی چون گوگل و برنامه نویسان، مطرح شد؛ این کلمه مخففی است از سرواژه های Asynchronous JavaScript and XML و در بیانی ساده به معنی نقل و انتقال اطلاعات در صفحات وب، بدون بارگذاری مجدد (reload) آنها است، نمونه برجسته ای از کاربرد آژاکس در سایت های اجتماعی، چت روم های آنلاین و یا سایتهای آپلود فایل خودنمایی می کند، اگرچه به کارگیری این تکنولوژی در مقایسه با سایر زبان های اسکریپت نویسی وب، تقریبا جدید و روشی نوین است، اما باید توجه داشت که آژاکس یک زبان جداگانه محسوب نمی شود بلکه شیوه ی نوینی از به کارگیری و ترکیب چند زبان برنامه نویسی (JavaScript and XML) است.

یادگیری آژاکس

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

نمایش و ذخیره اطلاعات فایل با آژاکس (Ajax)

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

فراخوانی فایل با آژاکس (Ajax)

همانطور که پیشتر در آموزش های مقدماتی برنامه نویسی آژاکس گفتیم، قبل از هر کاری، ابتدا باید شرایط ارسال کردن یک درخواست آژاکسی به سرور را فراهم کنیم، این کار با استفاده از شی XMLHttpRequest انجام می شود که یک درخواست در بستر آژاکس (ترکیبی از جاوا اسکریپت و زبان xml) به سرور ارسال می کند، معمولا از دو روش try و catch یا XMLHttpRequest مستقیم برای این منظور استفاده می کنند که در عمل هر دو شیوه کارکرد یکسان دارند (روش try و catch انعطاف پذیری بیشتری دارد)، در زیر ما درخواست آژاکسی خود را در یک تابع جاوا اسکریپتی آماده کرده ایم.

مقایسه (Comparison) و شرط (If و Else) در جاوا اسکریپت (JavaScript)

پیش از این با جاوا اسکریپت (JavaScript) و کارکردهای آن در صفحات وب آشنا شدیم، گفتیم که این زبان تنها در مرورگر کاربران اجرا می شود (سمت کاربر) و به نوعی محدود به آن است، همچنین محاسبات و عملگرهای اصلی را شناختیم و با مثال هایی از آنها کار کردیم، اکنون و در این مطلب می خواهیم کمی بیشتر وارد دنیای شیرین و بعضا پیچیده برنامه نویسی با جاوا اسکریپت شویم و با هم به بررسی عملگرهای مقایسه (Comparisons) و شرط (If و Else) و نحوه تعریف و استفاده از آنها با کمک مثال بپردازیم تا امر فراگیری،  آسانتر و کاربردی تر شود.

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

عملگرهای مقایسه در جاوا اسکریپت (JavaScript Comparisons):

کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)

معمولا در زبان های برنامه نویسی مختلف، برخی خاصیت ها و متدها بیشتر از سایر موارد به کار می روند که می توان اصطلاح متدهای پرکاربرد را برای آنها به کار برد، در کدنویسی با جاوا اسکریپت، دو متد پرکاربرد getElementById و innerHTML جزء برجسته ترین این موارد هستند، البته عبارت متد (Method) بیشتر در برنامه نویسی شی گراء (OOP یا Object Oriented Programming) کاربرد دارد و مواردی مانند innerHTML را خاصیت (Property) می نامند، با این وجود و به جهت اینکه این موضوع (OOP) در جاوا اسکریپت چندان مصداق ندارد، به اختصار و در این آموزش به هر دو، متد خواهیم گفت، به هر صورت برای آشنایی بیشتر و جهت تکمیل دانستنی هایی که تا این لحظه آموخته ایم، با ادامه مطلب همراه ما باشید.

متد getElementById

کار با پنجره pop up در جاوا اسکریپت (JavaScript)

همان طور که در آموزش های قبل دیدیم، جاوا اسکریپت یک زبان کد نویسی سمت کاربر یا client-side  است به این معنی که در مرورگر کاربران اجرا شده و توسط مفسر آن پردازش می شود، به این دلیل در کنار مزیت هایی که دارد، محدودیت هایی نیز وجود خواهد داشت، از این رو است که در برنامه نویسی وب صرف تسلط بر یک زبان سمت کاربر یا سمت سرور کفایت نمی کند و برنامه نویس موفق کسی است که بتواند ترکیبی از این دو را به کار گیرد، به هر صورت در این آموزش می خواهیم شما را با یکی دیگر از قابلیت های پرکاربرد جاوا اسکریپت آشنا کنیم و آن استفاده از پنجره های pop up یا همان پنجره های کوچک نمایش پیام است که در چهار دسته پنجره های هشدار (alert)، پنجره های تایید (confirm)، پنجره نمایش لینک (window.open) و پنجره های عکس العملی (prompt) دسته بندی می شوند.

پنجره pop up چیست؟

قبل از هر چیز باید ببینیم که پنجره pop up چیست و چه کاربردی دارد؟
pop up در برنامه نویسی وب به پنجره های کوچکی گفته می شود که به صورت خودکار یا با دخالت کاربر در مرورگر نمایش داده می شوند، به طور مثال ممکن است تبلیغات یا پیام های خوش آمدگویی و ... را در صفحات وب دیده باشید، اکثر آنها بر مبنای جاوا اسکریپت هستند، یعنی وقتی که صفحه بارگذاری می شود کد جاوا اسکریپت اجرا شده و پنجره به نمایش در می آید یا ممکن است این اتفاق با کلیک کاربر یا بردن ماوس روی یک عنصر مشخص رخ دهد، پنجره های pop up در دسته GUI ها یا با واسط کاربری گرافیکی (Graphical User Interface) دسته بندی می شوند، بدین معنی که قابلیت تعامل با رفتارهای کاربر را نیز دارا می باشند.

شروعی بر برنامه نویسی جاوا اسکریپت (Javascript)

یکی از زبان های انعطاف پذیر و در عین حال قدرتمندی که در کنار کدهای ساده HTML، مورد استفاده برنامه نویسان وب قرار می گیرد، جاوا اسکریپت (Javascript) است، البته شاید تصور شما از شنیدن عنوان کدهای جاوا اسکریپت بیشتر معطوف به کدهای کاربردی وبلاگ ها باشد، اما واقعیت این است که قدرت این زبان برنامه نویسی، خیلی بیشتر از نمودهای ظاهری است که می بینیم، بیشتر سایت ها و صفحات وب برای بررسی اعتبار فرم ها، ارتباط با سرور، شناسایی قابلیت های مرورگر کاربران، کار با کوکی ها (cookie) و خیلی چیزهای دیگر از آن استفاده می کنند، البته با همه این تفاسیر به دلیل سمت کاربر (Client side) بودن این زبان (یعنی جاوا اسکریپت تنها روی مرورگر کاربران قابل اجراست و برای تفسیر آن از مفسر مرورگر استفاده می شود نه مفسر سرور سایت)، در عین توانایی محدودیت هایی نیز وجود خواهد داشت.

شروع آموزش جاوا اسکریپت با یک مثال

برای شروع آموزش جاوا اسکریپت، بد نیست با هم یک مثال از قابلیت های این زبان اسکریپت نویسی را ملاحظه کنیم، در زیر یک کد ساده را جهت نمایش یک هشدار ایجاد کرده ایم:

کار با switch و case در جاوا اسکریپت (JavaScript)

اگر تا این لحظه از آموزش های مقدماتی برنامه نویسی با جاوا اسکریپت (JavaScript) همراه ما بوده باشید، حتما ملاحظه کرده اید که این زبان اسکریپت نویسی چقدر جالب و کاربردی است، اما اگر تصور می کنید که با دانستن مسائلی که تا کنون آموخته ایم، کار آموزش کدنویسی با جاوا اسکریپت به پایان رسیده، سخت در اشتباهید! برای اینکه بتوانیم به راحتی افکار و ایده هایمان را در بستر این زبان به مرورگر تفهیم کنیم، هنوز گام های زیادی باقی است و جزئیات بسیاری ناگفته مانده، اما جای نگرانی نیست، کافی است آهسته و پیوسته آموزش ها را دنبال کرده تا با هم این مسیر را به سلامت طی کنیم، در این مطلب نیز می خواهیم به یکی دیگر از مباحث، یعنی آشنایی با نحوه کار switch و case در جاوا اسکریپت بپردازیم.

دستور switch در جاوا اسکریپت (JavaScript)                                       

در بحث پیشین دیدیم که چگونه با if و else و ترکیب آنها یعنی elseif دستوراتی شرطی (Conditional Statements) را تعریف کنیم، همچنین با حلقه های for و while به کمک مثال هایی آشنا شدیم، اکنون می خواهیم ببینیم که دستور switch چه کاربردی در برنامه نویسی جاوا اسکریپت دارد.
به صورت ساده از دستور switch برای انتخاب موارد (case) گوناگون بر اساس درست شدن (true شدن) یک رابطه استفاده می شود، مثلا فرض کنید برای روزهایی که هوا بارانی است، از قفسه لباس های خود، کاپشن را برمی گزینیم و برای روزهای آفتابی و گرم، از لباسی پارچه ای استفاده می کنیم، یک دست لباس ساده نیز برای مواقعی که هوا نه گرم و نه سرد (معمولی) است داریم، کارکرد switch و case شباهت زیادی به این رفتار ما دارد، یعنی با توجه به شرایط بیرونی که برایش تعریف می کنیم، یکی از موارد (case) درون خود را به خروجی ارسال می کند، به مثال زیر توجه کنید.