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

1.如图1我这里点击HTML元素这个侧栏标签,图片描述

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

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

阅读 20.4k
4 个回答

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

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

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏