从XMLHttpRequest返回多个数据/响应文本

在使用 XMLHttpRequest 进行 AJAX 请求时，通常只能接收一个响应文本（responseText）或响应数据（response）。如果你需要返回多个数据，可以将这些数据打包成一个 JSON 对象或数组，然后在客户端解析这个 JSON 数据。

以下是一个完整的示例，展示如何通过 XMLHttpRequest 返回多个数据：

服务器端（Node.js 示例）

假设你有一个简单的 Node.js 服务器，它返回多个数据打包成一个 JSON 对象：

const http = require('http');

const server = http.createServer((req, res) => {
    if (req.url === '/data') {
        res.writeHead(200, { 'Content-Type': 'application/json' });
        const responseData = {
            message: "Hello, World!",
            timestamp: new Date().toISOString(),
            randomNumber: Math.random()
        };
        res.end(JSON.stringify(responseData));
    } else {
        res.writeHead(404, { 'Content-Type': 'text/plain' });
        res.end('Not Found');
    }
});

server.listen(3000, () => {
    console.log('Server is listening on port 3000');
});

客户端（JavaScript 示例）

在客户端，你可以使用 XMLHttpRequest 发送请求并解析返回的 JSON 数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XMLHttpRequest Example</title>
</head>
<body>
    <button id="fetchData">Fetch Data</button>
    <div id="output"></div>

    <script>
        document.getElementById('fetchData').addEventListener('click', () => {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://localhost:3000/data', true);

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const responseData = JSON.parse(xhr.responseText);
                    document.getElementById('output').innerHTML = `
                        <p>Message: ${responseData.message}</p>
                        <p>Timestamp: ${responseData.timestamp}</p>
                        <p>Random Number: ${responseData.randomNumber}</p>
                    `;
                }
            };

            xhr.send();
        });
    </script>
</body>
</html>

解释

服务器端：
- 创建一个简单的 HTTP 服务器，监听 /data 路径。
- 返回一个包含多个数据的 JSON 对象。
客户端：
- 使用 XMLHttpRequest 发送 GET 请求到服务器的 /data 路径。
- 在 onreadystatechange 事件处理程序中，检查请求的状态和响应状态码。
- 解析返回的 JSON 数据，并将其显示在页面上。

注意事项

跨域请求：如果客户端和服务器在不同的域上运行，你需要处理跨域资源共享（CORS）问题。确保服务器设置了适当的 CORS 头，例如： res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
错误处理：在实际应用中，应该添加错误处理代码，以处理请求失败或服务器返回错误状态码的情况。