آموزش AJAX در PHP

با استفاده از AJAX در اسکریپت ها و صفحات وب میتوانیم بدون بارگذاری مجدد صفحه، درخواست هایی را به سمت سرور ارسال کرده و نتایج را دریافت کنیم. در این مقاله آموزش ساده استفاده از ajax در PHP همراه با مثال های ساده خواهیم گفت. ابتدا نحوه عملکرد ajax را میبینم و سپس به استفاده از AJAX با JQuery خواهیم پرداخت.

 

ایجکس (AJAX) چیست ؟

ایجکس یا آجاکس مخفف عبارت Asynchronous JavaScript and XML به معنای جاوا اسکریپت و XML ناهمگام است.

به طور خیلی ساده، AJAX این امکان را به ما میدهد تا بدون بارگذاری (Refresh) یک صفحه وب، اطلاعاتی را به سمت سرور ارسال کرده و نتیجه را دریافت کنیم.

به طور معمول، وقتی میخواهیم وارد صفحه ای جدید شویم یا اطلاعات یک فرم را برای سرور ارسال کنیم، صفحه وب رفرش میشود. با استفاده از AJAX خواهیم توانست بدون نیاز به رفرش صفحه، اطلاعات را ارسال و یا محتوای صفحه جدید را دریافت کنیم.

از اصلی ترین مزایای این کار میتوان به موارد زیر اشاره کرد:

  • به حداقل رساندن اطلاعات ارسالی و دریافتی از سرور
  • عدم نیاز به دانلود کامل یک صفحه در هر بار بارگذاری صفحات
  • بهبود رابط کاربری و تجربه کاربری سایت

استفاده از AJAX چگونه به بهبود تجربه کاربری کمک می‌کند ؟

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

اما با استفاده از AJAX بدون رفرش صفحه، پیام را ارسال کرده و نتیجه نهایی را در همان جا به کاربر نمایش میدهیم.

افزایش سرعت عمل انجام شده و ارائه بازخورد جذاب تر به کاربر، میتواند به بهبود UX سایت کمک کند.

 

نحوه کار AJAX در یک صفحه وب

یک فرآیند AJAX به طور کلی مراحل زیر را طی می‌کند.

  • کاربر صفحه وب را باز میکند.
  • با انجام فعالیتی، یک درخواست AJAX اجرا میشود.
  • ابتدا تمام اطلاعات مورد نیاز برای ارسال درخواست جمع آوری میشود. (نظیر اطلاعات تماس کاربر در فرم)
  • اطلاعات جمع آوری شده به سمت سرور ارسال میشود. (معمولاً به شکل POST)
  • نتیجه این درخواست دریافت شده و بسته به نتیجه کارهایی انجام میشود.

ممکن است با توجه به نتیجه درخواست، اطلاعاتی در صفحه تغییر پیدا کند. (برای نمایش پیغام نتیجه و یا تغییر محتوای صفحه)

مثلاً در هنگام استفاده از AJAX در PHP، پیغام موفقیت آمیز بودن ارسال فرم را با ایجاد یک المنت جدید در صفحه نمایش میدهیم.

 

استفاده از AJAX با جاوا اسکریپت

برای ارسال یک درخواست AJAX روش های متفاوتی وجود دارد. اولین حالت ممکن استفاده از اشیاء جاوا اسکریپتی است.

مزیت این روش این است که نیاز به هیچ کتابخانه اضافه تری نخواهید داشت! اما شاید مقداری سخت تر و گیج کننده تر نسبت به سایر روش های معمول باشد.

قطعه کد زیر یک درخواست POST را به صورت ایجکس به فایل contact.php ارسال میکند.

 

همانطور که در قطعه کد بالا می‌بینید، این عمل از سه بخش اصلی ایجاد شده است.

  • در ابتدا یک شئ XMLHttpRequest ایجاد میکنیم.
  • سپس با استفاده از تابع onreadystatechange() مشخص میکنیم در هنگام تغییر وضعیت درخواست چه اتفاقاتی رخ دهد.
  • در پایان نیز با متد open() نوع درخواست و مقصد آنرا مشخص کرده و با تابع send() درخواست را ارسال میکنیم.

برای ارسال پارامترهای مورد نیاز، می بایست آنها را به صورت رشته اطلاعاتی (Data String) و به عنوان ورودی send() بدهیم.

 

شئ درخواست (XMLHttpRequest) دارای یک ویژگی با نام readyState می باشد. این متغیر مشخص کننده وضعیت فعلی درخواست است. چهار مقدار مختلف برای این متغیر در نظر گرفته میشود:

  • وضعیت 1 یا OPENED : هنگامی که شئ ایجاد میشود در این وضعیت قرار داریم.
  • وضعیت 2 یا HEADERS_RECEIVED : هنگامی که سرآیندهایی برای درخواست تعریف شده است.
  • وضعیت 3 یا LOADING : درخواست به سرور ارسال شده و منتظر دریافت پاسخ هستیم.
  • وضعیت 4 یا DONE : درخواست ارسال شده و پاسخ دریافت شده است.

 

در کد بالا ابتدا بررسی کردیم که در وضعیت 4 قرار داشته باشیم، یعنی پاسخ را دریافت کرده ایم. حال با بررسی وضعیت درخواست (کد درخواست) میتوان حالت های ممکن برای یک درخواست را مورد بررسی قرار داد.

با توجه به هر حالت، خواهیم توانست واکنش مختلفی نشان دهیم.

 

استفاده از AJAX با JQuery

کتابخانه جی کوئری یکی از محبوب ترین و پر استفاده ترین کتابخانه های جاوا اسکریپت است. کمتر برنامه نویس وبی پیدا میشود که حداقل اسم این کتابخانه را نشنیده باشد.

در کتابخانه JQuery متدها و روش های متفاوتی برای ارسال یک درخواست به سمت سرور وجود دارد. ما در اینجا یکی از رایج ترین و ساده ترین روش ها را مورد بررسی قرار خواهیم داد.

برای صدا زدن و انجام یک درخواست AJAX در JQuery می‌توان به سادگی و با صدا زدن ajax در جی‌کوئری آنرا اجرا کرد!

 

این تابع ورودی های مختلفی میگیرد که با توجه به نوع ورودی ها، نحوه عملکردش متفاوت خواهد شد.

در اینجا کامل ترین و استانداردترین حالت استفاده از AJAX با JQuery را بررسی میکنیم.

ورودی این تابع را به صورت یک محتوای JSON در نظر میگیریم. که هر عنصر آن مشخص کننده یکی از خصوصیات درخواست ما خواهد بود.

به قطعه کد زیر توجه کنید:

 

در کد بالا خصوصیاتی را تعریف کرده ایم. این خصوصیات عبارتند از:

  • type : مشخص کننده نوع درخواست ارسال شده است.
  • url : آدرسی که قرار است درخواست به آن ارسال شود. میتوانیم این آدرس را به صورت کامل یا نسبی بدهیم.
  • data : اطلاعاتی است که میخواهیم همراه با درخواستمان ارسال شود. این مورد میتواند تعریف نشود!
  • success : تابعی که هنگام موفقیت آمیز بودن درخواست اجرا خواهد شد.
  • error : تابعی که در هنگام وجود خطا اجرا میشود. خطاهایی که مربوط به ارسال درخواست است. مثلاً سرور قطع است، اشتباهی در ارسال رخ داده و یا خطاهایی از این قبیل

 

دریافت اطلاعات از سرور با AJAX

اگر سرور بخواهد اطلاعاتی را در پاسخ به درخواست ما ارسال کند، میتوانیم آنرا به راحتی دریافت کنیم.

اگر برای توابعی که برای خصوصیت success یا error در نظر گرفته ایم یک ورودی در نظر بگیریم، این ورودی اطلاعات ارسالی از سمت سرور را به ما خواهد داد.

یعنی یک تابع success به صورت زیر خواهد شد.

 

که response همان اطلاعات دریافتی از سرور به صورت JSON می باشد.

 

در ادامه مثالی در مورد چگونگی کار با AJAX در PHP خواهیم زد که در آن این روش به کار برده شده است.

 

استفاده از AJAX در PHP

یک مثال برای ارسال درخواست AJAX به سرور، یک فرم ساده عضویت در خبرنامه است. برای عضویت در خبرنامه، کاربر باید ایمیل و نام خود را وارد کرده و فرم را ارسال کند.

میخواهیم بدون رفرش صفحه، فرآیند عضویت در خبرنامه انجام شود.

در اینجا دو فایل داریم. یکی فایل حاوی فرم عضویت و دیگری عملیات هایی است که برای عضویت در خبرنانه انجام میشود. (ثبت اطلاعات در پایگاه داده سایت)

کدهای زیر فرم عضویت و کدهای مربوط به درخواست AJAX است.

 

در این کد، برای اتفاق افتادن رویداد ارسال فرم منتظر می مانیم. به محض ارسال فرم، با استفاده از تابع preventDefault() روی رویداد، از رفرش شدن صفحه جلوگیری میکنیم.

حال مشابه قبل و با استفاده از کتابخانه JQuery محتوای فرم را به register.php ارسال میکنیم.

سپس با توجه به پاسخ سرور، پیام مناسبی را به کاربر نمایش خواهیم داد.

پاسخ های رد و بدل شده در این روش به صورت JSON هستند. بنابراین نیاز داریم در هنگام دریافت اطلاعات، آنها را پارس کنیم.

 

اکنون نوبت فایل سمت سرور است. به طور کلی می بایست در این فایل اطلاعات را دریافت و ذخیره کنیم. سپس پاسخ مناسبی را به کاربر ارسال نماییم.

کدهای زیر را در فایل register.php قرار میدهیم.

 

همانطور که گفته شد، برای رد و بدل کردن اطلاعات، لازم داریم پیام ها را به شکل JSON تبدیل کنیم.

 

مرور آموزش ایجکس در سایت

در این مقاله به بررسی چگونگی استفاده از AJAX پردازیم. با استفاده از AJAX در وب میتوانیم بدون بارگذاری مجدد صفحات، اقدام به ارسال و دریافت اطلاعات به و از سرور کنیم. ابتدا نحوه کار ایجکس در زبان جاوا اسکریپت را دیدیم و سپس نحوه استفاده از آن را با استفاده از کتابخانه JQuery بررسی کردیم.

در نهایت با یک مثال ساده، به کاربر AJAX در PHP پرداختیم.