论坛首页 Web前端技术论坛

web应用页面常见的四种操作模式,请问你用的是哪一种

浏览 2950 次
精华帖 (0) :: 良好帖 (1) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-04-14  

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组装输出。

   发表时间:2010-04-16  
在没有用户UI操作需求的话,适合自己的就是最好的。
如果是管理系统的话,觉得这个不是特别重要。
如果是网站,就得充分考虑了
0 请登录后投票
   发表时间:2010-04-17  
当有十几个查询条件时,跳转就是灾难.
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics