PHP データの JavaScript への配信: ブラウザー表示の回避

PHP および JSON 応答での XMLHttpRequest の使用

このメソッドは、PHP を使用してデータベースからデータを取得し、JavaScript の XMLHttpRequest 経由でそれを JSON として返します。 JSON データは、ブラウザーには表示されずに 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>

バックエンド: JSON データを送信するための PHP スクリプト

これは、データベースからデータをフェッチし、JSON 形式で返す PHP バックエンド スクリプト (fetch_data.php) です。

<?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();
}
?>

よりクリーンなアプローチのための Fetch API を使用したデータのフェッチ

このバージョンでは、JSON データを非同期に送受信するために、XMLHttpRequest の最新の代替手段である Fetch API を使用します。

// 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>

バックエンド: API を取得するための PHP スクリプト

Fetch API では、要求されたときに JSON データが返されるため、PHP コードは同じままです。

<?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 へのデータ処理に関するよくある質問

1. ブラウザ上でデータが表示されないようにする最善の方法は何ですか?
2. 使用する AJAX PHP から JavaScript にデータを転送すると、データはページに表示されずにバックグラウンドで処理されます。
3. JSON を使用して PHP から JavaScript にデータを送信するにはどうすればよいですか?
4. の json_encode() PHP の関数はデータを JSON 形式に変換し、次を使用して解析できます。 JSON.parse() JavaScriptで。
5. XMLHttpRequest がデータを返さないのはなぜですか?
6. これは、次の場合によく発生します。 responseText プロパティが正しく処理されません。 PHP スクリプトが正しいコンテンツ タイプ (application/json) を返すことを確認します。
7. Cookie の使用はデータ転送に良い方法ですか?
8. サイズ制限とセキュリティ上の懸念により、Cookie は通常、大量のデータの転送には推奨されません。セッションまたは AJAX より安全なオプションです。
9. PHP と JavaScript 間のデータ転送を安全にするにはどうすればよいですか?
10. 使用する CSRF tokens または、サーバー側でリクエストを検証することで、PHP と JavaScript 間のデータ転送を安全に行うことができます。

安全なデータ処理に関する最終的な考え

PHP と JavaScript の統合は、特にデータがブラウザーに直接表示されないようにする場合に困難になることがあります。使用する アヤックス 転送がバックグラウンドで安全に行われるようにし、機密データをユーザーから隠します。

組み合わせる XMLHttpRequest または、PHP を使用した最新の Fetch API を使用すると、開発者は効率的にデータをフェッチできます。 JSON 応答とセッション管理を適切に処理することは、意図しない表示を防止し、Web アプリケーションで最適なセキュリティを確保するための鍵となります。