PHP 数据传输到 JavaScript：避免浏览器显示

高效地将数据从 PHP 传递到 JavaScript

Web 开发中最常见的任务之一是将数据从服务器发送到客户端，而不直接向用户显示。这在处理敏感信息或构建只有 JavaScript 应该解释的响应时特别有用。许多开发人员在同时使用 PHP 和 JavaScript 时遇到了这一挑战。

在这个场景中，我们使用 XMLHttpRequest 将用户数据发送到服务器。然后，服务器处理请求、搜索数据库并检索必要的数据。然而，将这些数据传递回 JavaScript 而不将其暴露给浏览器是很棘手的。

可以通过多种方式发回数据，例如使用 cookie 或将其嵌入 JavaScript 或 HTML 中。但这些方法都有缺点，特别是当涉及 XMLHttpRequest 时，通常会导致数据意外显示或数据处理不完整等问题。

本文将探讨一种将检索到的数据从 PHP 安全地发送到 JavaScript 的方法，确保数据对用户而言是隐藏的，但可供 JavaScript 进行操作。

命令	使用示例
XMLHttpRequest.onreadystatechange	这是一个关键的事件处理程序，用于侦听 XMLHttpRequest 中的状态更改。在此问题中，它用于检测请求何时完成以及服务器何时响应，从而能够在 JavaScript 中处理返回的数据。
responseText	XMLHttpRequest 对象的此属性将来自服务器的响应存储为字符串。在本例中，它包含 PHP 返回的 JSON 编码数据，稍后将其解析为 JavaScript 对象以进行进一步操作。
JSON.parse()	该函数用于将来自服务器的 JSON 编码字符串转换为 JavaScript 对象。这对于确保数据可在客户端脚本中使用而无需在浏览器上直接可见的解决方案至关重要。
fetch()	这是 Fetch API 的一部分，Fetch API 是一种发出 HTTP 请求的现代方法。与 XMLHttpRequest 相比，它简化了发送请求和处理响应。在这里，它用于向服务器发送数据并接收 JSON 格式的数据返回。
headers: {'Content-Type': 'application/x-www-form-urlencoded'}	这会设置使用 Fetch API 发出的 POST 请求的标头。它确保服务器正确解释以 URL 形式（键值对）编码的发送数据。它对于正确的服务器通信至关重要。
mysqli->mysqli->connect_error	此 PHP 属性用于在尝试连接到数据库时检测连接问题。在此问题的上下文中，它确保脚本正常处理数据库连接失败并输出有意义的错误消息。
json_encode()	此 PHP 函数在此解决方案中至关重要，因为它将 PHP 关联数组（从数据库检索）转换为 JSON 字符串。然后，该字符串作为响应返回给客户端 JavaScript 进行处理。
onreadystatechange	XMLHttpRequest 的内置事件处理程序。它监视请求的就绪状态。在此上下文中，它用于确定请求何时完全完成（状态 4）以及何时可以处理响应。
.then()	这是 Fetch API 基于承诺的结构中的一个方法。 fetch 请求成功后，.then() 函数会处理响应，例如解析 JSON 数据。它简化了异步请求处理。

使用 XMLHttpRequest 将数据从 PHP 安全地传递到 JavaScript

上面提供的解决方案演示了如何将数据从 PHP 后端传递到 JavaScript，而不直接在浏览器上显示。当处理仅可用于 JavaScript 进行进一步处理的数据（例如呈现动态内容或管理用户交互）时，这特别有用。这里的关键是使用 对象异步发送和接收数据。这允许客户端在后台向服务器请求数据，避免页面重新加载并确保敏感数据不会以 HTML 形式直接暴露给用户。

PHP 脚本连接到 MySQL 数据库并检索必要的信息，然后使用以下命令将其编码为 JSON 格式： 功能。 JSON 非常适合这种用例，因为它是轻量级的并且很容易被 JavaScript 解析。 JSON 响应被发送回客户端脚本，客户端脚本使用 事件处理程序。一旦服务器指示响应已准备好（当readyState达到4并且status为200时），数据就会被捕获并处理。

一旦 JavaScript 接收到数据， 方法用于将 JSON 字符串转换为 JavaScript 对象。此步骤至关重要，因为它允许在脚本内操作数据，而无需将其显示在页面上或将其公开给用户。 JavaScript 的灵活性允许开发人员以多种方式使用数据，例如更新 DOM、处理用户交互或根据接收到的数据发出额外的异步请求。

在使用 Fetch API 的替代方法中，采用更现代、更简化的方法来发出 HTTP 请求。 Fetch API 基于 Promise，这使得使用异步操作变得更加容易。与相比，它提供了更清晰、更易读的语法 。然而，这两种方法都实现了相同的目标：确保数据由 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();
}
//

使用 AJAX 在 PHP 和 JavaScript 之间进行有效的数据传输

另一种安全地将数据从 PHP 发送到 JavaScript 而不将其显示在浏览器上的方法是结合使用 AJAX 和会话管理。更安全的方法是将数据临时存储在 PHP 会话中，而不是直接回显数据或将其嵌入到 JavaScript 中。这可确保敏感数据不会直接暴露，并且可以根据需要由 JavaScript 检索。

在此场景中，当用户发送 XMLHttpRequest 时，服务器会处理该请求、检索必要的数据并将其存储在会话中。然后，客户端 JavaScript 可以请求此数据，而无需将其呈现为 HTML。这不仅提高了安全性，还可以防止直接在 HTML 或 JavaScript 中嵌入数据时经常遇到的不必要的格式问题。会话对于处理较大的数据集或当数据需要跨多个请求保留时特别有用。

另一个关键方面是确保适当 以及数据传输过程中的验证。通过在服务器端和客户端同时实施检查，开发人员可以确保 PHP 返回的数据准确且符合预期格式。此外，使用诸如 或会话管理确保只有授权请求才能访问敏感数据，从而使这种方法更加安全可靠。

1. 防止数据在浏览器上可见的最佳方法是什么？
2. 使用 将数据从 PHP 传输到 JavaScript 可确保数据在后台处理，而不显示在页面上。
3. 如何使用 JSON 将数据从 PHP 发送到 JavaScript？
4. 这 PHP中的函数将数据转换为JSON格式，可以使用解析 在 JavaScript 中。
5. 为什么XMLHttpRequest无法返回数据？
6. 当 财产处理不当。确保 PHP 脚本返回正确的内容类型 (application/json)。
7. 使用 cookie 是传输数据的好方法吗？
8. 由于大小限制和安全问题，通常不建议使用 Cookie 传输大量数据。会议或 是更安全的选择。
9. 如何确保 PHP 和 JavaScript 之间的数据传输安全？
10. 使用 或者在服务器端验证请求可以帮助保护 PHP 和 JavaScript 之间的数据传输。

PHP 和 JavaScript 集成可能具有挑战性，特别是在尝试阻止数据直接显示在浏览器上时。使用 确保传输在后台安全进行，对用户隐藏敏感数据。

组合 或者使用 PHP 的现代 Fetch API 允许开发人员高效地获取数据。正确处理 JSON 响应和会话管理是防止意外显示、确保 Web 应用程序最佳安全性的关键。