شرح صفوف ومحتوى الفقرة
راجع الخطوات الست الكاملة لدورة حياة الاتصال غير المتزامن بين JavaScript في المتصفح وخادم PHP 8.
- أطلق طلب
fetch()من مستمع حدث في الصفحة (نقر أو كتابة أو إرسال نموذج). - تحقق من المدخلات ونفذ استعلام PDO داخل ملف PHP، ثم أخرج استجابة JSON مع رمز حالة HTTP المناسب.
- افحص
response.ok، وحلل البيانات بـawait response.json()، وحدّث عناصر الصفحة بأمان عبرtextContent.
يؤدي إرجاع غلاف موحد يضم المفتاحين ok وdata إلى توحيد جميع تفاعلات AJAX في مشروعك.
| مرحلة دورة الحياة | الجهة | الدالة / الواجهة الأساسية |
|---|---|---|
| 1. Dispatch Request | Browser (JS) | await fetch("/api/item.php?id=5") |
| 2. Validate Input | Server (PHP) | filter_var($_GET["id"], FILTER_VALIDATE_INT) |
| 3. Query & Encode | Server (PHP) | header("Content-Type: application/json") + json_encode() |
| 4. Verify HTTP Status | Browser (JS) | if (!response.ok) throw new Error(...) |
| 5. Render Safely | Browser (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.