انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 89
دورة PHP

مقدمة التخاطب غير المتزامن بين PHP و JavaScript عبر AJAX و Fetch APIPHP and AJAX Asynchronous Requests with Fetch API

اربط طلبات fetch() الحديثة في JavaScript مع ملفات الخادم في PHP لتحديث محتوى الصفحة دون إعادة تحميلها.
ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
6
الأمثلة
6
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
0
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

Synchronous Loads vs Async AJAX التحميل التقليدي مقابل الطلبات غير المتزامنة AJAX

يقوم التصفح المتزامن التقليدي بإعادة تحميل صفحة HTML بالكامل عند كل نقرة؛ بينما تتيح تقنية AJAX للمتصفح تبادل بيانات خفيفة مع خادم PHP في الخلفية دون إعادة تحميل الصفحة.

  • في الطلب المتزامن التقليدي، يهدم المتصفح شجرة DOM الحالية ويطلب صفحة HTML كاملة من PHP من جديد.
  • في طلب AJAX غير المتزامن، تستدعي دالة fetch() في JavaScript ملف PHP خفيفاً يُرجع البيانات المطلوبة فقط بصيغة JSON.
  • يحتفظ المستخدم بموضع التمرير وحالة الصفحة دون وميض، بينما يتم تحديث العنصر المستهدف فقط داخل DOM.

بدلاً من طباعة مستند <html>...</html> كامل، يُخرج ملف PHP نص JSON مضغوطاً وخفيفاً للغاية.

مخطط توضيحي: محاكي التخاطب غير المتزامن بين JavaScript fetch() وخادم PHP
PHP 
<?php
// Lightweight PHP endpoint: /api/server-time.php
$payload = [
    'ok'        => true,
    'timestamp' => 1762550400,
    'formatted' => gmdate('Y-m-d H:i:s', 1762550400) . ' UTC',
];

echo json_encode($payload) . "\n";

Sending GET Requests with fetch إرسال طلبات GET غير متزامنة عبر دالة fetch

توفر المتصفحات الحديثة واجهة fetch(url) المبنية على الوعود البرمجية (Promises) كبديل نظيف وحديث عن كائن XMLHttpRequest القديم.

  • استخدم صياغة async / await في JavaScript لاستدعاء const response = await fetch("/api/status.php?id=15").
  • مرر معاملات الاستعلام بأمان عبر encodeURIComponent(val) أو كائن URLSearchParams.
  • أرفق رأس الطلب "Accept": "application/json" ليعلم خادم PHP أن العميل يتوقع استجابة JSON.

تقوم دالة http_build_query() بترميز المفاتيح والقيم قياسياً عند بناء روابط نقاط النهاية في PHP.

PHP 
<?php
// Building a query URL safely in PHP for a Fetch client
$params = http_build_query([
    'category' => 'php-8',
    'limit'    => 5,
]);

$endpointUrl = "/api/lessons.php?" . $params;
echo "Fetch URL: " . $endpointUrl . "\n";

Handling Async Query Params in PHP استقبال ومعالجة معاملات الطلب في PHP

على جانب الخادم، يستقبل PHP معاملات الاستعلام المرسلة عبر fetch() داخل مصفوفة $_GET تماماً كأي طلب HTTP عادي؛ لذا يظل التحقق الصارم إلزامياً.

  • اقرأ المعاملات الرقمية وتحقق منها عبر filter_var($_GET["id"] ?? null, FILTER_VALIDATE_INT).
  • إذا كان المعامل المطلوب مفقوداً أو غير صالح، اضبط رمز الحالة http_response_code(400) وأرجع كائن خطأ بصيغة JSON.
  • أنهِ تنفيذ السكريبت دائماً بـ exit فور طباعة JSON لضمان عدم التصاق أي مسافات أو وسوم HTML بالاستجابة.

يضمن التحقق من $productId إرجاع قيم ذات أنواع صحيحة (العدد الصحيح 42 والعشري 99.5) داخل كائن JSON.

PHP 
<?php
$_GET = ['product_id' => '42'];

$productId = filter_var($_GET['product_id'] ?? null, FILTER_VALIDATE_INT);

if ($productId === false || $productId <= 0) {
    http_response_code(400);
    echo json_encode(['ok' => false, 'error' => 'Invalid product_id']);
} else {
    echo json_encode(['ok' => true, 'id' => $productId, 'price' => 99.50]);
}
echo "\n";

Updating the DOM with PHP Responses تحديث عناصر الصفحة DOM باستجابة خادم PHP

فور قيام الدالة await response.json() بتحليل نص JSON العائد من PHP، يقوم كود JavaScript بتحديث عناصر DOM المستهدفة لحظياً.

  • أدرج النصوص القادمة من الخادم داخل الصفحة دائماً عبر الخاصية element.textContent = data.title بدلاً من innerHTML.
  • تتعامل خاصية textContent مع الرموز مثل <script> كنص عادي تلقائياً، مما يمنع ثغرات XSS في المتصفح.
  • اعرض مؤشر التحميل وعطّل زر الإرسال مؤقتاً قبل await fetch() ثم أعد تفعيله في كتلة finally.

لأن JavaScript سيسند data.title إلى textContent، احتفظ بالنص الخام داخل JSON دون ترميز HTML حتى لا تظهر &amp; حرفياً للمستخدم.

مخطط تدفق التنفيذ العملي لقسم تحديث عناصر الصفحة DOM باستجابة خادم PHP في لغة PHP
PHP 
<?php
// PHP prepares clean structured data for frontend DOM updates
$course = [
    'ok'       => true,
    'title'    => 'Modern PHP 8.4 & AJAX',
    'enrolled' => 1240,
    'badge'    => 'Open',
];

echo json_encode($course, JSON_UNESCAPED_SLASHES) . "\n";

Handling Network and HTTP Status Errors معالجة أخطاء الشبكة ورموز الحالة في fetch

من القواعد الجوهرية في Fetch API أن دالة fetch() لا تطلق استثناءً تلقائياً عند رموز الخطأ مثل 400 أو 404 أو 500، بل ترفض الوعد فقط عند انقطاع الشبكة!

  • افحص دائماً الشرط if (!response.ok) في JavaScript (والذي يكون صحيحاً فقط لرموز الحالة بين 200 و299).
  • على جانب PHP، اضبط رمز الحالة عبر http_response_code(404) أو 422 مع إرجاع كائن JSON يوضح رسالة الخطأ في مفتاح error.
  • أحِط استدعاء fetch() بكتلة try / catch لمعالجة انقطاع الاتصال وأخطاء الخادم معاً.

الجمع بين http_response_code(404) والمفتاح المنطقي "ok": false داخل JSON يجعل معالجة الأخطاء في الواجهة الأمامية واضحة وموحدة.

PHP 
<?php
function sendJsonError(int $status, string $message): string {
    http_response_code($status);
    return json_encode([
        'ok'     => false,
        'status' => $status,
        'error'  => $message,
    ]);
}

echo sendJsonError(404, 'Lesson record not found') . "\n";

AJAX Request Response Lifecycle Summary ملخص دورة حياة طلب واستجابة AJAX

راجع الخطوات الست الكاملة لدورة حياة الاتصال غير المتزامن بين JavaScript في المتصفح وخادم PHP 8.

  • أطلق طلب fetch() من مستمع حدث في الصفحة (نقر أو كتابة أو إرسال نموذج).
  • تحقق من المدخلات ونفذ استعلام PDO داخل ملف PHP، ثم أخرج استجابة JSON مع رمز حالة HTTP المناسب.
  • افحص response.ok، وحلل البيانات بـ await response.json()، وحدّث عناصر الصفحة بأمان عبر textContent.

يؤدي إرجاع غلاف موحد يضم المفتاحين ok وdata إلى توحيد جميع تفاعلات AJAX في مشروعك.

مرحلة دورة الحياةالجهةالدالة / الواجهة الأساسية
1. Dispatch RequestBrowser (JS)await fetch("/api/item.php?id=5")
2. Validate InputServer (PHP)filter_var($_GET["id"], FILTER_VALIDATE_INT)
3. Query & EncodeServer (PHP)header("Content-Type: application/json") + json_encode()
4. Verify HTTP StatusBrowser (JS)if (!response.ok) throw new Error(...)
5. Render SafelyBrowser (JS)node.textContent = payload.data.title

PHP 
<?php
$requestId = "req_" . substr(md5("demo"), 0, 8);
$response = [
    'ok'         => true,
    'request_id' => $requestId,
    'data'       => ['items_count' => 3],
];
echo json_encode($response) . "\n";
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

راجع الخطوات الست الكاملة لدورة حياة الاتصال غير المتزامن بين JavaScript في المتصفح وخادم PHP 8. أطلق طلب fetch() من مستمع حدث في الصفحة (نقر أو كتابة أو إرسال نموذج). تحقق من المدخلات ونفذ استعلام PDO داخل ملف PHP، ثم أخرج استجابة JSON مع رمز حالة HTTP المناسب. افحص response.ok، وحلل البيانات بـ await response.json()، وحدّث عناصر الصفحة بأمان عبر textContent.

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 AJAX Intro مقدمة AJAX مع PHP
اربط طلبات fetch() الحديثة في JavaScript مع ملفات الخادم في PHP لتحديث محتوى الصفحة دون إعادة تحميلها.
للمراجعة
02 Synchronous Loads vs Async AJAX التحميل التقليدي مقابل الطلبات غير المتزامنة AJAX
المفهوم الأساسي لقسم التحميل التقليدي مقابل الطلبات غير المتزامنة AJAX في لغة PHP الحديثة.
للمراجعة
03 Sending GET Requests with fetch إرسال طلبات GET غير متزامنة عبر دالة fetch
الصياغة البرمجية والتطبيق العملي المباشر لقسم إرسال طلبات GET غير متزامنة عبر دالة fetch.
للمراجعة
04 Handling Async Query Params in PHP استقبال ومعالجة معاملات الطلب في PHP
قواعد التحقق وأفضل الممارسات القياسية الخاصة بقسم استقبال ومعالجة معاملات الطلب في PHP.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 PHP PHP
PHP: Hypertext Preprocessor
لغة البرمجة النصية على جانب الخادم لبناء تطبيقات الويب الديناميكية وواجهات البرمجة.
للمراجعة
02 CLI CLI
Command-Line Interface
واجهة سطر الأوامر التي تتيح تشغيل ملفات PHP مباشرة عبر الطرفية.
للمراجعة
03 FPM FPM
FastCGI Process Manager
مدير عمليات FastCGI عالي الأداء لمعالجة طلبات خادم الويب في PHP.
للمراجعة
04 HTML HTML
HyperText Markup Language
لغة الترميز القياسية التي يولدها محرك PHP ويرسلها إلى متصفح العميل بعد التنفيذ.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

من الفهم للتطبيق

مهامك قبل الاختبار

خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.

0/2مهام منجزة

  1. أنشئ ملف PHP محلياً ونفّذ المثال البرمجي المشروح في قسم التحميل التقليدي مقابل الطلبات غير المتزامنة AJAX للتحقق من المخرجات.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

  2. بدّل بين الحالات الثلاث في المحاكي التفاعلي ضمن قسم إرسال طلبات GET غير متزامنة عبر دالة fetch وقارن مخرجات التنفيذ.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

8أسئلة 1أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي8 أسئلة تنتظرك
01

ما الميزة الأساسية لطلب AJAX غير المتزامن مقارنة بالتحميل التقليدي المتزامن للصفحة؟

يتجنب AJAX إعادة تحميل الصفحة بالكامل ويحافظ على موضع التمرير وحالة الواجهة.

02

ما الواجهة البرمجية الحديثة في JavaScript المستخدمة لإرسال طلبات HTTP غير متزامنة إلى ملفات PHP؟

تُعد واجهة fetch() المبنية على الوعود المعيار الحديث لطلبات AJAX.

03

كيف يقرأ سكريبت PHP معاملات الاستعلام المرسلة في طلب GET مثل fetch("/api/items.php?page=2")؟

تصل معاملات الرابط في طلبات fetch() من نوع GET داخل مصفوفة $_GET القياسية.

04

هل تطلق دالة fetch() في JavaScript استثناءً تلقائياً عندما يُرجع ملف PHP رمز الحالة 404 أو 500؟

تكون خاصية response.ok صحيحة فقط عندما يكون رمز الحالة بين 200 و 299.

05

لماذا يجب استخدام element.textContent بدلاً من element.innerHTML عند إدراج نصوص JSON غير موثوقة في الصفحة؟

تفسر innerHTML الوسوم البرمجية بينما تعرض textContent النص بأمان تام.

06

ماذا يحدث إذا طبع ملف PHP إشعار خطأ نصياً (Notice) قبل طباعة مخرجات json_encode($data)؟

يشترط محلل JSON أن يكون كامل جسم الاستجابة بصيغة JSON نقية دون أي نصوص إضافية.

07

أي دالة في PHP تحول مصفوفة ترابطية إلى نص معاملات رابط مرمز مثل "category=php&limit=5"؟

تقوم دالة http_build_query() بترميز المفاتيح والقيم في نص استعلام قياسي.

08

لماذا يجب تجنب تطبيق htmlspecialchars() على النصوص قبل تمريرها إلى json_encode() لواجهة تستخدم textContent؟

يتكفل json_encode بسلامة JSON وتتكفل textContent بسلامة العرض في DOM دون تشويه النص.