Ajax实现放大镜功能说明书

来源：Linux-cn.com 作者：Webmaster 时间：2007-04-24 点击： [收藏] [投稿]

1 概述

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标准化呈现

Ø 使用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。

图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");