XHR 请求 JavaScript - PHP

在 Web 开发中，XHR（XMLHttpRequest）被广泛用于浏览器与服务器之间进行数据交换。XHR 可以使用 JavaScript 发送 HTTP 请求并接收响应，即在不重新加载页面的情况下更新页面内容。

在 PHP 中，我们可以使用 $_GET、$_POST、$_REQUEST 等变量来接收浏览器发送的数据。同时，PHP 也提供了很多函数来实现对数据库的操作。结合 XHR 和 PHP，我们可以实现动态化的网页。

发送 XHR 请求

在 JavaScript 中，我们可以使用如下代码发送 XHR 请求：

const xhr = new XMLHttpRequest(); // 创建一个 XHR 对象
xhr.open('GET', '/path/to/file'); // 初始化一个请求
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 服务器响应完毕且状态码为 200
    console.log(xhr.responseText); // 打印响应内容
  }
};
xhr.send(); // 发送请求

其中，readyState 表示当前状态，status 表示服务器响应状态码，responseText 是服务器返回的响应内容。

接收 XHR 请求

在 PHP 中，我们可以通过 $_GET、$_POST、$_REQUEST 等变量来接收浏览器发送的数据，例如：

<?php
if (isset($_GET['name'])) {
  $name = $_GET['name'];
  echo 'Hello, ' . $name;
}
?>

在以上代码中，我们通过 $_GET['name'] 接收浏览器发送的名字，然后返回对应的问候语。

发送 JSON 数据

除了发送普通的文本或表单数据外，我们还可以通过 XHR 发送 JSON 格式的数据，例如：

const xhr = new XMLHttpRequest(); // 创建一个 XHR 对象
xhr.open('POST', '/path/to/server'); // 初始化一个请求
xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 服务器响应完毕且状态码为 200
    console.log(xhr.responseText); // 打印响应内容
  }
};
const data = {
  name: 'Alice',
  age: 18
};
xhr.send(JSON.stringify(data)); // 发送 JSON 数据

在以上代码中，我们通过 setRequestHeader 方法设置了请求头，告诉服务器发送的数据是 JSON 格式的。在服务器端，我们可以通过 file_get_contents('php://input') 来接收 JSON 数据，例如：

<?php
$json = file_get_contents('php://input');
$data = json_decode($json, true); // 解析 JSON 数据
echo 'Hello, ' . $data['name'] . ', you are ' . $data['age'] . ' years old.';
?>

发送 FormData 数据

如果我们需要上传文件或发送一些复杂的数据时，我们就需要使用 FormData 对象来发送数据。例如：

const xhr = new XMLHttpRequest(); // 创建一个 XHR 对象
xhr.open('POST', '/path/to/server'); // 初始化一个请求
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 服务器响应完毕且状态码为 200
    console.log(xhr.responseText); // 打印响应内容
  }
};
const formData = new FormData();
formData.append('file', fileInput.files[0]); // 添加文件
formData.append('name', 'Alice'); // 添加文本数据
xhr.send(formData); // 发送 FormData 数据

在以上代码中，我们通过 append 方法添加了一些数据，然后再发送。在服务器端，我们可以使用 $_FILES 和 $_POST 来接收文件和文本数据，例如：

<?php
$file = $_FILES['file'];
$name = $_POST['name'];
echo 'Uploaded file ' . $file['name'] . ' with size ' . $file['size'] . ' bytes, and name is ' . $name;
?>

总结

在 Web 开发中，XHR 是非常重要的一环。它可以帮助我们实现前后端数据交互，从而实现更加动态化的网页。通过本文，我们不仅学会了如何发送 XHR 请求，还学会了如何接收 XHR 请求，以及如何发送 JSON 和 FormData 数据。希望本文对你有所帮助！