تسليم بيانات PHP إلى JavaScript: تجنب عرض المتصفح

تمرير البيانات بكفاءة من PHP إلى JavaScript

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

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

من الممكن إرسال البيانات مرة أخرى بطرق مختلفة، مثل استخدام ملفات تعريف الارتباط أو تضمينها في JavaScript أو HTML. لكن كل طريقة من هذه الطرق لها عيوبها، خاصة عندما يتعلق الأمر بـ XMLHttpRequest، مما يؤدي غالبًا إلى مشكلات مثل العرض غير المقصود للبيانات أو المعالجة غير الكاملة للبيانات.

ستستكشف هذه المقالة طريقة لإرسال البيانات المستردة من PHP إلى JavaScript بشكل آمن، مما يضمن إخفاء البيانات عن وجهة نظر المستخدم ولكن يمكن لجافا سكريبت الوصول إليها ومعالجتها.

تمرير البيانات بشكل آمن من PHP إلى JavaScript باستخدام XMLHttpRequest

يوضح الحل المقدم أعلاه كيفية تمرير البيانات من واجهة PHP الخلفية إلى JavaScript دون عرضها مباشرة على المتصفح. يعد هذا مفيدًا بشكل خاص عند التعامل مع البيانات التي يجب أن تكون متاحة فقط لـ JavaScript لمزيد من المعالجة، مثل عرض المحتوى الديناميكي أو إدارة تفاعلات المستخدم. المفتاح هنا هو استخدام XMLHttpRequest كائن لإرسال واستقبال البيانات بشكل غير متزامن. يتيح ذلك للعميل طلب البيانات من الخادم في الخلفية، وتجنب إعادة تحميل الصفحة وضمان عدم عرض البيانات الحساسة مباشرة للمستخدم بتنسيق HTML.

يتصل برنامج PHP النصي بقاعدة بيانات MySQL ويسترد المعلومات الضرورية، والتي يتم تشفيرها بعد ذلك بتنسيق JSON باستخدام json_encode وظيفة. يعد JSON مثاليًا لحالة الاستخدام هذه لأنه خفيف الوزن ويمكن تحليله بسهولة بواسطة JavaScript. يتم إرسال استجابة JSON مرة أخرى إلى البرنامج النصي من جانب العميل، والذي يستمع إلى استجابة الخادم باستخدام onreadystatechange معالج الحدث. يتم التقاط البيانات ومعالجتها بمجرد أن يشير الخادم إلى أن الاستجابة جاهزة (عندما تصل حالة الاستعداد إلى 4 وتكون الحالة 200).

بمجرد أن يتلقى جافا سكريبت البيانات، سيتم JSON.parse() يتم استخدام الطريقة لتحويل سلسلة JSON إلى كائن JavaScript. تعتبر هذه الخطوة بالغة الأهمية لأنها تسمح بمعالجة البيانات داخل البرنامج النصي، دون الحاجة إلى عرضها على الصفحة أو كشفها للمستخدم. تسمح مرونة JavaScript للمطورين باستخدام البيانات بعدة طرق، مثل تحديث DOM، أو التعامل مع تفاعلات المستخدم، أو تقديم طلبات إضافية غير متزامنة بناءً على البيانات المستلمة.

في النهج البديل الذي يستخدم Fetch API، يتم استخدام طريقة أكثر حداثة ومبسطة لتقديم طلبات HTTP. تعتمد Fetch API على الوعد، مما يسهل العمل مع العمليات غير المتزامنة. فهو يوفر بناء جملة أنظف وأكثر قابلية للقراءة مقارنة بـ XMLHttpRequest. ومع ذلك، يحقق كلا الأسلوبين نفس الهدف: ضمان معالجة البيانات ومعالجتها بشكل آمن بواسطة JavaScript دون عرضها على المتصفح. بالإضافة إلى ذلك، تم تضمين معالجة الأخطاء لضمان أنه في حالة ظهور أي مشكلات (على سبيل المثال، فشل اتصال الخادم أو البيانات غير الصالحة)، يتم إرجاع رسائل الخطأ المناسبة وتسجيلها.

// Frontend: HTML + JavaScript code
<button id="fetchDataBtn">Fetch Data</button>
<script>
  document.getElementById('fetchDataBtn').addEventListener('click', function() {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'fetch_data.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data); // Data is available here, not visible to the user
      }
    };
    xhr.send('request=true');
  });
</script>

<?php
// Backend: PHP + MySQL code
if (isset($_POST['request']) && $_POST['request'] == 'true') {
  // Example: Fetch data from database
  $conn = new mysqli('localhost', 'root', '', 'testdb');
  if ($conn->connect_error) {
    die('Connection failed: ' . $conn->connect_error);
  }
  $sql = "SELECT * FROM users LIMIT 1";
  $result = $conn->query($sql);
  if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    echo json_encode($row);
  } else {
    echo json_encode(['error' => 'No data found']);
  }
  $conn->close();
}
?>

// Frontend: HTML + JavaScript code using Fetch API
<button id="fetchDataBtn">Fetch Data with Fetch API</button>
<script>
  document.getElementById('fetchDataBtn').addEventListener('click', function() {
    fetch('fetch_data.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: 'request=true'
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
  });
</script>

<?php
// Backend: PHP + MySQL code (same as previous example)
if (isset($_POST['request']) && $_POST['request'] == 'true') {
  $conn = new mysqli('localhost', 'root', '', 'testdb');
  if ($conn->connect_error) {
    die('Connection failed: ' . $conn->connect_error);
  }
  $sql = "SELECT * FROM users LIMIT 1";
  $result = $conn->query($sql);
  if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    echo json_encode($row);
  } else {
    echo json_encode(['error' => 'No data found']);
  }
  $conn->close();
}
?>

النقل الفعال للبيانات بين PHP وJavaScript باستخدام AJAX

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

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

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