从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': '*' });
- 错误处理：在实际应用中，应该添加错误处理代码，以处理请求失败或服务器返回错误状态码的情况。
相关·内容
我有一个js函数，它调用一个xml请求来从一个单独的php文件中获取数据。我可以通过echoing从单独的php文件中获取返回的数据。下面是我当前的代码： var xhttp = new XMLHttpRequest(); {$countryPrice;返回Russia is worth $1B，但如果我想分别发送$countryName和$countryPrice怎么办 例如respon
浏览 20提问于2019-08-27得票数 0
回答已采纳
对不起，这也许是个愚蠢的问题，但对我来说并不明显： return $http.post('/api/v1/login/', { password: password Authentication.setAuthen
浏览 3提问于2018-10-11得票数 1
回答已采纳
1回答
我试图通过我的函数发送这个HTTP请求，但无论如何它都会返回undefined 这是一个非常基本的要求，我不明白为什么会这样 如果我将URL复制并粘贴到浏览器中，它将正常工作并显示所需的JSON 我使用随机id和api密钥在浏览器控制台上尝试了这个函数，但仍然返回undefined function getSummary(id){ let xhr2=new XMLHttpRequest();
浏览 32提问于2020-06-24得票数 0
回答已采纳
1回答
创建XMLHTTPRequest后的为什么要创建回调XMLHTTPRequest.它是做什么的？将响应解析为XML 响应DOM?DOM包含了什么以及它实际上做了什么？
浏览 4提问于2010-10-18得票数 0
回答已采纳
我需要从网页中获取JSON响应文本，以便对其进行解析。但是，当我创建XML HTTP请求时，返回的HTML甚至不是来自我所请求的页面。我尝试了一个不同的url (https://jsonplaceholder.typicode.com/todos/1)，但我能够获得我的JSON响应文本。然而，使用我的“秘密URL”(不幸的是无法提供)，我得到了一个HTML响应。 我不确定我从哪里得到的超文本标记语言，我在Sauc
浏览 64提问于2019-01-08得票数 0
2回答
我正在使用AJAX将一些数据发布到服务，并且成功了-这意味着我可以真正看到存储在数据库中的新数据。但是，我的代码并没有进入done()部件，但由于某种原因，它总是在fail()部件中结束。readyState: 0, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
从服务器生成的响应如下所示new Uri(Request.RequestUri, String.Forma
浏览 1提问于2017-09-16得票数 0
如何在jQuery的$.post中使用延迟？我试过了： console.log(data);var post = $.post("/url/", someData);一如既往工作正常(在更改myFunc签名之后)。
$.when...不工作，并且没有错误显示失败。传递给myF
浏览 0提问于2011-06-22得票数 3
回答已采纳
1回答
我正在尝试从web服务器(使用javascript)打开一个浏览器窗口，其中包含通过xmlhttprequest响应发送的xml文档。java.io.BufferedReader in = new java.io.BufferedReader(new java.io.InputStreamReader(connection.getInputStream()));
从客户端发出xmlhttprequest的可能性是什么，哪个是更好的选择？
浏览 1提问于2012-10-24得票数 0
回答已采纳
1回答
我正在开发一个PHP应用程序，它需要几秒钟的时间来加载下一页。为了防止用户在下一个页面加载时单击垃圾邮件按钮(并让他们知道页面正在加载)，我实现了一个页面加载旋转器，它覆盖该页面：$('a[href*="http://www.example.com"]').on("click", function () { if
浏览 1提问于2016-05-23得票数 0
回答已采纳
我请求一个AWS API网关URL，我有一个JSON格式的响应，我解析它，但是当我想得到一个特定的JSON元素的值时，我得到“未定义”而不是元素的值。这是我的代码： xhr.onreadystatechange = function() { jsonData = JSON.parse(xhr.responseText);
浏览 6提问于2017-05-29得票数 0
回答已采纳
我在javascript中使用xmlhttprequest，调用一个php页面。php页面只回显一个字符串。问题:该函数返回undefined，但我已经通过添加alert(string)绕过了这个错误。然后，警报状态为'undefined‘，函数在返回时传递回显的值
浏览 2提问于2018-06-05得票数 0
下面是我用post请求获取报表数据的代码 type: "POST", contentType: 'application但是我可以看到结果console.log(响应)；-它显示文件内容。可以让我的代码下载文件吗？
浏览 6提问于2015-11-11得票数 0
回答已采纳
如果我将.csv文件放置在与动态图形相同的文件夹中-组合. is /var/www -则绘制该图形，请参见下面的内容： document.getElementById("graphdiv"), { showRoller: true,
浏览 2提问于2014-09-02得票数 0
1回答
我发回的数据可能会发生4件事.用户is是正确的，所以我收到的响应包括：XMLHttpRequest.status =200用户is是正确的，captcha是错误的，所以我收到的响应包括：XMLHttpRequest.status = 200
因此，您可以看到，每个响应</e
浏览 4提问于2010-10-30得票数 0
回答已采纳
/statistics下返回一个JSON对象 我试图在js脚本中获取此对象，但来自XMLHttpRequest的响应文本为空。 我注意到当API返回JSON数组时，响应文本不是空的。这是我在脚本中的js函数： 函数httpGet(theUrl) { var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", theUrl, false当API响应是JS
浏览 19提问于2019-06-23得票数 0
2回答
为了在Excel中从webservice获取数据，我创建了一个excel加载项提供函数来获得它；用户只需要在单元格中键入：=sendRequest("http://webservice.com") xmlHttpRequest.send
sendAsyncRequest = xmlHttpRequest.responseTextEnd Functio
浏览 6提问于2012-07-11得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
