javascript - 请问这样页面的局部刷新加载是如何做到的？

Question

1.如图1我这里点击HTML元素这个侧栏标签，

2.然后我点击HTML连接这个侧栏标签

点击HTML连接这个标签后，只是红色方框里变化(发生了对服务端的请求)了，而导航栏和侧边栏并没有发生重新加载刷新。
点击后退确实也能后退，而且地址栏也发生了变化，说明是路由起了作用。
所以它是如何实现的呢？
如果用nodejs如何实现呢？
如果用express如何实现呢？
一般大公司公司都不会用jade、ejs、这些模板引擎吧

Answer 1

谁说这里是局部刷新了！明明是整个页面都刷新了，只是头部等部分内容相同，某些情况你看不出来刷新了而已，你把调试工具打开看看network这一项，每次点击所有东西都重新加载了...

你想做不刷新的，去搜搜单页面(SPA)应用
给你个真局部例子：http://material-ui-vue.jackyang.me/docs

Answer 2

你可以看我的博客清枫浦，此处完整实现了你说的局部刷新。
其实这种技术叫pjax，原理是利用ajax的局部请求来获取目标页面的资源，加上html5的pushState来设置历史纪录。
我的这篇博文纪录了实现过程供你参考。

Answer 3

就和第一个回答一样，有部分网页只是整体刷新了你没看出来，真正的局部刷新就是使用了前端路由，就是说路由的过程由js完成，地址改变之后并不发送到后端服务器，而是由js程序来决定要如何修改当前页面的内容。

类似你举的这个网页的例子如果用前端路由的方法来做的话，就需要配合ajax，点击左边的导航栏之后地址改变，js代码根据新的地址请求后端服务器相应的内容，然后生成新的DOM节点以代替原来的右边内容

Answer 4

我刚看了这个网站,已经刷新了整个页面. 不是局部刷新和修改url地址.