web应用四种常见的页面操作模式

web应用的页面可以用不同风格的操作模式，在一个项目或产品中，应有统一的页面操作模式，以符合用户的预期。比如一个表有增、删、改、查四个操作，有如下操作模式：
１、页面跳转，首先是查询列表页，上面有“增加”“删除”“修改”按钮，按某按钮则页面跳转为相应页面，操作完成后再跳转到查询列表页，这种跳转有时用转发（forword）有时用重定向（redirect）。这种模式下页面总是通过jsp或servlet在服务器端组装出来，每一个操作页面都要刷新。

2、查询列表页加弹出窗口，每项功能只列出查询列表页，上面有“增加”“删除”“修改”按钮，按某按钮则弹出窗口显示对应的表单，处理完成后关闭该窗口，如需要也可以刷新父窗口的查询列表页。与第一种“页面跳转”方式类似，弹出窗口中也是独立的网页，可以有翻页等操作。在IE一统天下时，经常用openModelDialog打开模式对话框，而现在为了与其它浏览器兼容，可以自己实现弹出对话框--对话框中放一个iframe用来显示操作页面。

3、纯Ajax方式，随着web2.0的流行而流行起来，即页面框架用javascript制作，无论增、删、改、查均从服务器获取纯数据如json格式数据，在前台组装显示给用户，客户端与服务器端之间纯粹是数据交换，不再需要jsp或servlet后台组装页面了，velocity/freemarker等模板语言再无用武之地了。在如Extjs等框架帮助下，实现起来也比想像中简单。

4、半Ajax方式，查询列表页仍然正常显示，点击上面的“增加”“删除”“修改”等按钮时，通过Ajax获取数据组装为对话框页面或者获取HTML片断作为对话框显示操作表单，表单提交则用Ajax方式，根据返回值在查询列表页显示完成的通知，或者作出变化响应（如去掉某条删除了的记录或者显示更新后的记录但不刷新全页）。

不同的方式对不仅对前台界面，对服务端开发也有极大影响，因此应比较这些模式，看哪一种是更好的方式：

首先，我认为纯Ajax这种方式完全是一种革命，优点很明显：友好性最佳，基本不需要刷新页面，与后台的请求数据量小，但除非整个系统建立在类Extjs框架上，否则不宜使用，因为开发团队不易掌握，过于依赖js，并且页面的个性化处理比较困难。

局部使用Ajax的第四种模式呢？这种方式只需使用开源的jquery或prototype等js库支持即可，不像extjs限制的那么死，但对开发团队却提出了更高的要求，只看这一点吧：跳转或者弹出窗口的方式，每个操作都是独立的页面，只要把这个页面写对就行了，半Ajax的方式下这些页面要组装在一起，存在耦合性也难免冲突。

总之，传统的web开发有一些成熟的方法，也有成熟的模板语言帮助我们更好地实现，而Ajax来到则让我们有点无所适从了，更多使用Ajax不仅是客户端代码的问题，对服务器端也有重大影响。您是怎么决定的呢？

就我来说，我还是用了传统的页面跳转方式，部分使用了弹出窗口，Ajax只用在少数地方：表单的主健重复值校验、级联下拉框、输入提示下拉框等局部中，页面还是用freemarker组装输出。

评论

2 楼 01404421 2009-09-27  

鄙人以为 富客户端应该是未来的方向，也不全是JS来实现，不过还要分应用的目的，比如类似FaceBook和校内，注重页面体验；而一些管理系统则要求不高

1 楼 honda418 2009-09-27  

第三种，纯的ajax请求应该是未来发展的方向吧。。。