AJAX با PHP

AJAX چیست؟

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

جریان کار AJAX

1. کاربر دکمه‌ای را کلیک می‌کند
2. JavaScript درخواستی به سرور می‌فرستد
3. PHP درخواست را پردازش می‌کند
4. PHP پاسخ (معمولاً JSON) برمی‌گرداند
5. JavaScript پاسخ را دریافت و صفحه را به‌روزرسانی می‌کند

سمت سرور — PHP API

<?php
// api.php
header("Content-Type: application/json");

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

// پردازش
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $name = $input["name"] ?? "";
    $email = $input["email"] ?? "";

    // اعتبارسنجی
    if (empty($name) || empty($email)) {
        echo json_encode([
            "success" => false,
            "message" => "نام و ایمیل الزامی است"
        ]);
        exit;
    }

    // پاسخ موفق
    echo json_encode([
        "success" => true,
        "message" => "سلام $name! داده‌ها ذخیره شدند.",
        "data" => ["name" => $name, "email" => $email]
    ]);
}
?>

سمت کلاینت — JavaScript (fetch)

// ارسال داده با fetch
async function sendData() {
    const data = {
        name: "علی",
        email: "ali@example.com"
    };

    try {
        const response = await fetch("api.php", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        });

        const result = await response.json();

        if (result.success) {
            alert(result.message);
        } else {
            alert("خطا: " + result.message);
        }
    } catch (error) {
        console.error("Error:", error);
    }
}

سمت کلاینت — XMLHttpRequest

// روش قدیمی‌تر
var xhr = new XMLHttpRequest();
xhr.open("POST", "api.php", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        console.log(response);
    }
};

xhr.send(JSON.stringify({ name: "علی" }));

GET vs POST در AJAX

// GET — دریافت داده
fetch("api.php?id=123")
    .then(r => r.json())
    .then(data => console.log(data));

// POST — ارسال داده
fetch("api.php", {
    method: "POST",
    body: JSON.stringify({ id: 123 })
});

مثال — جستجوی زنده (Live Search)

// search.php
<?php
header("Content-Type: application/json");

$q = $_GET["q"] ?? "";
$users = ["علی", "مریم", "حسن", "زهرا", "سارا"];

$results = array_filter($users, fn($u) =>
    strpos($u, $q) !== false
);

echo json_encode(array_values($results));

// JavaScript
input.addEventListener("input", async function() {
    const response = await fetch(`search.php?q=${this.value}`);
    const results = await response.json();
    // نمایش نتایج
});

مدیریت خطا

// PHP — کد وضعیت HTTP مناسب
http_response_code(400);  // Bad Request
echo json_encode(["error" => "داده نامعتبر"]);

http_response_code(404);  // Not Found
echo json_encode(["error" => "یافت نشد"]);

http_response_code(500);  // Server Error
echo json_encode(["error" => "خطای سرور"]);

امنیت AJAX

CORS — ارتباط بین دامنه‌ها

<?php
// اجازه دسترسی از دامنه دیگر
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST");
header("Access-Control-Allow-Headers: Content-Type");
?>

ساختار API استاندارد

<?php
// پاسخ استاندارد JSON
response = {
    "success": true/false,
    "message": "پیام توضیحی",
    "data": { ... },        // داده‌ها
    "errors": [ ... ],      // خطاها
    "meta": {
        "page": 1,
        "total": 100
    }
}