شرح صفوف ومحتوى الفقرة
فور قيام الدالة await response.json() بتحليل نص JSON العائد من PHP، يقوم كود JavaScript بتحديث عناصر DOM المستهدفة لحظياً.
- أدرج النصوص القادمة من الخادم داخل الصفحة دائماً عبر الخاصية
element.textContent = data.titleبدلاً منinnerHTML. - تتعامل خاصية
textContentمع الرموز مثل<script>كنص عادي تلقائياً، مما يمنع ثغرات XSS في المتصفح. - اعرض مؤشر التحميل وعطّل زر الإرسال مؤقتاً قبل
await fetch()ثم أعد تفعيله في كتلةfinally.
لأن JavaScript سيسند data.title إلى textContent، احتفظ بالنص الخام داخل JSON دون ترميز HTML حتى لا تظهر & حرفياً للمستخدم.
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";