PHP وAJAX

يعد AJAX أسلوبًا مهمًا في تطوير الويب لأنه يسمح لصفحة الويب بالتواصل مع الخادم دون إعادة تحميل الصفحة بأكملها. وهذا يجعل مواقع الويب تبدو أسرع وأكثر سلاسة وأكثر تفاعلية.

يمكن استخدام PHP على جانب الخادم لتلقي طلبات AJAX ومعالجة البيانات والقراءة أو الكتابة إلى قاعدة بيانات وإرجاع استجابات JSON أو XML وتحديث أجزاء من صفحة الويب ديناميكيًا.

تشرح هذه المقالة موضوعات PHP AJAX الرئيسية الموضحة في مسار التعلم: AJAX مقدمة، AJAX PHP، قاعدة بيانات AJAX، AJAX XML، AJAX البحث المباشر، واستطلاع AJAX.

AJAX مقدمة

AJAX يرمز إلى غير متزامن JavaScript وXML. يتضمن الاسم XML لأن XML كان شائع الاستخدام في تطبيقات AJAX الأقدم. اليوم، أصبح JSON أكثر شيوعًا، لكن الاسم AJAX لا يزال مستخدمًا.

الفكرة الرئيسية لـ AJAX بسيطة: يرسل JavaScript طلبًا إلى الخادم في الخلفية، ويقوم الخادم بمعالجة الطلب، ويقوم JavaScript بتحديث جزء من الصفحة باستخدام الاستجابة.

بدون AJAX، غالبًا ما يتطلب إجراء المستخدم إعادة تحميل الصفحة بالكامل. باستخدام AJAX، يتم تحميل أو تحديث البيانات الضرورية فقط.

يبدو سير العمل الأساسي AJAX كما يلي:

  1. يقوم المستخدم بإجراء ما، مثل الكتابة في مربع بحث أو النقر فوق زر.

  2. يرسل JavaScript طلبًا إلى ملفات PHP.

  3. PHP يتلقى الطلب ويعالجه.

  4. يقوم PHP بإرجاع استجابة، مثل نص، JSON، HTML، أو XML.

  5. يتلقى JavaScript الرد ويقوم بتحديث الصفحة دون تحديثها.

يُستخدم AJAX بشكل شائع للبحث المباشر وإرسال النماذج والتعليقات والإشعارات وأنظمة التصويت ولوحات المعلومات والتصفية وترقيم الصفحات وتحميل المزيد من المحتوى.

لماذا AJAX مفيد

يعمل AJAX على تحسين تجربة المستخدم لأنه يقلل من عمليات إعادة تحميل الصفحة غير الضرورية. فهو يتيح لموقع الويب أن يبدو وكأنه تطبيق بدلاً من مجموعة من الصفحات الثابتة.

على سبيل المثال، يمكن أن يعرض مربع البحث النتائج أثناء قيام المستخدم بالكتابة. يمكن للنموذج إرسال البيانات وإظهار رسالة النجاح دون مغادرة الصفحة. يمكن للوحة المعلومات تحديث الإحصائيات في الخلفية.

AJAX مفيد لأنه يمكنه:

  • تحديث جزء من الصفحة دون إعادة تحميل الصفحة بأكملها.

  • إرسال البيانات إلى الخادم في الخلفية.

  • تحميل البيانات فقط عند الحاجة.

  • تحسين السرعة والتفاعل.

  • جعل النماذج وميزات البحث أكثر سلاسة.

  • تقليل عمليات إعادة تحميل الصفحات غير الضرورية التي يعرضها الخادم.

في تطوير الويب الحديث، غالبًا ما يتم تنفيذ AJAX باستخدام fetch() API أو مكتبات مثل Axios. قد تستخدم الأمثلة الأقدم XMLHttpRequest.

AJAX PHP

يمكن لـ PHP تلقي طلبات AJAX تمامًا مثل طلبات النماذج العادية. والفرق هو أن الطلب يتم إرساله بواسطة JavaScript في الخلفية بدلاً من قيام المتصفح بتحميل صفحة جديدة.

يوضح المثال التالي زر HTML بسيط يرسل طلب AJAX إلى ملفات PHP باستخدام الجلب.

<button id="loadMessage">Load Message</button>
<div id="result"></div>

<script>
document.getElementById("loadMessage").addEventListener("click", function () {
    fetch("message.php")
        .then(function (response) {
            return response.text();
        })
        .then(function (data) {
            document.getElementById("result").innerHTML = data;
        });
});
</script>

يمكن للملفات PHP إرجاع استجابة بسيطة.

<?php
echo "Hello from PHP AJAX!";
?>

عندما ينقر المستخدم على الزر، يرسل JavaScript طلبًا إلى message.php. يقوم PHP بإرجاع الرسالة، ويعرضها JavaScript داخل الصفحة.

يمكن لـ AJAX أيضًا إرسال البيانات إلى PHP باستخدام معلمات الاستعلام أو طلبات POST.

<input type="text" id="name" placeholder="Enter your name">
<button id="sendName">Send</button>
<div id="response"></div>

<script>
document.getElementById("sendName").addEventListener("click", function () {
    const name = document.getElementById("name").value;

    fetch("greet.php", {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        body: "name=" + encodeURIComponent(name)
    })
    .then(response => response.text())
    .then(data => {
        document.getElementById("response").innerHTML = data;
    });
});
</script>

يمكن لملفات PHP قراءة القيمة المرسلة باستخدام $_POST.

<?php
$name = trim($_POST["name"] ?? "");

if ($name === "") {
    echo "Please enter your name.";
} else {
    echo "Hello, " . htmlspecialchars($name, ENT_QUOTES, "UTF-8");
}
?>

يوضح هذا المثال كيفية عمل AJAX وPHP معًا. يرسل JavaScript الطلب، ويعالج PHP البيانات، ويعرض JavaScript النتيجة.

العودة JSON من PHP

على الرغم من أن AJAX كان يستخدم في الأصل XML، إلا أن التطبيقات الحديثة غالبًا ما تُرجع JSON لأنه من الأسهل التعامل معه في JavaScript.

يمكن لـ PHP إرجاع JSON باستخدام json_encode() ورأس نوع المحتوى الصحيح.

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

$response = [
    "success" => true,
    "message" => "Data loaded successfully.",
    "items" => ["PHP", "AJAX", "MySQL"]
];

echo json_encode($response);
?>

يمكن لـ JavaScript قراءة استجابة JSON باستخدام response.json().

<script>
fetch("data.php")
    .then(response => response.json())
    .then(data => {
        console.log(data.message);
        console.log(data.items);
    });
</script>

تُستخدم استجابات JSON بشكل شائع في واجهات API ولوحات المعلومات والنماذج الديناميكية واقتراحات البحث وتفاعلات الصفحة الواحدة.

AJAX قاعدة البيانات

يمكن استخدام AJAX مع PHP وMySQL لتحميل بيانات قاعدة البيانات أو حفظها دون تحديث الصفحة. يعد هذا مفيدًا للبحث المباشر والتصفية والتعليقات والإشعارات والإعجابات والتصويتات ولوحات الإدارة.

على سبيل المثال، يمكن لـ JavaScript إرسال كلمة بحث أساسية إلى PHP، ويمكن لـ PHP الاستعلام عن قاعدة البيانات وإرجاع النتائج المطابقة.

يرسل المثال التالي كلمة أساسية إلى ملفات PHP.

<input type="text" id="search" placeholder="Search users">
<div id="results"></div>

<script>
document.getElementById("search").addEventListener("input", function () {
    const keyword = this.value;

    fetch("search-users.php?q=" + encodeURIComponent(keyword))
        .then(response => response.json())
        .then(users => {
            let html = "";

            users.forEach(function (user) {
                html += "<p>" + user.name + " - " + user.email + "</p>";
            });

            document.getElementById("results").innerHTML = html;
        });
});
</script>

يمكن للملفات PHP أن يستقبل الكلمة الأساسية، ويستعلم عن قاعدة البيانات باستخدام عبارة معدة، ويعيد JSON.

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

$pdo = new PDO(
    "mysql:host=localhost;dbname=php_learning;charset=utf8mb4",
    "root",
    ""
);

$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$q = trim($_GET["q"] ?? "");

$statement = $pdo->prepare("
    SELECT id, name, email
    FROM users
    WHERE name LIKE :keyword OR email LIKE :keyword
    ORDER BY name ASC
    LIMIT 10
");

$statement->execute([
    "keyword" => "%" . $q . "%"
]);

$users = $statement->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($users);
?>

يوضح هذا المثال كيف يمكن أن تعمل AJAX وPHP وMySQL معًا. يقوم المستخدم بكتابة كلمة أساسية، ويرسلها JavaScript إلى PHP، ويبحث PHP في قاعدة البيانات، وتعرض الصفحة النتائج على الفور.

تعد العبارات المحضرة مهمة هنا لأن الكلمة الرئيسية للبحث تأتي من إدخال المستخدم. يمكن أن يؤدي وضع إدخال المستخدم مباشرة في SQL إلى إنشاء مخاطر SQL injection.

AJAX XML

يمكن لـ AJAX أيضًا تحميل بيانات XML. على الرغم من أن JSON أكثر شيوعًا اليوم، إلا أن XML لا يزال يُستخدم في خرائط المواقع وموجزات RSS وخدمات SOAP والأنظمة القديمة وبعض عمليات التكامل الخارجية.

قد يبدو الملف XML كما يلي:

<articles>
    <article>
        <title>PHP AJAX Intro</title>
        <category>PHP</category>
    </article>
    <article>
        <title>AJAX Database</title>
        <category>MySQL</category>
    </article>
</articles>

يمكن لـ JavaScript تحميل ملف XML هذا باستخدام الجلب وتحليله باستخدام DOMParser.

<div id="xmlResults"></div>

<script>
fetch("articles.xml")
    .then(response => response.text())
    .then(xmlText => {
        const parser = new DOMParser();
        const xml = parser.parseFromString(xmlText, "application/xml");

        const articles = xml.getElementsByTagName("article");
        let html = "";

        for (let i = 0; i < articles.length; i++) {
            const title = articles[i].getElementsByTagName("title")[0].textContent;
            const category = articles[i].getElementsByTagName("category")[0].textContent;

            html += "<p>" + title + " - " + category + "</p>";
        }

        document.getElementById("xmlResults").innerHTML = html;
    });
</script>

يمكن لـ PHP أيضًا إنشاء XML ديناميكيًا وإعادته إلى AJAX.

<?php
header("Content-Type: application/xml; charset=UTF-8");

echo '<articles>';
echo '<article>';
echo '<title>PHP AJAX XML</title>';
echo '<category>PHP</category>';
echo '</article>';
echo '</articles>';
?>

يعد AJAX XML مفيدًا عند التكامل مع الأنظمة التي لا تزال تستخدم XML أو عند قراءة مستندات XML مثل الخلاصات وخرائط الموقع.

AJAX البحث المباشر

يعد البحث المباشر أحد أمثلة AJAX الأكثر شيوعًا. فهو يسمح للمستخدمين برؤية نتائج البحث أثناء الكتابة، دون الضغط على زر الإرسال أو إعادة تحميل الصفحة.

عادةً ما تعمل ميزة البحث المباشر على النحو التالي:

  1. يقوم المستخدم بكتابة مدخلات البحث.

  2. يستمع JavaScript إلى حدث الإدخال.

  3. يقوم AJAX بإرسال الكلمة الأساسية الحالية إلى PHP.

  4. PHP يبحث في البيانات من مصفوفة، أو ملف، أو API، أو قاعدة بيانات.

  5. PHP يقوم بإرجاع النتائج المطابقة.

  6. يعرض JavaScript النتائج ضمن الإدخال.

يستخدم المثال التالي مصفوفة PHP للبساطة.

<input type="text" id="liveSearch" placeholder="Search topics">
<div id="liveResults"></div>

<script>
document.getElementById("liveSearch").addEventListener("input", function () {
    const keyword = this.value;

    if (keyword.length === 0) {
        document.getElementById("liveResults").innerHTML = "";
        return;
    }

    fetch("live-search.php?q=" + encodeURIComponent(keyword))
        .then(response => response.text())
        .then(data => {
            document.getElementById("liveResults").innerHTML = data;
        });
});
</script>

يمكن للملفات PHP البحث داخل مصفوفة بسيطة وإرجاع HTML.

<?php
$topics = [
    "PHP Basics",
    "PHP Forms",
    "PHP OOP",
    "PHP MySQL",
    "PHP AJAX",
    "Laravel Framework",
    "JavaScript Fetch API"
];

$q = strtolower(trim($_GET["q"] ?? ""));
$results = [];

if ($q !== "") {
    foreach ($topics as $topic) {
        if (str_contains(strtolower($topic), $q)) {
            $results[] = $topic;
        }
    }
}

if (count($results) === 0) {
    echo "<p>No results found.</p>";
} else {
    foreach ($results as $result) {
        echo "<p>" . htmlspecialchars($result, ENT_QUOTES, "UTF-8") . "</p>";
    }
}
?>

للحصول على أداء أفضل في التطبيقات الحقيقية، يجب أن يتجنب البحث المباشر إرسال عدد كبير جدًا من الطلبات. غالبًا ما يستخدم المطورون debounce، والذي ينتظر مهلة قصيرة بعد توقف المستخدم عن الكتابة قبل إرسال الطلب.

<script>
let timer;

document.getElementById("liveSearch").addEventListener("input", function () {
    clearTimeout(timer);

    const keyword = this.value;

    timer = setTimeout(function () {
        fetch("live-search.php?q=" + encodeURIComponent(keyword))
            .then(response => response.text())
            .then(data => {
                document.getElementById("liveResults").innerHTML = data;
            });
    }, 300);
});
</script>

يساعد Debounce على تقليل حمل الخادم ويجعل الميزة أكثر كفاءة.

AJAX الاستطلاع

يسمح نظام الاستطلاع AJAX للمستخدمين بالتصويت ورؤية النتائج المحدثة دون تحديث الصفحة. يعد هذا مفيدًا للاستطلاعات وأدوات التصويت وأنظمة التعليقات والمحتوى التفاعلي البسيط.

يتضمن الاستطلاع عادةً سؤالاً وخيارات متعددة وزر تصويت ومنطقة نتيجة.

<h3>Which language do you like most?</h3>

<label>
    <input type="radio" name="vote" value="PHP"> PHP
</label>

<label>
    <input type="radio" name="vote" value="JavaScript"> JavaScript
</label>

<label>
    <input type="radio" name="vote" value="Python"> Python
</label>

<button id="voteButton">Vote</button>

<div id="pollResults"></div>

<script>
document.getElementById("voteButton").addEventListener("click", function () {
    const selected = document.querySelector("input[name='vote']:checked");

    if (!selected) {
        document.getElementById("pollResults").innerHTML = "Please select an option.";
        return;
    }

    fetch("poll.php", {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        body: "vote=" + encodeURIComponent(selected.value)
    })
    .then(response => response.text())
    .then(data => {
        document.getElementById("pollResults").innerHTML = data;
    });
});
</script>

يمكن لملفات PHP تلقي التصويت المحدد وتحديث النتيجة. على سبيل المثال البسيط، يمكن تخزين الأصوات في ملف JSON.

<?php
$allowedVotes = ["PHP", "JavaScript", "Python"];
$vote = $_POST["vote"] ?? "";

if (!in_array($vote, $allowedVotes)) {
    echo "Invalid vote.";
    exit;
}

$file = "poll-results.json";

if (!file_exists($file)) {
    file_put_contents($file, json_encode([
        "PHP" => 0,
        "JavaScript" => 0,
        "Python" => 0
    ]));
}

$results = json_decode(file_get_contents($file), true);

$results[$vote]++;

file_put_contents($file, json_encode($results));

foreach ($results as $option => $count) {
    echo "<p>" . htmlspecialchars($option, ENT_QUOTES, "UTF-8") . ": " . $count . " votes</p>";
}
?>

يوضح هذا المثال فكرة الاستطلاع الأساسية AJAX. في المشروع الحقيقي، عادةً ما يتم تخزين نتائج الاستطلاع في قاعدة بيانات، وقد يمنع النظام التصويت المتكرر باستخدام الجلسات أو حسابات تسجيل الدخول أو ملفات تعريف الارتباط أو الحدود المستندة إلى IP.

AJAX معالجة الأخطاء

يمكن أن تفشل طلبات AJAX لأسباب عديدة. قد يُرجع الملفات PHP خطأ، أو قد تفشل الشبكة، أو قد لا يكون الخادم متاحًا، أو قد لا تكون الاستجابة بالتنسيق المتوقع.

يجب أن يتعامل JavaScript مع الأخطاء بدلاً من افتراض نجاح كل طلب.

<script>
fetch("data.php")
    .then(response => {
        if (!response.ok) {
            throw new Error("Request failed.");
        }

        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });
</script>

يمكن لـ PHP أيضًا إرجاع استجابات JSON واضحة تشير إلى النجاح أو الفشل.

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

try {
    echo json_encode([
        "success" => true,
        "message" => "Request completed successfully."
    ]);
} catch (Exception $exception) {
    echo json_encode([
        "success" => false,
        "message" => "Something went wrong."
    ]);
}
?>

إن المعالجة الجيدة للأخطاء تجعل ميزات AJAX أكثر موثوقية وأسهل في تصحيح الأخطاء.

ملاحظات الأمان لـ AJAX مع PHP

طلبات AJAX لا تزال طلبات HTTP عادية. وهذا يعني أنه يجب التحقق من صحتها وحمايتها تمامًا مثل عمليات إرسال النماذج العادية.

تشمل الممارسات الأمنية المهمة ما يلي:

  • التحقق من صحة جميع البيانات المستلمة من خلال AJAX.

  • استخدم العبارات المحضرة لاستعلامات قاعدة البيانات.

  • الهروب من الإخراج قبل عرض البيانات التي أنشأها المستخدم.

  • استخدم حماية CSRF للإجراءات الحساسة.

  • لا تثق في الحقول المخفية أو التحقق من صحة JavaScript فقط.

  • تحقق من أذونات المستخدم قبل تحديث البيانات أو حذفها.

  • قم بإرجاع رسائل الخطأ الآمنة دون الكشف عن تفاصيل الخادم.

  • الحد من تكرار الطلب لأنظمة البحث والاستطلاع المباشر.

يعمل AJAX على تحسين تجربة المستخدم، لكنه لا يحل محل التحقق من صحة الواجهة الخلفية وأمانها. يجب على الخادم دائمًا اتخاذ القرار النهائي.

كيف يعمل AJAX وPHP معًا في المشاريع الحقيقية

في تطبيقات PHP الحقيقية، يتم استخدام AJAX لجعل الصفحات أكثر تفاعلية. قد تستخدم لوحة المعلومات AJAX لتحديث الإحصائيات. قد تستخدم إحدى المدونات AJAX لتحميل المزيد من المشاركات. قد تستخدم لوحة الإدارة AJAX لتحديث قيم الحالة. قد تستخدم صفحة الملف الشخصي AJAX لتحميل البيانات أو التحقق من صحتها.

تتضمن حالات الاستخدام الواقعية الشائعة AJAX ما يلي:

  • اقتراحات البحث المباشر.

  • إرسال نموذج الاتصال دون إعادة تحميل الصفحة.

  • تحميل المزيد من المشاركات أو المنتجات.

  • تصفية الجداول والقوائم.

  • تحديث عدادات الإشعارات.

  • أنظمة التصويت والاقتراع.

  • التحقق من اسم المستخدم أو توفر البريد الإلكتروني.

  • حفظ تفضيلات المستخدم.

عندما يقوم PHP بإرجاع استجابات JSON نظيفة ويتعامل معها JavaScript بشكل صحيح، يصبح AJAX وسيلة فعالة لإنشاء واجهات ويب سلسة وحديثة.

خاتمة

AJAX مع PHP يسمح لصفحات الويب بالاتصال بالخادم في الخلفية دون تحديث الصفحة بأكملها. وهذا يجعل مواقع الويب أكثر ديناميكية واستجابة وسهولة في الاستخدام.

تتضمن موضوعات PHP AJAX الرئيسية مقدمة AJAX، وإرسال الطلبات إلى PHP، والعمل مع قواعد البيانات، وتحميل بيانات XML، وإنشاء بحث مباشر، وإنشاء أنظمة استطلاع.

بعد فهم هذه المفاهيم، فإن الخطوة التالية هي التدريب من خلال إنشاء مشاريع AJAX صغيرة مثل مربع البحث المباشر، ونموذج الاتصال، ومرشح قاعدة البيانات، ونظام التصويت، واستجابة JSON API. ستساعد هذه المشاريع في ربط منطق الواجهة الخلفية PHP بسلوك الواجهة الأمامية التفاعلية.