请问下，要做一个类似下图这种布局的web系统：点击左侧菜单，右侧主体部分加载对应的页面。这个要如何加载的啊。现在我有三种方案，但都觉得欠妥，大家是否又更好的方案。
当前的三种方案为：
1、右边嵌入 iframe————点击左侧菜单，给iframe的src属性设置对应的url
缺点：可能会有跨域的问题，父和子容器不好处理，另外对iframe有一定的偏见。
2、把内容load到右边区域————点击左侧菜单，把对应的包含div片段的jsp，load到左侧主体中一个空的div中。
缺点:貌似如果主体部分加载的是表单，不能用服务端语言，来渲染页面。都只能用ajax异步请求数据渲染，听说加载会很慢，而且不安全。但个人想尝试这种方法，不知道有哪些坑可能会碰到的。此系统会比较多菜单和数据。
3、每个页面include 树形菜单页面，每次到具体页面，通过js设置某个菜单项为选中状态,请求后台推送的对应的jsp-----点击左侧菜单，请求对应的页面，重新加载一个页面。
缺点：整体页面的左侧菜单和顶部每次都会重新刷新，页面用整体刷新，而我要的效果是只要右侧主体部分改变。
请问是否有第四种最优方案：想要实现的效果是，点击左侧菜单，切换右侧主体部分，左侧和顶部菜单不要重新渲染。
这个得看项目需要，具体用什么技术，首先得是你说的算。
第二种方案肯定是好的，不过要看这个web项目是在线产品还是内部使用。
在线产品做全站异步刷新，要保留原始的用户习惯，得做成youtobe那样，有url的变化，能够回退。
内部使用就简单多了，直接采用一套mvvm的模板就轻松搞定啦。
http://class.qq.com/这是之前做的项目，就是按照第二种方案做的，用的H5，兼容性很烦没做处理。
可以通过JQuery的load()方法动态加载页面。
$( "#result" ).load( "ajax/test.html" );参考链接：.load()
第三种方案，这样的因为左边菜单的数据比较少，你可以写入缓存来处理
相信我，用 React，会极大地节约你的生命
我从完全不会 React 到实现出这个效果用了一天左右。当然，不算掉进 React 0.14 和 react-router 1.0.0 坑的时间
别说顶部和左边不刷新，基本你想刷哪就刷哪
我们是自己开发的p2p系统，用的现成的ui框架，主体载入用的就是第二种方式，全站80%以上用的都是ajax交互，速度还是很不错的，比如我们的单张页面表格数据一次性大概可以请求3w条，大概需要4秒，不知道是什么水平，后端用的PHP的yii2框架写的，安全性目前来说还算可以