آموزش استفاده از AJAX در PHP با ۲ روش

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قبل از هر چیزی، اگر با تعریف فرم‌ها و ارسال درخواست get و post در PHP آشنا نیستید، پیشنهاد می‌کنم جلسات رایگان آموزش این دو را ببینید.

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

برای ارسال یک درخواست AJAX روش‌های متفاوتی وجود دارد. در این آموزش ۲ روش رایج و کاربردی را با هم بررسی می‌کنیم.

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

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

var ajx = new XMLHttpRequest();
           
ajx.onreadystatechange = function() {
    if(ajx.readyState === 4 && ) {
 
        if(ajx.status === 200) {
            alert(ajx.responseText);
 
        } else if (ajx.status === 404) {
            alert("صفحه مقصد وجود ندارد");
 
        } else {
            alert('Error Message: ' + ajx.statusText);
        }
    }
}
 
ajx.open('POST', 'contact.php');
ajx.send("name=Omid&age=21");

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

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

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

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

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

در فطعه کد بالا ابتدا بررسی کردم که اگر در وضعیت 4 قرار داشتیم کارهایی انجام شود. وقتی پاسخ از سرور دریافت شده بود، متناسب با کد وضعیت (status) حالت‌های ممکن برای تغییرات را بررسی کنیم. در نتیجه با توجه به هر حالت، می‌توانیم واکنش‌های مختلفی نشان دهیم.

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

کتابخانه جی کوئری یکی از محبوب‌ترین و پراستفاده‌ترین کتابخانه‌های جاوا اسکریپت است. کمتر برنامه نویس وبی پیدا می‌شود که حداقل اسم این کتابخانه را نشنیده باشد. اگر بخواهید ajax را با php استفاده کنید، این روش احتمالاً یکی از گزینه‌های خوبتان خواهد بود.

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

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

$.ajax();

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

ورودی این تابع را به صورت یک محتوای JSON در نظر گرفته می‌شود که هر عنصر آن، مشخص‌کننده یکی از خصوصیات درخواست ما است. به قطعه کد زیر توجه کنید:

$.ajax({
    type: "POST",
    url: 'contact.php',
    data: "name=Omid&site=sabzelco.ir&age=21",
    success: function(){
        alert("پیام شما با موفقیت ارسال شد");
    },
    error: function(){
        alert("خطای غیر منتظره ای رخ داده");
    }
});

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

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

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

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

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

function(response){
    alert("پیام شما با موفقیت ارسال شد");
}

متغیر response اطلاعات دریافتی از سرور در فرمت JSON است. در ادامه مثالی در مورد چگونگی کار با AJAX در PHP می‌زنم که یک مثال واقعی را با هم کار کرده باشیم.

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

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

دو فایل برای مینی‌پروژه خودمان در نظر می‌گیرم. یکی فایل حاوی فرم عضویت و دیگری عملیات‌هایی است که برای عضویت در خبرنانه انجام می‌شود. قاعدتاً باید اطلاعات کاربر را در دیتابیس ذخیره کنیم. برای این کار آموزش دیتابیس در PHP را ببینید.

کدهای زیر فرم عضویت و کدهای مربوط به درخواست AJAX است. دقت کنید که در این کد، از روش دوم استفاده کرده‌ام. پس باید فایل JQuery را نیز کنار این فایل قرار دهم.

<!doctype html>
<html>
<head>
<title>ثبت نام در خبرنامه</title>
</head>
<body>
<form id="newsletter" method="post">
    <div>
        <input type="text" name="name" id="name" />
        <input type="email" name="email" id="email" />
        <button type="submit" name="register" id="register">عضویت در خبرنامه</button>
    </div>
</form>

<script src="jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#newsletter').submit(function(e) {

        e.preventDefault();
        $.ajax({

            type: "POST",
            url: 'register.php',
            data: $(this).serialize(),

            success: function(response){
                var resp = JSON.parse(response);

                if (resp.success == "1"){
                    alert("عضویت با موفقیت انجام شد")
                } else {
                    alert(resp.message);
                }
            }
        });
    });
});
</script>
</body>
</html>

در این کد، برای رویداد ارسال فرم منتظر می‌مانیم. به محض ارسال فرم، با استفاده از تابع preventDefault() روی رویداد، از رفرش شدن صفحه جلوگیری می‌کنیم. این نوع صدا زدن توابع مربوط به OOP است؛ اگر آشنا نیستید، پیشنهاد می‌کنم آموزش برنامه نویسی شیءگرا را حتماً ببینید.

پردازش فرم سمت سرور

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

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

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

برای اینکه کدهای این فایل پیچیده نشود، صرفاً یک پیغام نتیجه را چاپ می‌کنم. اما یادتان باشد شما می‌توانید هر پردازش دیگری در این فایل انجام دهید! کدهای زیر را در فایل register.php قرار می‌دهم.

<?php
if (isset($_POST['name']) && $_POST['email']) {

    // Save all user Data

    echo json_encode(array('success' => 1));
} else {
    echo json_encode(array('success' => 0, 'message' => 'لطفا هر دو فیلد را تکمیل نمایید'));
}
?>

برای ردوبدل کردن اطلاعات در ارسال‌های AJAX با PHP لازم است پیام‌ها را در فرمت JSON ارسال کنیم. به‌همین دلیل از تابع json_encode() استفاده کرده‌ام. احتمال زیاد می‌دانید تابع چیست، اما اگر به آن مسلط نیستید یا نمی‌دانید چطور یک تابع دلخواه برای خودتان ایجاد کنید، آموزش تابع PHP کمک زیادی به یادگیری شما می‌کند.

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

در این آموزش، چگونگی استفاده از AJAX در PHP را یاد گرفتیم. با AJAX بدون بارگذاری مجدد صفحه می‌توانیم اطلاعاتی را به سرور ارسال کرده و اطلاعاتی را از آن دریافت کنیم. دو روش ساده اما پرکاربرد را با هم مرور کردیم. در اولی، با کدهای javascript یک شیء ارسال درخواست http ایجاد کرده و آن را ارسال کردیم. همچنین در یک تابع، وضعیت‌های مختلف نتیجه را بررسی کرده و اقدام مناسب را انجام دادیم.

در روش دوم از کتابخانه جی‌کوئری کمک گرفتیم. در ساده‌ترین حالت، با صدازدن تابع ajax() می‌توانیم درخواست ایجکس خود را ارسال کنیم. این تابع یک ورودی به‌شکل JSON می‌گیرد که تنظیمات، اطلاعات و توابعی که باید هنگام دریافت پاسخ استفاده شود را مشخص می‌کند.

اینکه از کدام یک استفاده کنید به پروژه و نیازمندی‌های شما بستگی دارد. معمولاً پیشنهاد می‌شود اگر در فرانت خود از JQuery استفاده می‌کنید، روش دوم را انتخاب کنید.

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

اگر سؤال یا تجربه‌ای در این مورد دارید، از بخش دیدگاه‌ها با ما و دوستانتان به اشتراک بگذارید. 🙂