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

web应用的页面可以用不同风格的操作模式,在一个项目或产品中,应有统一的页面操作模式,以符合用户的预期。比如一个表有增、删、改、查四个操作,有如下操作模式:
1、页面跳转,首先是查询列表页,上面有“增加”“删除”“修改”按钮,按某按钮则页面跳转为相应页面,操作完成后再跳转到查询列表页,这种跳转有时用转发(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组装输出。

你可能感兴趣的:(jquery,Web,应用服务器,Ajax,freemarker)