نمایش افکت fade in با آژاکس (ajax)

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

ساخت افکت fade in با ترکیب جاوا اسکریپت و css

فریم ورک های آژاکس (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 انعطاف پذیری بیشتری دارد)، در زیر ما درخواست آژاکسی خود را در یک تابع جاوا اسکریپتی آماده کرده ایم.