有几种方法可以将数据从服务器端(例如 NodeJS)发送到客户端 - 我假设在你的情况下将是一些 JavaScript 文件,例如main.js
处理 DOM 操作。
So, the 1st您发送数据的方式是通过模板引擎例如,像车把。您可以在这里找到一个易于使用的 Express 模块:hbs.
现在,为了快速总结这样的引擎是如何工作的,我们基本上发送一个 HTML 文件,就像您可能在教程中看到的那样,however,像 Handlebars 这样的模板引擎允许我们动态地使用该文件发送实际数据,所以我们要做的是render特定的车把template(在核心中只是 HTML),并将 JavaScript 对象传递给渲染调用,该调用将包含您想要传递到该文件中的所有数据,然后在.hbs
file.
所以在服务器端,我们会写这样的东西,假设我们有一个名为home.hbs
并将 Handlebars 设置为模板引擎:
router.get('/home', function(req,res) {
var dataToSendObj = {'title': 'Your Website Title', 'message': 'Hello'};
res.render('home',dataToSendObj);
});
并访问在home.hbs
像这样:
<html>
<header>
{{title}}
</header>
<body>
message from server: {{message}}
</body>
</html>
现在,这种方法的问题是,如果您想动态更新页面上的数据,without必须重新加载页面,使用模板引擎并不理想。相反,正如您所说,您将使用 AJAX。
So, the 2nd将数据从 NodeJS 服务器发送到网站前端的方法是使用异步 AJAX 调用。
首先,将路由添加到您用于 AJAX 进行调用的任何路由处理程序。在这里,您可能有一些逻辑来访问数据库,进行一些检查并将一些有用的信息返回给客户端。
router.get('/path/for/ajax/call', function(req,res) {
// make some calls to database, fetch some data, information, check state, etc...
var dataToSendToClient = {'message': 'error message from server'};
// convert whatever we want to send (preferably should be an object) to JSON
var JSONdata = JSON.stringify(dataToSendToClient);
res.send(JSONdata);
});
假设您有一些文件,例如main.js
,创建一个带有回调的 AJAX 请求来监听某些事件响应,如下所示:
var req = new XMLHttpRequest();
var url = '/path/for/ajax/call';
req.open('GET',url,true); // set this to POST if you would like
req.addEventListener('load',onLoad);
req.addEventListener('error',onError);
req.send();
function onLoad() {
var response = this.responseText;
var parsedResponse = JSON.parse(response);
// access your data newly received data here and update your DOM with appendChild(), findElementById(), etc...
var messageToDisplay = parsedResponse['message'];
// append child (with text value of messageToDisplay for instance) here or do some more stuff
}
function onError() {
// handle error here, print message perhaps
console.log('error receiving async AJAX call');
}
总结上述使用 AJAX 的方法,交互流程如下:
- 操作在客户端触发(如按下按钮)
- 事件处理程序创建一个新的 AJAX 请求,设置回调,以便知道从服务器返回响应时要做什么,然后发送请求
- 发送的 GET 或 POST 请求被服务器上的路由处理程序捕获
- 执行服务器端逻辑以从数据库、状态等获取数据......
- 新数据被获取,放入 JSON 对象中,并由服务器发回
- 客户端 AJAX 的事件侦听器load or error捕获响应并执行回调
- 在响应加载成功的情况下,我们解析响应并更新客户端 UI
希望这有帮助!