Node.js Express中XMLHttpRequest(XHR)配置入门及示例需求

嘿，别担心，XHR和Node.js（尤其是你已经熟悉的Express）配合其实挺容易上手的。我给你整个最基础的完整示例，从后端配置到前端请求，一步步拆解，帮你理清整个工作流程～

首先咱们先写一个简单的Express服务器，用来接收XHR的请求并返回响应。

先确保你已经初始化了Node.js项目，安装好需要的依赖：

npm init -y
npm install express cors

然后创建server.js文件，代码如下：

const express = require('express');
const cors = require('cors');
const app = express();
const port = 3000;

// 允许跨域请求（解决前端直接打开HTML时的跨域问题）
app.use(cors());
// 解析JSON格式的请求体（处理POST请求时必须）
app.use(express.json());

// 定义GET路由，响应XHR的GET请求
app.get('/api/data', (req, res) => {
  // 模拟返回业务数据
  res.json({
    message: '这是来自Express服务器的GET响应',
    list: ['苹果', '香蕉', '橙子']
  });
});

// 定义POST路由，响应XHR的POST请求
app.post('/api/submit', (req, res) => {
  // 获取客户端通过XHR发送的JSON数据
  const clientData = req.body;
  console.log('收到客户端提交的数据：', clientData);
  
  // 返回处理后的响应
  res.json({
    status: 'success',
    msg: '数据已成功接收',
    received: clientData
  });
});

// 启动服务器
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

简单解释下：

• cors()中间件是为了避免前端直接打开HTML时的跨域拦截，开发环境可以放心用；
• express.json()用来解析客户端发送的JSON请求体，这样我们才能拿到req.body里的内容；
• 两个路由分别对应XHR最常用的GET（拿数据）和POST（提交数据）场景，返回的都是前后端通用的JSON格式。

接下来写一个简单的HTML页面，里面用XHR调用上面的后端接口。创建index.html文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>XHR + Express 入门示例</title>
</head>
<body>
  <h1>XHR与Express交互演示</h1>
  <button onclick="sendGet()">发送GET请求</button>
  <button onclick="sendPost()">发送POST请求</button>
  <div id="result" style="margin-top:20px;"></div>

  <script>
    // 发送GET请求的函数
    function sendGet() {
      // 1. 创建XHR核心对象
      const xhr = new XMLHttpRequest();
      // 2. 配置请求：方法、URL、是否异步（true=异步）
      xhr.open('GET', 'http://localhost:3000/api/data', true);
      // 3. 设置响应类型为JSON（可选，但能直接拿到解析好的对象）
      xhr.responseType = 'json';

      // 4. 监听请求完成事件
      xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
          // 请求成功，把响应数据渲染到页面
          const res = xhr.response;
          document.getElementById('result').innerHTML = `
            <h3>GET请求结果：</h3>
            <p>提示：${res.message}</p>
            <p>数据列表：${res.list.join(', ')}</p>
          `;
        } else {
          // 请求失败，提示状态码
          document.getElementById('result').innerHTML = `<p>GET请求失败，状态码：${xhr.status}</p>`;
        }
      };

      // 5. 监听请求错误事件
      xhr.onerror = function() {
        document.getElementById('result').innerHTML = '<p>GET请求发生网络错误</p>';
      };

      // 6. 发送请求
      xhr.send();
    }

    // 发送POST请求的函数
    function sendPost() {
      const xhr = new XMLHttpRequest();
      xhr.open('POST', 'http://localhost:3000/api/submit', true);

      // 发送POST请求必须设置这个请求头，告诉服务器请求体是JSON格式
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.responseType = 'json';

      xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
          const res = xhr.response;
          document.getElementById('result').innerHTML = `
            <h3>POST请求结果：</h3>
            <p>状态：${res.status}</p>
            <p>提示：${res.msg}</p>
            <p>你提交的数据：${JSON.stringify(res.received)}</p>
          `;
        } else {
          document.getElementById('result').innerHTML = `<p>POST请求失败，状态码：${xhr.status}</p>`;
        }
      };

      xhr.onerror = function() {
        document.getElementById('result').innerHTML = '<p>POST请求发生网络错误</p>';
      };

      // 准备要发送的JSON数据，必须转为字符串才能发送
      const sendData = {
        username: 'loksan',
        age: 25,
        hobby: '前端开发'
      };
      xhr.send(JSON.stringify(sendData));
    }
  </script>
</body>
</html>

现在把整个交互串起来，你跟着操作一遍就懂了：

1. 启动后端：在终端运行node server.js，看到控制台输出“服务器运行在http://localhost:3000”就说明后端准备好了；
2. 打开前端：直接用浏览器打开index.html文件；
3. 测试GET请求：点击“发送GET请求”，前端创建XHR对象、配置请求、发送后，后端的/api/data路由接收到请求，返回JSON数据，前端的onload事件触发，把结果渲染到页面上；
4. 测试POST请求：点击“发送POST请求”，前端把准备好的JSON数据转为字符串发送，后端的/api/submit路由接收并打印数据，再返回响应，前端同样渲染结果到页面。

整个过程就是XHR作为前端和后端的“通信使者”，把请求发出去，再把响应带回来，而Express则负责接收请求、处理逻辑、返回结果～

内容的提问来源于stack exchange，提问作者loksan