2024年6月21日发(作者：)

维普资讯

福建　电脑　２００７年第８期　

基于Ａｊａｘ和Ｓｅｒｖｌｅｔ实现无刷新动态Ｗｅｂ应用　

曹红　

（丽水学院计算机与信息工程学院浙江丽水３２３０００）　

【摘　要１：针对传统Ｗｅｂ应用中浏览器和服务器频繁交换数据刷新页面导致执行速度慢问题，简要分析了Ａｊａｘ－．框架　

下的ＷＥＢ应用模式和传统Ｗｅｂ应用模式的区别，并阐述了Ａｊａｘ技术的核心概念及实现机制，提出一种基于Ａｊａｘ和Ｓｅｒｖｌｅｔ　

实现无刷新、按需取数的完整Ｗｅｂ应用框架。　

～一一　

【关键字】：Ａｊａｘ　Ｓｅｒｖｌｅｔ　ＸＭＬ　ＤＯＭ无刷新　

０．前言　

随着Ｉｎｔｅｍｅｔ技术的发展．Ｗｅｂ应用技术也经历了不断的　

变化。其中Ｗｅｂ开发模型几经发展，Ａｉａｘ成了当前的主流技术。　

结合一定的服务器端技术．Ａｊａｘ可以在不刷新页面的情况下。实　

现与服务器动态交互．更新页面内容．改变了传统Ｗｅｂ应用不　

断等待的状况．突破了页面重载带来的Ｗｅｂ可用性障碍。　

１．Ａｉａｘ与传统Ｗｅｂ应用　

传统的Ｗｅｂ应用是由一系列连续切换的页面组成．其中大　

部分页面很小．但是用户绝大部分的交互都是通过ＨＴＭＬ表单　

的提交而将整个页面切换并刷新．而在这个过程中（下一个页面　

完全显示出来之前）。用户只能等待。　

Ａｊａｘ技术出现后．为运行于浏览器中的ＪａｖａＳｃｒｉｐｔ脚本提供　

了一种在页面之内与服务器通信的方式一一ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对　

象的运用。页面内的ＪａｖａＳｃｒｉｐｔ可以在不刷新页面的情况下直接　

从服务器获取数据．或者向服务器提交数据　

传统的Ｗｅｂ应用框架和基于Ａｉａｘ的Ｗｅｂ应用框架可以通　

过下面的模型图来描述：　

典型Ｗｅｂ／￣＇用模型　Ａｊａｘｗｅｂ应用模型　

图一传统Ｗｅｂ应用模型和基于Ａｉａｘ的Ｗｅｂ应用模型对比　

这里Ａｊａｘ应用与传统的Ｗｅｂ应用区别主要有三点：　

第一不刷新整个页面．在页面内直接与服务器通信　

第二使用异步方式与服务器通信．不需要打断用户的操　

作，具有更加迅速的的响应能力。　

第三应用仅由少量页面组成。大部分交互在页面之内完　

成，不需要切换整个页面。　

这些特性在不同的应用场合都能够得到体现。　

２．ＪＡＶＡ　Ｓｅｒｖｌｅｔ简介　

Ｓｅｒｖｌｅｔ是位于Ｗｅｂ服务器内部的服务器端的Ｊａｖａ应用程　

序，它的主要功能在于交互式地浏览和修改数据．动态生成Ｗｅｂ　

内容。　

使用Ｓｅｒｖｌｅｔ只需要Ｗｅｂ服务器包含支持Ｓｅｒｖｌｅｔ的Ｊａｖａ虚　

拟机即可，与操作系统平台和网络协议无关。故使用Ｊａｖａ　Ｓｅｒｖｌｅｔ　

投入少，可移植性较好，相比其他类似ＣＧＩ技术．具有更容易使　

用、功能更强大、更节省投资等特点　

３．基于Ａｊａｘ和Ｓｅｒｖｌｅｔ构建Ｗｅｂ应用　

这里我们以建立动态级联下拉列表为例来构建基于Ａｊａｘ　

和Ｓｅｒｖｌｅｔ的Ｗｅｂ应用模型。　

原理：基于Ａｉａｘ技术是在无刷新页面的情况下交换数据以　

及异步通信的特性．系统客户端在用户操作上级下拉列表选项　

时。会通过Ａｉａｘ引擎向服务器请求当前一级项目所属的二级下　

拉列表的所有选项。这样．需要什么就取什么数据。用多少就取　

多少，减少了数据下载总量，不会有数据的冗余和浪费。而且更　

新页面时不用重载页面全部内容．只更新部分页面元素即可。相　

对于传统后台处理并重载的方式．该模型缩短了用户等待时间．　

也把对资源的浪费降到最低。　

图二基于Ａｊａｘ和Ｊａｖａ　Ｓｅｒｖｌｅｔ的Ｗｅｂ应用实现过程时序图　

根据上述工作流程图具体实现方法如下：　

３．１　ＩＴＳ－－＋ＪＳｐ页面ｔｅｓｔ．ｊｓｐ，关键是包含如下两个下拉列　

表框，并为上级下拉列表指定ｏｎＣｈａｎｇｅ事件的处理函数ｇｅｔＮｅｘｔ　

０：　

＜ｆｏｒｍ　ｎａｎｌｅ＝”ｆｏｒｍｌ”ｉｄ＝”ｍｙｆｏｒｍ”＞　

＜ｓｅｌｅｃｔ　ｒＩａｎ　＝”ｓｔａｔｅ”ｉｄ＝”ｓｔｃｔｅｓｅｌｉｄ”ｏｎＣｈａｎｇｅ＝”ｇｅｔＮｅｘｔ０”，＞　

＜ｏｐｔｉｏｎ　ｖａｌｕｅ＝”ｎｕｌｌ”／＞ｐｌｅａｓｅ　ｓｅｌｅｃｔ　ｐｒｏｖｉｃｅ　

＜ｏｐｔｉｏｎ　ｖａｌｕｅ＝”１０”，＞北京　

，．ｏｐｔｉｏｎ　ｖａｌｕｅ＝”３３”，＞浙江　

……

（上级列表项也可由服务器动态取得）　

＜ｓｅｌｅｃｔ　ｎａｒｎｅ＝”ｃｉｔｙ”ｉｄ＝”ｃｉｔｙｓｅｌｌｄ”，＞　

＜／ｆｏｒｍ＞　

３．２在页面的ＪａｖａＳｃｒｉｐｔ脚本代码中创建Ａｊａｘ应用的核心　

组件ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象。为兼容客户端不同浏览器采用不同　

的创建方法。典型代码如下：　

＜ｓｃｒｉｐｔ　１ａｌ　ｇｌＩ且ｇｅ＝”ＪａｖａＳｃｒｉｐｔ”　

ｆｕｎｃｔｉｏｎ　ｃｒｅａｔｅＸＭＬＨｔｔｐＲｅｑｕｅｓｔ０　Ｉ　

Ｖａｒ　ｘｍｌＲｅｑ　ｆａｌｓｅ；　

ｉｆ（ｗｉｎｄｏｗ．ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ）ｆ　，，在非ＩＥ浏览器中创建ＸＭＬＨｔｔｐＲｃ—　

ｑｕｅｓｔ对象　

ｘｍｌＲｅｑ　ｎｅｗ　ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ０；　

ｌ　ｅｌｓｅ　ｉｆ（　ｎｄｏｗ．ＡｃｔｉｖｅＸＯｂｊｅｃｔ）ｌ　ＨＩＥ通过ＭＳ　ＡｃｄｖｅＸ刨建　

ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ　

仃ｙ　Ｉ　，，尝试按新版本ＩｎｔｅｍｅｔＥｘｐｌｏｒｅｒ方法创建　

ｘｍｌＲｅｑ＝ｎｅｗ　ＡｃｔｉｖｅＸＯｂｊｅｃｔ（”Ｍｓｘｍｌ２．ＸＭＬＩｆｌＴＰ”）：　

｝ｃａｔｃｈ（ｅ１）Ｉ　

仃ｙ　Ｉ　，，尝试按老版本ＩｎｔｅｍｅｔＥｘｐｌｏｒｅｒ方法创建　

ｘｍｌＲｅｑ＝ｎｅｗ　ＡｃｔｌｖｅＸＯｂｊｅｃｔ（”Ｍｉｃｒｏｓｏｆｔ．ＸＭＩＪＣｌＴＰ　）；　

维普资讯

２００７年第８期　

】ｃａｔｃｈ（ｅ２】Ｉ　】　

福建　电脑　

Ｓｔｒｉｎｇ　ｓｅａｒｃｈ：ｒｅｑｕｅｓｔ．ｇｅｔＰａｒａｎ￣ｔｅｒ（”ｓｔａｔｅ”）；　

８７　

获得请求中ｓｔａｔｅ　

】　

】　

ｅｔｒｕｒｎ　ｘｍｌＲｅｑ；　

参数的值　

Ｓｔｒｉｎｇ　ｓｑｌ：”ｓｅｌｅｃｔ　ｎａｍｅｃｉｔｙ．ｉｄｃｉｔｙ　ｆｒｏｍ　ｃｉｔｙ　ｗｈｅｒｅ　ｉｎｐｍｉｄ：　’　

ｓｅａｒｃｈ＋’…；　

】　

＜／ｓｃｒｉｐｔ＞　

……

３－３在上级下拉列表的ｏｎＣｈａｎｇｅ事件处理函数ｇｅｔＮｅｘｔ０＠　

利用创建的ｘｍｌＨｔｔｐＲｅｑｕｅｓｔ对象发送ＨＴＩ’Ｐ请求。设置好用来　

ｊａｖａ．ｉｏ．ＰｒｉｎｔＷｒｉｔｅｒ　ｏｕｔ　ｒｅｓｐｏｎｓｅ．ｇｅｔＷｒｉｔｅｒ０；　

（连接后台ｍｙＳＱＬ数据库，并执行ｓｑｌ语句得到结果集ｒｓ，代码略）　

调用ｒ　ｏＸＭＬＯ方法将关系数据库结果集转换成ＸＭＬ数据格式，并输｝竹　

至客户端　

从请求对象接收回调通知的回调函数句柄。　

ｆｕｎｃｔｉｏｎ　ｇｅｔＮｅｘｔ０｛　

ｖ８ｒ　ｆｌａｇ－－ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（”ｓｔａｔｅｓｅｌｉｄ”１．ｖａｌｕｅ；　

ｖＲｒ　ｕｒｌ＝”ｓｅｒｖｌｅｔ／ＳｙｎｃＳｅｌｅｃｔＳｅｒｖｌｅｔ？ｓｔａｔｅ＝”＋ｆｌａｇ；　

ＶＳｄｔ＂ｘｍｌＨｕｐＲｅｑ　ｃｒｅａｔｅＸＭＬＨｔｔｐＲｅｑｕｅｓｔ０；　

ｘｍｌＨｔｔｐＲｅｑ．ｏｐｅｎ（”ＧＥＴ”，ｕｒｌ，ｔｒｕｅ）；　

ｖ８ｒ　ｃａｌｌｂａｃｋＦｕｎｃｔｉｏｎ＝ｇｅｔＲｅａｄｙＳｔａｔｅＨａｎｄｌｅｒ（ｘｍｌＨｔｔｐＲｅｑ．ｕｐｄａｔｅＬｉｓｔ）；　

ｘｍ｜ＨｔｔｐＲｅｑ　ｏｎｒｅａｄｙｓｔａｔｅｃｈａｎｇｅ＝ｃａｌｌｂａｃｋＦｕｎｃｔｉｏｎ，　

ｘｍｌＨｔｔｐＲｅｑ．ｓｅｎｄ（ｎｕｌ１）；　

】　

在上述ｇｅｔＮｅｘｔ＿　０函数中实现了从创建ｘｍｌＨｔｔｐＲｅｑｕｅｓｔ对　

象、创建回调（ｃａＵｂａｃｋ）函数、注册回调（ｃａｌｌｂａｃｋ）函数、到分派并　

发送ＨｒｒＰ请求的一系列过程。应该注意到的是，ｘｒｕｌＨｔｔｐＲｅｑ．　

ｏｐｅｎ（”ＧＥＴ”，ｕｒ１．ｔｒｕｅ）语句指定了以”ＧＥＴ”的方法打开到目的ｕｒｌ　

（即为处理请求的Ｓｅｒｖｌｅｔ）的连接。并且通过ｔｒｕｅ参数指定了该　

连接为异步方式，即发出请求后不用等待服务器返回响应．当服　

务器在后台处理该请求的同时用户仍然可以使用表单ｆ甚至调　

用其他ｊａｖａＳｃｆｉｐｔ方法），这也正是Ａｊａｘ的由来。　

ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ的ｏｎｒｅａｄｙｓｔａｔｅｃｈａｎｇｅ属性告诉服务器在　

运行完成后做什么，而实际上ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象从”未初始　

化”到”完成”每一次”ｒｅａｄｖＳｔａｔｅ”的变化都会引发ｒｅａｄｙｓｔａｔｅ—　

ｃｈａｎｇｅ事件，通过ｏｎｒｅａｄｙｓｔａｔｅｃｈａｎｇｅ属性配置的回词处理函数　

将会被调用。在ｘｍｌＨｔｔｐＲｅｑ实例中，指定了由ｇｅｔＲｅａｄｙＳｔａｔｅ—　

Ｈａｎｄｌｅｒ（ｘｍｌＨｔｔｐＲｅｑ，ｕｐｄａｔｅＬｉｓｔ）函数返回的一个函数句柄ｃａＪ１．　

ｂａｃｋＦｕｎｃｆｉｏｎ为该实例的回调函数．ｇｅｔＲ．ｅａｄｙＳｔａｔｅＨａｎｄｌｅｒ（ｘｍｌ—　

ＨｔｔｐＲｅｑ，ｕｐｄａｔｅＬｉｓｔ）返回一个监听ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ实例的匿名　

函数，而真正影响用户界面的是作为该函数参数的ｕＤｄａｔｅＬｉｓｔ　

（ｘｍｌＤｏ￣）函数。实现代码如下：　

ｆｕｎｃｔｉｏｎ　ｇｅｔＲｅａｄｙＳｔａｔｅＨａｎｄｌｅｒ（ｒｅｑ，ｈａｎｄｌｅｒ）Ｉ　

ｒｅｔｕｒｎｆｕｎｃｔｉｏｎ　０Ｉ　

ｉｆ（ｒｅｑ．ｒｅａｄｙＳｔａｔｅ＝＝４）ｆ　如果请求的状态是”完成”　

ｉｆ（ｒｅｑ．ｓｔａｔｕｓ＝：２ｏｏ）ｆ　检查是否成功接收了服务器响应　

ｈａｎｄｌｅｒ（ｒｅｑ．ｒｅｓｐｏｎｓｅＸＭＬ１：，，将响应ＸＭＬ信息传递给ｈａｒｔ．　

ｄｅｒ函数处理　

］ｅｌｓｅ　Ｉ　ａｌｅｒｔ（”｝ｒｒｒＰ　ｅｒｒｏｒ：”＋ｒｅｑ．ｓｔａｔｕｓ）；】　

ｌ　

】　

｝　

３．４服务器端请求处理的Ｊａｖａ　Ｓｅｒｖｌｅｔ实现。在本例应用中．　

服务器端基于ＴｏｍＣａｔ５提供对ＪＳＰ的支持和作为Ｓｅｒｖｌｅｔ的容　

器，后台使用ｍｙＳＱＬ数据库服务，其中表ｃｉｔｙ结构如下图三所　

不　

图三ｃｉｔｙ表结构　

响应ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ请求的Ｓｅｒｖｌｅｔ与处理一个来自浏览　

器的普通的ＨＴｒＰ请求基本上相似，关键是实现ｄｏＧｅｔＯ方法或　

者ｄｏＰｏｓｔ０方法。程序片断：　

ｉｍｐｏｒｔ　ｊａＶａ．ｉｏ．ＩＯＥｘｃｅｐｔｌｏｎ；　

ｐｕｂｌｉｃ　ｃｌａｓｓ　ＳｙｎｃＳｅｌｅｃｔＳｅｒｖｌｅｔ　ｅｘｔｅｎｄｓ　ＨｔｔｐＳｅｒｖｌｅｔ　Ｉ　

ｐｕｂｌｉｃ　ｖｏｉｄ　ｄｏＧｅｔ（ＨｔｔｐＳｅｒｖｌｅｔＲｅｑｕｅｓｔ　ｒｅｑｕｅｓｔ，ＨｔｔｐＳｅｒｖｌｅｔＲｅｓｐｏｎｓｅ　ｒｅｓｐｏｎｓｅ）　

ｒａｗＢ　ＳｅｒｖｌｅｔＥｘｅｅｐｔｉｏｎ，ｊａｖ丑．ｉｏ．ＩＯＥｘｃｅｐｄｏｎ　Ｉ　

ｒｅｓｐｏｎｓｅ．ｅｓｔＨｅａｄｅｒ（”Ｃａｃｈｅ－Ｃｏｎｔｒｏｌ＂，＂ｎｏ－ｃａｃｈｅ”）；　

ｏｕｔ．ｐｒｉｎｔ（ｒｓＴｏＸＭＬ（　）；　

ｏｕｔ．ｃｌｏｓｅ０；　

】　

……

】　

Ｓｅｒｖｌｅｔ响应返回ＸＭＬ数据．需要ｓｅｔＣｏｎｔｅｎｔＴｙｐｅ（”ａｐｐｌｉｃａ—　

ｔｉｏｎ／ｘｍｌ；ｃｈａｒｓｅｔ＝ｕｔｆ－８”）方法将响应内容的类型设置为”ａｐｐｌｉｃａ—　

ｔｉｏｎ／ｘｍｌ“，客户端脚本可以利用ＤＯＭ（文档对象模型）丰富的　

ＡＰＩ处理响应信息。本例应用中使用ｒｓＴｏＸＭＬ（ｒｓ）方法将查询关　

系数据库的结果集转换成一定格式的ＸＭＬ数据。响应的ＸＭＬ　

内容格式如下：　

＜？ｘｍｌ　ｖｅｒｓｉｏｎ＝＇，”ｌ，０、”ｅｎｃｏｄｉｎｇ＝＼”ＵＴＦ一８、＿＿？＞　

＜ｓｔａｔｅ＞　

＜ｃｉｔｙ＞　

＜ｎａｍｅｃｉｔｙ＞杭州＜／ｎａｍｅｃｉｔｙ＞　

＜ｉｄｃｉｔｙ＞３３０１／＜ｉｄｃｉｔｙ＞　

／＜ｃｉｔｙ＞　

＜ｃｉｔｙ＞　

＜ｎａｍｅｃｉｔｙ＞￣水＜／ｎａｍｅｃｉｔｙ＞　

＜ｉｄｃｉｔｙ＞３３　１　ｌ／＜ｉｄｃｉｔｙ＞　

／＜ｃｉｔｙ＞　

／＜ｓｔａｔｅ＞　

３．５页面处理服务器响应．回凋函数更新用户界面的实现　

前文已经指出，本例应用中ＸＭＬＨｔｔｐＲｅｑｕｃｓｔ对象的回调函数是　

ｇｅｔＲｅａｄｙＳｔａｔｅＨａｎｄｌｅｒ（ｘｍｌＨｔｔｐＲｅｑ，ｕｐｄａｔｅＬｉｓｔ）函数返回的函数，　

而作为参数的ｕｐｄａｔｅＬｉｓｔ（ｘｍｌＤｏｃ）ｉ￣ｉ数才是ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对　

象请求完成并成功接收服务器响应后实现页面内容更新的直接　

操作者。　

ｆｕｎｃｔｉｏｎ　ｕｐｄａｔｅＬｉｓｔ（ｘｍｌＤｏｃ）｛　

ｖａｔ　ｓｈｏｗＥｌｅｍｅｎｔｓ＝ｘｍｌＤｏｃ．ｇｅｔＥｌｅｍｅｎｔｓＢｙＴａｇＮａｍｅ（”ｃｉｔｙ”）；　

ｒａｇ　ｃｉｔｙｓｅｌ＝ｄｏｅｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙｌｄ（”ｃｉｔｙｓｅｌｉｄ”）；　

ｃｉｔｙｓｅ１．ｏｐｔｉｏｎｓ．１ｅｎｇｔｈ＝Ｏ；　，　先将原有下级下拉列表清空　

ｆｏ　８ｒ　ｉ＝ｏ；ｉ＜ｓｈｏｗＥｌｅｍｅｎｔｓ．１ｅｒＩｇｔｈ；ｉ＋＋）Ｉ　

ｖ８ｒ　ｘＴｅｘｔ－－ｓｈｏｗＥｌｅｍｅｎｔｓ［ｉ］．ｃｈｉｌｄＮｏｄｅｓ［０］．ｉｆｒｓｔＣｈｉｌｄ．ｎｏｄｅＶａｌｕｅ；　

ｖ丑ｒ　ｘＶａｌｕｅ＝ｓｈｏｗＥｌｅｍｅｎｔｓ［ｉ］．ｃｈｉｌｄＮｏｄｅｓ［１１．ｉｆｒｓｔＣｈｉｌｄ．ｎｏｄｅＶａｌｕｅ；　

ｃｉｔｙｓｅ１．ｏｐｔｉｏｎｓ［ｉｌ＝ｎｅｗ　Ｏｐｔｉｏｎ（ｘＴｅｘｔ，ｘＶａｌｕｅ）；　

】　

】　

运用ＤＯＭ的标准ＡＰＩ对ＸＭＬ数据进行解析。实现起来非　

常方便，并且运用ＤＯＭ操作ＨＴＭＬ文档仅仅刷新了页面的一　

部分，页面的其他部分在内存的ＤＯＭ树中完全没有受影响

．

因　

此最终实现了无刷新动态更新Ｗｅｂ页面，这也正是ＡｉａＬｘ技术展　

现给用户的巧妙之处　

４．结论　

ＡｊａＬｘ中的所有核心技术几乎都是已经成熟而稳定的

．

而ａ．　

ｊａＬｘ的出现则把这些技术天衣无缝的结合了起来，并展现出了无　

与伦比的魅力和强大。再加之与服务器端强大的Ｊａｖａ　Ｓｅｒｖｌｅｔ技　

术的结合，更加如虎添翼。减少等待，使用户能够在Ｂ／Ｓ架构的　

浏览器中体会到本地桌面应用般的良好体验

．

这种Ｗｅｂ模式将　

得到更广泛的应用　

参考文献：　

１．Ｄａｖｉｄ　Ｆｌａｎａｇａｎ，￣ｄａｖａＳｃ唧ｔ权威指南》【ＭＪ．张铭泽译．，北京：机械工业出　

版社．２００３．　

２．柯自聪，《ＡＪＡｘ开发精要）【Ｍ】．：ＩＬ￣：，Ｅｆｆ－工业出版社，２００６

．　

３．Ｊａｓｏｎ　Ｈｕｎｔｅｒ，ｗｉｌｌｉａｍ　Ｃｒａｗｆｏｒｄ，ｌａｖａ　Ｓｅｒｖｌｅｔ编程（第二版）＞孙鑫，谢茂　

强译，中国电力出版社．２００２．　

４．作者：ＭｏｚｔｗＷｉｋｉ标题：（ＡＪＡＸ上手篇＞．　

５．作者：Ｐｈｉｌｉｐ　ＭｃＣａｒｔｈｙ标题：面向Ｊａｖａ开发人员的Ａｉ　：构建动态的　

Ｊａｖａ应用程序．