使用node.js后端的新数据更新网页的一部分

Question

我正在尝试制作一个应用程序，用刮刀抓取用户正在听的歌曲。现在我可以让用户访问页面并查看正在收听的歌曲标题，但如果歌曲更新，他们需要自己刷新整个页面。我正在寻找一种方法来运行路由文件中的代码，然后用歌曲数据渲染页面，然后不时检查数据是否发生了更改，然后用新数据刷新页面的部分。

以下是我想要发生的事情：

1. 用户将GET发送到/songinfo
2. app.get从外部源抓取数据
3. app.get使用歌曲数据渲染ejs文件
4. 计时器关闭/用户按下页面上的手动刷新按钮
5. 新数据被呈现到页面上，网站的其他部分不会刷新。仅刷新歌曲数据

谢谢。

Answer 1

您需要使用ajax。

您可以在nodejs服务器上创建一个新的路由，该路由以json形式返回歌曲数据，而不是向客户端呈现EJS文件。

想象一下你的代码现在是这样的：

app.get('/songinfo', function(req, res) {
  request.get('http://songinfo.com/songs', function(err, res, data) {
    res.render('songinfo.ejs', data);
  });
});

您可以将其更改为以下内容：

function getSongInfo(callback) {
  request.get('http://songinfo.com/songs', function(err, res, data) {
    callback(data);
  });
}
app.get('/songinfo', function(req, res) {
  getSongInfo(function(data) {
    res.render('songinfo.ejs', data);
  });
});
app.get('/raw-songinfo', function(req, res) {
  getSongInfo(function(data) {
    res.setHeader('content-type', 'application/json');
    res.send(data);
  });
});

我在这里所做的是提取getSongInfo逻辑以保持我们的应用程序DRY，并添加了第二个也使用该函数的路由，并且不是将数据发送回ejs文件，而是将其发送回json。现在，在您的ejs文件中，您可以添加调用此路由的逻辑：

<button onclick='reloadData()'> Reload me! </button>
<script type='text/javascript'> 
  function reloadData() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
        if(xmlhttp.status == 200){
          // Update the data in your app somehow...
          // example:
          var responseData = JSON.parse(xmlhttp.responseText);
          document.getElementById('songs-count').innerHTML = responseData.length;
        } else {
          alert('something went wrong!');
        }
      }
    }
  }
</script>