1.1 放大镜功能介绍
在软通的软件项目中，放大镜功能使用频率非常高，由于其友好的界面设计和操作性能，对用户和设计开发人员都有很大的吸引力，但存在开发效率低，复用性差，复杂度较高等问题。所谓放大镜功能，就是页面上的放大镜图标，点击图标，根据页面上元素的值为条件，到后台查询结果，然后把查询结果显示到弹出的窗口，选择后自动关闭弹出的窗口，并把你选择的有关内容显示到父页面中指定的元素中。
1.2 Ajax现状和项目实践
随着Ajax的风靡全球，Google的推波助澜，优秀的界面风格，局部刷新的全新感受，给人耳目一新的印象。但由于Ajax诸多javascript脚本和后台应用的复杂性，使ajax的推广困难重重，国内的应用大多都是玩具级，距项目实用还有不小的差距，包括Microsoft，IBM，SUN都在积极攻关研发，以提高项目开发的实用性，降低开发难度。为了使用ajax在项目的实用性，针对放大镜功能的Ajax做了一些有益的尝试，特别愿意和大家分享。
1.3 Ajax简介
Ajax是Asynchronous JavaScript and XML的缩写。Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用，它包括：
Ø 使用XHTML和CSS标准化呈现 字串9
Ø 使用DOM实现动态显示和交互
Ø 使用XML和XSLT进行数据交换与处理
Ø 使用XMLHttpRequest进行异步数据读取;
Ø 使用JavaScript绑定和处理所有数据
Ajax的工作原理相当于在用户和服务器之间加了?个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像?些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
2 Ajax放大镜功能设计理念
放大镜功能设计的的Ajax的设计主要集中在从前台的jsp页面提出Ajax请求，所有的Ajax请求都提交给放大镜中间层，放大镜中间层自动创建放大镜具体实现类来实现放大镜的具体查询功能，放大镜具体实现类实现数据库查询并组织传回前台数据文本。传到前台后自动选择不同的JavaScript函数来解析数据，并显示到页面的Div或者直接显示到页面元素中。
3 Ajax实现详述
3.1 Jsp前台
在Jsp中，点击放大镜图标，则显示如图3-1界面，Ajax从后台获取数据显示在前台页面上方，但此时页面并未刷新。当点击所要选择的项目后，则相关内容填充到具体的页面元素中，如图3-2。
字串4
图3-1
图3-2
具体代码如下：
3.1.1 引入js，css文件
3.1.1.1 Js文件内容：
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function operationRequest(queryString) {
//设置url，统一由放大镜Servlet接收
var url = "/myapp/AjaxMaginfier?" queryString;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
// 获得界面元素
function getElement(idString)
{
return(document.all?document.all[idString]:document.getElementById(idString));
}
// 鼠标移动
function rollover(tdObject)
{
tdObject.bgColor=’#CCFF99’;
}
function rollout(tdObject)
字串4
{
tdObject.bgColor=’’;
}
3.1.1.2 Css文件内容：
/* 界面样式 */
*{
}
form{
margin:0;
}
#termFrame{
width:298px !important;
width:300px;
margin-top:1px !important;
margin-top:0;
border:1px solid #999999;
background-color:#FFFFCC;
position:absolute;
}
#termFrame td{
font-size:70%;
padding:2px;
cursor:hand;
}
#termFrame .rs{
color:#339900;
float:right;
}
#termFrame a{
text-decoration:none;
display:block;
color:#000000;
}
#q{
font-size:75%;
padding:2px;
width:300px;
border:1px solid #666666;
}
#go{
font-weight:bold;
字串4
font-size:75%;
border:1px outset;
background-color:#CCFF99;
}
.notice{
background-color:#FFFFCC;
padding:10px;
font-size:90%;
}
.copyleft{
font-size:65%;
}
3.1.2 当点击放大镜图标时：
var operateType;
function ajaxRequest()
{
//写入具体放大镜实现类名称，和操作类型。
queryString = "maginfierClassName=MaginfierExample&operation=select1";
//设置Javascript的操作类型，为传回数据后由哪个具体Javascript函数处理
operateType = "select1";
operationRequest(queryString);
}
3.1.3 Js中的处理请求的函数
function operationRequest(queryString) {
var url = "/myapp/AjaxMaginfier?" queryString;
createXMLHttpRequest();
//指定传回数据后由handleStateChange函数处理。
xmlHttp.onreadystatechange = handleStateChange;