-
آموزش استفاده از ajax
با استفاده از AJAX در اسکریپت ها و صفحات وب میتوانیم بدون بارگذاری مجدد صفحه، درخواست هایی را به سمت سرور ارسال کرده و نتایج را دریافت کنیم. در این مقاله آموزش ساده استفاده از ajax در PHP همراه با مثال های ساده خواهیم گفت. ابتدا نحوه عملکرد ajax را میبینم و سپس به استفاده از AJAX با JQuery خواهیم پرداخت.
ایجکس (AJAX) چیست ؟
ایجکس یا آجاکس مخفف عبارت Asynchronous JavaScript and XML به معنای جاوا اسکریپت و XML ناهمگام است.
به طور خیلی ساده، AJAX این امکان را به ما میدهد تا بدون بارگذاری (Refresh) یک صفحه وب، اطلاعاتی را به سمت سرور ارسال کرده و نتیجه را دریافت کنیم.
به طور معمول، وقتی میخواهیم وارد صفحه ای جدید شویم یا اطلاعات یک فرم را برای سرور ارسال کنیم، صفحه وب رفرش میشود. با استفاده از AJAX خواهیم توانست بدون نیاز به رفرش صفحه، اطلاعات را ارسال و یا محتوای صفحه جدید را دریافت کنیم.
از اصلی ترین مزایای این کار میتوان به موارد زیر اشاره کرد:
- به حداقل رساندن اطلاعات ارسالی و دریافتی از سرور
- عدم نیاز به دانلود کامل یک صفحه در هر بار بارگذاری صفحات
- بهبود رابط کاربری و تجربه کاربری سایت
استفاده از AJAX چگونه به بهبود تجربه کاربری کمک میکند ؟
فرض کنید یک فرم تماس با ما در سایت شما وجود دارد که کاربران میخواهند آنرا تکمیل و برای شما ارسال کنند. به طور پیشفرض، پس از ارسال فرم، صفحه دوباره بارگذاری شده و نتیجه به کاربر نمایش داده میشود.
اما با استفاده از AJAX بدون رفرش صفحه، پیام را ارسال کرده و نتیجه نهایی را در همان جا به کاربر نمایش میدهیم.
افزایش سرعت عمل انجام شده و ارائه بازخورد جذاب تر به کاربر، میتواند به بهبود UX سایت کمک کند.
نحوه کار AJAX در یک صفحه وب
یک فرآیند AJAX به طور کلی مراحل زیر را طی میکند.
- کاربر صفحه وب را باز میکند.
- با انجام فعالیتی، یک درخواست AJAX اجرا میشود.
- ابتدا تمام اطلاعات مورد نیاز برای ارسال درخواست جمع آوری میشود. (نظیر اطلاعات تماس کاربر در فرم)
- اطلاعات جمع آوری شده به سمت سرور ارسال میشود. (معمولاً به شکل POST)
- نتیجه این درخواست دریافت شده و بسته به نتیجه کارهایی انجام میشود.
ممکن است با توجه به نتیجه درخواست، اطلاعاتی در صفحه تغییر پیدا کند. (برای نمایش پیغام نتیجه و یا تغییر محتوای صفحه)
مثلاً در هنگام استفاده از AJAX در PHP، پیغام موفقیت آمیز بودن ارسال فرم را با ایجاد یک المنت جدید در صفحه نمایش میدهیم.
