从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 对象。
- 创建一个简单的 HTTP 服务器，监听
- 客户端：
- 使用
XMLHttpRequest发送 GET 请求到服务器的/data路径。 - 在
onreadystatechange事件处理程序中，检查请求的状态和响应状态码。 - 解析返回的 JSON 数据，并将其显示在页面上。
- 使用
注意事项
- 跨域请求：如果客户端和服务器在不同的域上运行，你需要处理跨域资源共享（CORS）问题。确保服务器设置了适当的 CORS 头，例如： res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
- 错误处理：在实际应用中，应该添加错误处理代码，以处理请求失败或服务器返回错误状态码的情况。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
