客户端上的AJAX Express接收数组

Question

当数组数据从另一个源流到我的客户端时，我在接收数组数据时遇到了问题。我的目标是让HTML文档在服务器接收到数组时填充数组中的数据。

服务器：

const keywordsList = [];
const keywordsListSerialize = JSON.stringify(keywordsList);
const arrayToString = JSON.stringify(Object.assign({}, keywordsList))
// const keywordsListObject = JSON.parse(arrayToString);
app.use(cors())
const bodyParser = require('body-parser');
app.get('/', (req, res) => {
// res.writeHead(200, {
//     'Connection': 'keep-alive',
//     'Content-Type': 'text/event-stream',
//     'Cache-Control': 'no-cache',
//   });
//res.flushHeaders();
res.send(keywordsList);
//res.write(arrayToString);
//res.status(200).send(arrayToString);
//res.status(500).send({ error: 'something blew up' })
});

正如你从服务器代码中看到的，我已经尝试了多种将数据作为JSON对象/只是数组或字符串发送的变体，但我似乎都无法在我的客户端上显示任何数据。

客户：

var xhttp = new XMLHttpRequest();
console.log(xhttp);
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(xhttp.responseText)
var jsonObj = JSON.parse(xhttp.responseText);
for(i = 0; i < jsonObj.length; i++) {
document.getElementById("keywordsList").innerHTML = jsonObj;
}
}
};
xhttp.open("GET", "/", true);
xhttp.send();

客户做了两件非常基本但有趣的事情。1.xhttp.responseText是整个HTML文件，这让我认为我应该在服务器中以某种方式处理请求(我认为我可以通过不断向客户端传输数据来逃脱惩罚(和2。向我发送错误

VM812:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.xhttp.onreadystatechange

我相信我有多重问题。我知道我几乎肯定会想把数据作为JSON对象发送，并在客户端上解析它，但在最基本的例子中，我甚至无法做到这一点。我已经仔细检查了我的客户端和服务器的设置是否正确，如果需要，我可以讨论如何设置，以确保它们在本地正确链接。

我正在寻求指导以及可能的技术答案。请不要只是把ajax文档链接给我，因为我现在可能已经读了3遍了(至少(。我想把所有的东西都扔掉，用一个websocket来完成我想要实现的目标，但这意味着要学习所有这些。

谢谢你抽出时间。

Answer 1

所以我最终找到了答案。上面唯一一篇来自其他人的帖子是正确的。发送数据就这么简单。不幸的是，当你试图理解AJAX并同时表达时，你会困惑于你是否真的在发送数据，以及数据的结构是否正确，这样客户端就不会抛出错误。我把AJAX和expression问题混为一谈，如果我知道如何正确测试东西，这些问题本可以更快地解决，但遗憾的是，我正在独自解决这一切。

对于任何可能遇到这种情况的可怜的sap，可能不使用XMLHttpRequest，只使用JQuery。

感谢您的回复。

Answer 2

服务器：

const express = require('express')
const app = express()
const port = 3000
const keywordsList = ['apple', 'banana', 'cucumber']
app.get('/', (req, res) => {
res.send(JSON.stringify(keywordsList))
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})

测试web服务器：

curl http://localhost:3000
["apple","banana","cucumber"]

迭代客户端中的响应：

const arrayOnClientSide = JSON.parse(xhttp.responseText);
arrayOnClientSide.forEach(element => console.log(element));

输出：

apple
banana
cucumber

请注意，每次调用.innerHTML时，都会覆盖它以前包含的任何值，因此首先构造显示值的表示格式，然后在最后将其分配给innerHTML。