Ajax实现查询助手.doc

Ajax实现查询助手（Query Helper） 1?????? 概述 1.1??? 查询助手功能介绍 在通常的BS软件项目中，查询助手使用频率非常高，其功能是点击图标，页面上元素的值为条件，到后台查询结果，弹出查询结果对话框，选择纪录，关闭对话框，并且把你选择的有关内容显示到父页面中指定的元素中。由于其友好的界面设计和操作性能，对用户和设计开发人员都有很大的吸引力，但存在开发效率低，复用性差，复杂度较高等问题。 1.2??? Ajax现状和项目实践 随着Ajax的风靡全球，Google的推波助澜，优秀的界面风格，局部刷新的全新感受，给人耳目一新的印象。但由于Ajax诸多javascript脚本和后台应用的复杂性，使ajax的推广困难重重，国内的应用大多都是玩具级，距项目实用还有不小的差距，包括Microsoft，IBM，SUN都在积极攻关研发，以提高项目开发的实用性，降低开发难度。为了使用ajax在项目的实用性，针对查询助手功能的Ajax做了一些有益的尝试，特别愿意和大家分享。 1.3??? Ajax简介 网上关于Ajax的文章汗牛充栋，具体的Ajax理论可以到网上搜索，这儿只做简单介绍： Ajax是Asynchronous JavaScript and XML的缩写。Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用，它包括： ????????? 使用XHTML和CSS标准化呈现 ????????? 使用DOM实现动态显示和交互 ????????? 使用XML和XSLT进行数据交换与处理 ????????? 使用XMLHttpRequest进行异步数据读取; ????????? 使用JavaScript绑定和处理所有数据 Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。 ? ? 2?????? Ajax查询助手功能设计理念 查询助手功能设计的的Ajax的设计主要集中在从前台的jsp页面提出Ajax请求，所有的Ajax请求都提交给查询助手中间层，查询助手中间层自动创建查询助手具体实现类来实现查询助手的具体查询功能，查询助手具体实现类实现数据库查询并组织传回前台数据文本。传到前台后自动选择不同的JavaScript函数来解析数据，并显示到页面的Div或者直接显示到页面元素中。 2.1??? Ajax实现查询助手功能示意图如下： 3?????? Ajax实现详述 3.1??? Jsp前台 在Jsp中，点击查询助手图标，或者在输入框中打回车键，则显示如图3-1界面，Ajax从后台获取数据显示在前台页面上方，但此时页面并未刷新，并且缺省单选按钮选中第一行，第一行背景色为绿色。有两种操作可以选择： ? 1）? 选择是使用上下方向键来选择纪录，上下键移动时纪录背景色自动改变，单选按钮也自动选择。当决定选择某一行纪录时，点击回车键。 2）? 选择使用鼠标，当鼠标移动时，纪录的背景色发生改变。 3）? 当点击回车键，或者点击鼠标左键时则相关内容填充到具体的页面元素中，并把输入焦点自动下移到指定的输入框，并关闭选择界面。 4）? 如果你不想选择，也可以直接点击选择界面右上角的关闭图标 图3-1 如果查询结果为没有纪录，则： ? 图3-2 具体代码如下： 3.1.1?? 引入js，css文件 link rel=stylesheet href=%=request.getContextPath()%/tplife/css/maginfier.css type=text/css script type=text/javascript src=%=request.getContextPath()%/js/ajax/maginfier.js/script ? 组织机构查询助手：br/img src = %=request.getContextPath()%/images/magifiericon.gif onclick=orgMaginfier(%=request.getContextPath()%,selOrg,DivShim,orgId,orgCode,orgName,0,2,1,message,,); input type=text id = orgCode style=width:300px onkeydown=if(event.keyCode == 13){orgMaginfier(%=request.getContextPath()%,selOrg,DivShim,orgId,o