Question

我在用户登录后在页面上填充数据。没有任何客户端JS，这会立即发生，因为服务器正在通过响应发回数据。相应的HTML只是一个简单的把手文件。

服务器端index.js：

/* GET root page. */
router.get('/', function(req, res, next) {
  if(req.isAuthenticated()){
    return res.redirect('/home');
    next();
  } else {
    res.redirect('/login')
  }
});

// GET home page.
router.get('/home', ensureAuthenticated, (req, res, next) => {
  User.find({ gender: 'female'}, (err, all) => {
    res.render('home', {
      all: all
    })
  })
})

使用客户端JS时，加载数据需要更长的时间（大约几分之一秒）。我认为这是因为客户端必须在呈现页面后再次访问服务器。

客户端home.js：

window.addEventListener('load', () => {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = JSON.parse(this.responseText);
      if (window.location.pathname === '/home') {
        document.getElementById('all-members').innerHTML = output;
      }
    }
  }
  xhr.open('GET', '/home_test', true)
  xhr.send()
})

服务器端index.js：

/* GET root page. */
router.get('/', function(req, res, next) {
  if(req.isAuthenticated()){
    return res.redirect('/home');
    next();
  } else {
    res.redirect('/login')
  }
});

router.get('/home_test', ensureAuthenticated, (req, res, next) => {
  User.find({ gender: 'female'}, (err, all) => {
    res.send(all)
  })
})

// GET home page.
router.get('/home', ensureAuthenticated, (req, res, next) => {
  User.find({ gender: 'female'}, (err, all) => {
    res.render('home', {
      all: all
    })
  })
})

相应的html文件只是<div id="all-members"></div>。

我可以使用客户端JS模仿服务器端响应（客户端中的数据立即加载）吗？

客户端JS需要更长的时间来处理服务器请求

0 个答案: