一种基于ajax的动态网页框架设计方法_ajax实现动态网页

ajax由于其可以做到不用重新加载整个页面而获取后台数据刷新局部网页，而广泛为web开发中应用。
后台管理系统一般都是左侧或上方存在导航栏，固定不变，其余部分作为真正的数据部分。

如上图，功能是点击导航栏中的1或2标签可以实现内容DIV的对应功能显示。传统的设备方案是使用iframe标签将整个页面分成两个部分，做到互不影响。但是又因为两个页面的独立性不能做到整体页面显示的统一控制。这时候想到使用ajax做刷新内容解决问题。
1、将各个功能内容页面的HTML独立加到对应的HTML文件中，例如导航1->1.html；
2、为导航1添加onchange js事件changefun;
3、changefun接口内部做ajax请求，请求1.html的所有内容。后端需实现1.html全部文件的html组装返回。ajax回调接口将内容div的内容清空，然后将1.html内容全部回填到内容div；
4、如果内容div的内容都是静态数据，那么上一步做完，即可完成功能。如果内容div需要动态从数据库获取数据，还需做下一步；
5、新建js refreshfun接口，以ajax形式获取动态内容html。同样后端需实现对应动态内容的数据库访问和html组装。changefun回调接口，在回填内容div之后调用刷新数据接口refreshfun,刷新内容div中的动态数据。
6、首页的内容div如果也是动态的同样可以通过ajax形式获取。通过js 的页面加载初始化接口调用ajax方案可实现加载页面时直接加载出首页全部内容。

以上可以作为一种新的后台框架设计方案。