مقدمه

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

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

 

AJAX چیست؟

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

چرا AJAX مهم است؟

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

  • بارگذاری سریع‌تر صفحات: با AJAX می‌توان تنها بخش مورد نیاز صفحه را به‌روزرسانی کرد و نیازی به بارگذاری کل صفحه نیست. این کار زمان انتظار کاربر را کاهش می‌دهد و تجربه‌ای روان ایجاد می‌کند.
  • تعامل لحظه‌ای با سرور: درخواست‌ها به صورت پس‌زمینه (Background) ارسال می‌شوند و کاربر متوجه تأخیر نمی‌شود. اطلاعات مثل نتایج فرم، پیام‌های جدید یا داده‌های جدول، در همان لحظه نمایش داده می‌شوند.
  • صرفه‌جویی در پهنای باند و منابع سرور: چون فقط داده‌های مورد نیاز ارسال و دریافت می‌شوند، مصرف پهنای باند کمتر است و سرور فشار کمتری را تحمل می‌کند.
  • ایجاد تجربه کاربری تعاملی و پویا: کاربران بدون رفرش صفحه می‌توانند با وب‌سایت تعامل کنند. این ویژگی برای فرم‌ها، چت‌ها، گالری‌ها و فیدهای خبری بسیار مفید است.
  • امکان ترکیب با فناوری‌های مدرن: AJAX به راحتی با HTML، CSS و JavaScript ترکیب می‌شود و می‌توان آن را با کتابخانه‌ها و فریم‌ورک‌های مدرن مانند React یا Vue نیز به کار برد.

AJAX چگونه کار می‌کند؟

AJAX از ترکیب چند فناوری مختلف برای ایجاد وب‌سایت‌های سریع، پویا و تعاملی استفاده می‌کند:

  • JavaScript: مسئول کنترل تعاملات کاربر و مدیریت ارسال درخواست‌ها به سرور است. جاوااسکریپت تعیین می‌کند چه زمانی و چه داده‌ای باید به سرور فرستاده شود و پاسخ آن چگونه در صفحه نمایش داده شود.
  • XMLHttpRequest یا Fetch API: این ابزارها امکان برقراری ارتباط با سرور به صورت غیرهمزمان (asynchronous) را فراهم می‌کنند. به این معنا که صفحه بدون رفرش کامل می‌تواند داده‌ها را ارسال و دریافت کند.
  • HTML و CSS: برای نمایش داده‌ها و به‌روزرسانی محتوای صفحه استفاده می‌شوند. با AJAX می‌توان فقط بخشی از صفحه را به‌روزرسانی کرد و بدون نیاز به بارگذاری مجدد، محتوای جدید را نشان داد.
  • XML، JSON یا متن ساده: قالب‌های رایج برای تبادل داده بین مرورگر و سرور هستند. امروزه JSON به دلیل ساده و قابل خواندن بودن، محبوب‌ترین فرمت برای انتقال داده است.

مثال‌های کاربردی AJAX در دنیای واقعی

  • فرم‌های ورود و ثبت‌نام: اعتبارسنجی فوری نام کاربری و رمز عبور بدون رفرش صفحه.
  • چت و پیام‌رسان‌ها: ارسال و دریافت پیام‌ها به صورت زنده.
  • فیلتر و جستجوی لحظه‌ای: جستجو در محصولات، مقالات یا داده‌ها با بروزرسانی سریع.
  • بارگذاری محتوای پویا: نمایش اخبار، مقالات، محصولات یا تصاویر جدید بدون بارگذاری کل صفحه.
  • داشبورد و نمودارهای زنده: بروزرسانی اطلاعات سفارش‌ها، وضعیت موجودی، داده‌های مالی یا گزارش‌ها به صورت لحظه‌ای.
  • تعاملات کوچک و بهینه با سرور: لایک کردن، ثبت امتیاز، افزودن به سبد خرید و سایر فعالیت‌های جزئی بدون رفرش کل صفحه.
  • نظرسنجی‌ها و فرم‌های کوتاه: ارسال و دریافت پاسخ به صورت فوری و نمایش نتیجه در همان لحظه.

مثال عملی:

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

فایل html

<!DOCTYPE html>
<html lang="fa">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحه لاگین ساده</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #74ABE2, #5563DE);
        }

        .login-box {
            background-color: #fff;
            padding: 30px 35px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            width: 420px;
            text-align: center;
        }

        .login-box h2 {
            margin-bottom: 25px;
            color: #333;
        }

        .login-box input {
            width: 100%;
            padding: 12px 10px;
            margin-bottom: 18px;
            border: 1px solid #ccc;
            border-radius: 12px;
            outline: none;
            text-align: center;
            transition: all 0.2s;
        }

        .login-box input:focus {
            border-color: #1976d2;
        }

        .login-box button {
            width: 100%;
            padding: 16px;
            background-color: #1976d2;
            color: #fff;
            font-weight: bold;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.2s, transform 0.2s;
        }

        .login-box button:hover {
            background-color: #135ba1;
            transform: scale(0.97);
        }

        .message {
            margin-top: 15px;
            font-weight: bold;
            color: #d32f2f;
        }
    </style>
</head>

<body>
    <form class="login-box" action="login.php" method="post">
        <h2>ورود به سایت</h2>
        <input type="text" id="username" placeholder="نام کاربری">
        <input type="password" id="password" placeholder="رمز عبور">
        <button id="loginBtn">ورود</button>
        <div class="message" id="message"></div>
    </form>



    
    <!-- XMLHttpRequest با روش-->
    <!-- <script src="scripts/XMLHttpRequest.js"></script> -->


    <!-- Fetch API با روش-->
    <script src="scripts/Fetch_API.js"></script>


    <!-- jQuery با روش-->
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="scripts/jQuery.js"></script> -->


    <!-- Axios با روش-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="scripts/Axios.js"></script> -->

</body>

</html>

 

در فایل جاوااسکریپت خود می‌توانید هر یک از چهار روش AJAX (Vanilla JS، Fetch API، jQuery یا Axios) را بر اساس سلیقه و نیاز خود انتخاب کنید.

روش اول: استفاده از Vanilla JavaScript با XMLHttpRequest

// گرفتن دکمه ورود و اضافه کردن Event Listener
document.getElementById('loginBtn').addEventListener('click', function(event) {
    // جلوگیری از رفتار پیش‌فرض فرم (ارسال و رفرش صفحه)
    event.preventDefault();

    // گرفتن مقادیر نام کاربری و رمز عبور از input ها
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    // ایجاد یک شیء XMLHttpRequest برای ارسال درخواست AJAX
    const xhr = new XMLHttpRequest();

    // تنظیم نوع درخواست: POST و مسیر به فایل PHP
    xhr.open('POST', 'login.php', true);

    // تعیین هدر Content-Type برای ارسال JSON
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

    // تعریف تابع callback برای بررسی پاسخ سرور
    xhr.onreadystatechange = function() {
        // readyState 4 یعنی درخواست کامل شده است
        if (xhr.readyState === 4) {
            // تبدیل پاسخ سرور از JSON به شیء جاوااسکریپت
            const res = JSON.parse(xhr.responseText);

            // گرفتن المان پیام برای نمایش نتیجه
            const messageEl = document.getElementById('message');

            // نمایش پیام برگشتی از سرور
            messageEl.textContent = res.message;

            // تغییر رنگ پیام بر اساس موفقیت یا عدم موفقیت
            messageEl.style.color = res.success ? 'green' : 'red';
        }
    };

    // ارسال داده‌ها به سرور به صورت JSON
    xhr.send(JSON.stringify({ username, password }));
});

 

روش دوم: استفاده از Vanilla JavaScript با Fetch API

// گرفتن دکمه ورود و اضافه کردن event listener
document.getElementById('loginBtn').addEventListener('click', function(event) {
    // جلوگیری از رفتار پیش‌فرض فرم (ارسال و رفرش صفحه)
    event.preventDefault();

    // گرفتن مقدار نام کاربری و رمز از input ها
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    // ارسال درخواست AJAX با fetch
    fetch('login.php', { // مسیر فایل PHP که بررسی لاگین رو انجام میده
        method: 'POST', // نوع درخواست
        headers: { 'Content-Type': 'application/json' }, // نوع داده‌ای که ارسال می‌کنیم
        body: JSON.stringify({ username, password }) // تبدیل داده‌ها به JSON
    })
    .then(response => response.json()) // تبدیل پاسخ سرور به JSON
    .then(data => {
        // دریافت المان پیام برای نمایش نتیجه
        const messageEl = document.getElementById('message');
        // نمایش پیام برگشتی از سرور
        messageEl.textContent = data.message;
        // تغییر رنگ پیام بر اساس موفقیت یا عدم موفقیت
        messageEl.style.color = data.success ? 'green' : 'red';
    })
    .catch(err => console.error('خطا:', err)); // نمایش خطا در صورت مشکل در ارتباط با سرور
});

 

روش سوم: استفاده از jQuery AJAX

// گرفتن دکمه ورود و اضافه کردن event listener با jQuery
$('#loginBtn').click(function(event) {
    // جلوگیری از رفتار پیش‌فرض فرم (ارسال و رفرش صفحه)
    event.preventDefault();

    // گرفتن مقدار نام کاربری و رمز از input ها
    const username = $('#username').val();
    const password = $('#password').val();

    // ارسال درخواست AJAX با jQuery
    $.ajax({
        url: 'login.php', // مسیر فایل PHP که بررسی لاگین رو انجام میده
        method: 'POST', // نوع درخواست
        contentType: 'application/json', // نوع داده‌ای که ارسال می‌کنیم
        data: JSON.stringify({ username, password }), // داده‌ها به فرمت JSON
        success: function(res) {
            // نمایش پیام برگشتی از سرور
            $('#message')
                .text(res.message)
                .css('color', res.success ? 'green' : 'red'); // رنگ پیام بر اساس موفقیت
        },
        error: function() {
            // نمایش پیام خطا در صورت مشکل در ارتباط با سرور
            $('#message')
                .text('خطا در برقراری ارتباط')
                .css('color', 'red');
        }
    });
});

 

روش چهارم: استفاده از Axios

document.getElementById('loginBtn').addEventListener('click', function(event) {
    // جلوگیری از ارسال فرم و رفرش صفحه
    event.preventDefault();

    // گرفتن مقدار نام کاربری و رمز
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    // ارسال درخواست POST با Axios
    axios.post('login.php', { username, password }) // مسیر فایل PHP
        .then(response => {
            const data = response.data;
            const messageEl = document.getElementById('message');
            // نمایش پیام برگشتی از سرور و تغییر رنگ بر اساس موفقیت
            messageEl.textContent = data.message;
            messageEl.style.color = data.success ? 'green' : 'red';
        })
        .catch(error => {
            // نمایش پیام خطا در صورت مشکل ارتباط با سرور
            const messageEl = document.getElementById('message');
            messageEl.textContent = 'خطا در برقراری ارتباط';
            messageEl.style.color = 'red';
        });
});

 

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

درفایل php سرور

<?php
header('Content-Type: application/json'); // JSON تعیین هدر

$input = json_decode(file_get_contents('php://input'), true); // دریافت داده‌ها

// بررسی وجود داده‌ها
if (!isset($input['username']) || !isset($input['password'])) {
    echo json_encode([
        'success' => false,
        'message' => 'نام کاربری یا رمز عبور ارسال نشده است'
    ]);
    exit;
}


$username = $input['username'];
$password = $input['password'];

if ($username == 'admin' && $password == '123') {
    echo json_encode(['success' => true, 'message' => 'رمز عبور صحیح است']);
} else {
    echo json_encode(['success' => false, 'message' => 'نام کاربری یا رمز اشتباه است']);
}

 

امروزه از بین چهار روش ارائه شده برای AJAX، استفاده از Fetch API یا کتابخانه Axios به عنوان مدرن‌ترین و بهینه‌ترین روش‌ها شناخته می‌شوند. این روش‌ها کد کوتاه‌تر، خواناتر و مدیریت ساده‌تر روی پاسخ‌ها و خطاها ارائه می‌دهند. برخلاف XMLHttpRequest که قدیمی‌تر است، Fetch و Axios با Promise کار می‌کنند و به راحتی با JSON تعامل دارند، بنابراین برای پروژه‌های مدرن وب توصیه می‌شوند.

نکات مهم و بهترین شیوه‌ها در استفاده از AJAX

برای بهره‌برداری مؤثر از AJAX و ایجاد تجربه کاربری بهینه، توجه به چند نکته کلیدی ضروری است:

  1. مدیریت خطا و پاسخ سرور: همیشه اطمینان حاصل کنید که پاسخ‌های سرور بررسی می‌شوند و در صورت بروز خطا، پیام مناسبی به کاربر نمایش داده شود. این کار تجربه کاربری را بهبود می‌بخشد و از سردرگمی کاربر جلوگیری می‌کند.
  2. جلوگیری از درخواست‌های غیرضروری: ارسال درخواست‌های مکرر و بی‌مورد می‌تواند باعث افزایش بار سرور و کاهش سرعت سایت شود. بهتر است فقط در مواقع لازم و با شرایط مشخص، درخواست‌ها ارسال شوند.
  3. استفاده از JSON به جای XML: JSON ساده‌تر و سبک‌تر است و به راحتی با JavaScript کار می‌کند. استفاده از JSON باعث کاهش حجم داده و افزایش سرعت تبادل اطلاعات می‌شود.
  4. بهینه‌سازی تجربه کاربر در موبایل و دسکتاپ: مطمئن شوید که AJAX به صورت واکنش‌گرا کار می‌کند و در دستگاه‌های مختلف بدون مشکل اجرا می‌شود. طراحی مناسب برای موبایل و دسکتاپ، تجربه کاربری یکپارچه‌ای ایجاد می‌کند.

 

دانلود سورس کد نمونه صفحه لاگین با AJAX

می‌توانید سورس کد کامل صفحه لاگین با AJAX را که شامل HTML، CSS، JavaScript (با یکی از روش‌های مدرن مثل Fetch یا Axios) و فایل PHP سرور است، دانلود کنید. این کد آماده به شما کمک می‌کند سریع‌تر یک فرم ورود تعاملی و بهینه بسازید و نمونه عملی AJAX را در پروژه‌های خود استفاده کنید.

دانلود سورس کد نمونه