对于Ajax需要注意执行 的 顺序

对于input 类型为text的 动作有 onChange() onPropertyChange() 后者比前者的反应 更加的敏感，有可能onChange()不会随着里面的改变而改变，但是onPropertyChange()肯定会随着value的值 改变而改变。

对于返回的值，要把结果写在最后的条件都符合的情况下，就是注意函数的位置。

操作xml的时候 用到的方法 和以前操作xml的是一样的，如getElementsByTagName(),还有.firstChild.data,nodeValue.

Ajax执行的顺序是open,onreadystatechange,send 都是基于流的形式传输。

对于servlet里面 注意 都是 用流的形式进行 传输和取值。resp.setContentType()，里面得相应的设置方式。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zuowangxi/archive/2009/12/30/5104036.aspx

Comet：基于 HTTP 长连接的“服务器推”技术

文档选项 打印本页 将此页作为电子邮件发送 级别： 中级 周 婷 (zhouting@cn.ibm.com), 软件工程师, IBM 中国软件开发技术实验室 2007 年 8 月 31 日 很多应用譬如监控、即时通信、即时报价系统都需要将后台发生的变化实时传送到客户端而无须客户端不停地刷新、发送请求。本文首先介绍、比较了常用的“服务器推”方案，着重介绍了 Comet － 使用 HTTP 长连接、无须浏览器安装插件的两种“服务器推”方案：基于 AJAX 的长轮询方式；基于 iframe 及 htmlfile 的流方式。最后分析了开发 Comet 应用需要注意的一些问题，以及如何借助开源的 Comet 框架－pushlet 构建自己的“服务器推”应用。 “服务器推”技术的应用 请访问 Ajax 技术资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。 订阅 Ajax 相关文章和教程的 RSS 提要 传统模式的 Web 系统以客户端发出请求、服务器端响应的方式工作。这种方式并不能满足很多现实应用的需求，譬如： 监控系统：后台硬件热插拔、LED、温度、电压发生变化； 即时通信系统：其它用户登录、发送信息； 即时报价系统：后台数据库内容发生变化； 这些应用都需要服务器能实时地将更新的信息传送到客户端，而无须客户端发出请求。“服务器推”技术在现实应用中有一些解决方案，本文将这些解决方案分为两类：一类需要在浏览器端安装插件，基于套接口传送信息，或是使用 RMI、CORBA 进行远程调用；而另一类则无须浏览器安装任何插件、基于 HTTP 长连接。 将“服务器推”应用在 Web 程序中，首先考虑的是如何在功能有限的浏览器端接收、处理信息： 客户端如何接收、处理信息，是否需要使用套接口或是使用远程调用。客户端呈现给用户的是 HTML 页面还是 Java applet 或 Flash 窗口。如果使用套接口和远程调用，怎么和 JavaScript 结合修改 HTML 的显示。 客户与服务器端通信的信息格式，采取怎样的出错处理机制。 客户端是否需要支持不同类型的浏览器如 IE、Firefox，是否需要同时支持 Windows 和 Linux 平台。 回页首 基于客户端套接口的“服务器推”技术 Flash XMLSocket 如果 Web 应用的用户接受应用只有在安装了 Flash 播放器才能正常运行， 那么使用 Flash 的 XMLSocket 也是一个可行的方案。 这种方案实现的基础是： Flash 提供了 XMLSocket 类。 JavaScript 和 Flash 的紧密结合：在 JavaScript 可以直接调用 Flash 程序提供的接口。 具体实现方法：在 HTML 页面中内嵌入一个使用了 XMLSocket 类的 Flash 程序。JavaScript 通过调用此 Flash 程序提供的套接口接口与服务器端的套接口进行通信。JavaScript 在收到服务器端以 XML 格式传送的信息后可以很容易地控制 HTML 页面的内容显示。 关于如何去构建充当了 JavaScript 与 Flash XMLSocket 桥梁的 Flash 程序，以及如何在 JavaScript 里调用 Flash 提供的接口，我们可以参考 AFLAX（Asynchronous Flash and XML）项目提供的 Socket Demo 以及 SocketJS（请参见 参考资源）。 Javascript 与 Flash 的紧密结合，极大增强了客户端的处理能力。从 Flash 播放器 V7.0.19 开始，已经取消了 XMLSocket 的端口必须大于 1023 的限制。Linux 平台也支持 Flash XMLSocket 方案。但此方案的缺点在于： 客户端必须安装 Flash 播放器； 因为 XMLSocket 没有 HTTP 隧道功能，XMLSocket 类不能自动穿过防火墙； 因为是使用套接口，需要设置一个通信端口，防火墙、代理服务器也可能对非 HTTP 通道端口进行限制； 不过这种方案在一些网络聊天室，网络互动游戏中已得到广泛使用。 Java Applet 套接口 在客户端使用 Java Applet，通过 java.net.Socket 或 java.net.DatagramSocket 或 java.net.MulticastSocket 建立与服务器端的套接口连接，从而实现“服务器推”。 这种方案最大的不足在于 Java applet 在收到服务器端返回的信息后，无法通过 JavaScript 去更新 HTML 页面的内容。 回页首 基于 HTTP 长连接的“服务器推”技术 Comet 简介 浏览器作为 Web 应用的前台，自身的处理功能比较有限。浏览器的发展需要客户端升级软件，同时由于客户端浏览器软件的多样性，在某种意义上，也影响了浏览器新技术的推广。在 Web 应用中，浏览器的主要工作是发送请求、解析服务器返回的信息以不同的风格显示。AJAX 是浏览器技术发展的成果，通过在浏览器端发送异步请求，提高了单用户操作的响应性。但 Web 本质上是一个多用户的系统，对任何用户来说，可以认为服务器是另外一个用户。现有 AJAX 技术的发展并不能解决在一个多用户的 Web 应用中，将更新的信息实时传送给客户端，从而用户可能在“过时”的信息下进行操作。而 AJAX 的应用又使后台数据更新更加频繁成为可能。 图 1. 传统的 Web 应用模型与基于 AJAX 的模型之比较 “服务器推”是一种很早就存在的技术，以前在实现上主要是通过客户端的套接口，或是服务器端的远程调用。因为浏览器技术的发展比较缓慢，没有为“服务器推”的实现提供很好的支持，在纯浏览器的应用中很难有一个完善的方案去实现“服务器推”并用于商业程序。最近几年，因为 AJAX 技术的普及，以及把 IFrame 嵌在“htmlfile“的 ActiveX 组件中可以解决 IE 的加载显示问题，一些受欢迎的应用如 meebo，gmail+gtalk 在实现中使用了这些新技术；同时“服务器推”在现实应用中确实存在很多需求。因为这些原因，基于纯浏览器的“服务器推”技术开始受到较多关注，Alex Russell（Dojo Toolkit 的项目 Lead）称这种基于 HTTP 长连接、无须在浏览器端安装插件的“服务器推”技术为“Comet”。目前已经出现了一些成熟的 Comet 应用以及各种开源框架；一些 Web 服务器如 Jetty 也在为支持大量并发的长连接进行了很多改进。关于 Comet 技术最新的发展状况请参考关于 Comet 的 wiki。 下面将介绍两种 Comet 应用的实现模型。 基于 AJAX 的长轮询（long-polling）方式 如 图 1 所示，AJAX 的出现使得 JavaScript 可以调用 XMLHttpRequest 对象发出 HTTP 请求，JavaScript 响应处理函数根据服务器返回的信息对 HTML 页面的显示进行更新。使用 AJAX 实现“服务器推”与传统的 AJAX 应用不同之处在于： 服务器端会阻塞请求直到有数据传递或超时才返回。 客户端 JavaScript 响应处理函数会在处理完服务器返回的信息后，再次发出请求，重新建立连接。 当客户端处理接收的数据、重新建立连接时，服务器端可能有新的数据到达；这些信息会被服务器端保存直到客户端重新建立连接，客户端会一次把当前服务器端所有的信息取回。 图 2. 基于长轮询的服务器推模型 一些应用及示例如 “Meebo”, “Pushlet Chat” 都采用了这种长轮询的方式。相对于“轮询”（poll），这种长轮询方式也可以称为“拉”（pull）。因为这种方案基于 AJAX，具有以下一些优点：请求异步发出；无须安装插件；IE、Mozilla FireFox 都支持 AJAX。 在这种长轮询方式下，客户端是在 XMLHttpRequest 的 readystate 为 4（即数据传输结束）时调用回调函数，进行信息处理。当 readystate 为 4 时，数据传输结束，连接已经关闭。Mozilla Firefox 提供了对 Streaming AJAX 的支持， 即 readystate 为 3 时（数据仍在传输中），客户端可以读取数据，从而无须关闭连接，就能读取处理服务器端返回的信息。IE 在 readystate 为 3 时，不能读取服务器返回的数据，目前 IE 不支持基于 Streaming AJAX。 基于 Iframe 及 htmlfile 的流（streaming）方式 iframe 是很早就存在的一种 HTML 标记， 通过在 HTML 页面里嵌入一个隐蔵帧，然后将这个隐蔵帧的 SRC 属性设为对一个长连接的请求，服务器端就能源源不断地往客户端输入数据。 图 3. 基于流方式的服务器推模型 上节提到的 AJAX 方案是在 JavaScript 里处理 XMLHttpRequest 从服务器取回的数据，然后 Javascript 可以很方便的去控制 HTML 页面的显示。同样的思路用在 iframe 方案的客户端，iframe 服务器端并不返回直接显示在页面的数据，而是返回对客户端 Javascript 函数的调用，如“<script type="text/javascript">js_func(“data from server ”)</script>”。服务器端将返回的数据作为客户端 JavaScript 函数的参数传递；客户端浏览器的 Javascript 引擎在收到服务器返回的 JavaScript 调用时就会去执行代码。 从 图 3 可以看到，每次数据传送不会关闭连接，连接只会在通信出现错误时，或是连接重建时关闭（一些防火墙常被设置为丢弃过长的连接， 服务器端可以设置一个超时时间， 超时后通知客户端重新建立连接，并关闭原来的连接）。 使用 iframe 请求一个长连接有一个很明显的不足之处：IE、Morzilla Firefox 下端的进度栏都会显示加载没有完成，而且 IE 上方的图标会不停的转动，表示加载正在进行。Google 的天才们使用一个称为“htmlfile”的 ActiveX 解决了在 IE 中的加载显示问题，并将这种方法用到了 gmail+gtalk 产品中。Alex Russell 在 “What else is burried down in the depth's of Google's amazing JavaScript?”文章中介绍了这种方法。Zeitoun 网站提供的 comet-iframe.tar.gz，封装了一个基于 iframe 和 htmlfile 的 JavaScript comet 对象，支持 IE、Mozilla Firefox 浏览器，可以作为参考。（请参见 参考资源） 回页首 使用 Comet 模型开发自己的应用 上面介绍了两种基于 HTTP 长连接的“服务器推”架构，更多描述了客户端处理长连接的技术。对于一个实际的应用而言，系统的稳定性和性能是非常重要的。将 HTTP 长连接用于实际应用，很多细节需要考虑。 不要在同一客户端同时使用超过两个的 HTTP 长连接 我们使用 IE 下载文件时会有这样的体验，从同一个 Web 服务器下载文件，最多只能有两个文件同时被下载。第三个文件的下载会被阻塞，直到前面下载的文件下载完毕。这是因为 HTTP 1.1 规范中规定，客户端不应该与服务器端建立超过两个的 HTTP 连接， 新的连接会被阻塞。而 IE 在实现中严格遵守了这种规定。 HTTP 1.1 对两个长连接的限制，会对使用了长连接的 Web 应用带来如下现象：在客户端如果打开超过两个的 IE 窗口去访问同一个使用了长连接的 Web 服务器，第三个 IE 窗口的 HTTP 请求被前两个窗口的长连接阻塞。 所以在开发长连接的应用时， 必须注意在使用了多个 frame 的页面中，不要为每个 frame 的页面都建立一个 HTTP 长连接，这样会阻塞其它的 HTTP 请求，在设计上考虑让多个 frame 的更新共用一个长连接。 服务器端的性能和可扩展性 一般 Web 服务器会为每个连接创建一个线程，如果在大型的商业应用中使用 Comet，服务器端需要维护大量并发的长连接。在这种应用背景下，服务器端需要考虑负载均衡和集群技术；或是在服务器端为长连接作一些改进。 应用和技术的发展总是带来新的需求，从而推动新技术的发展。HTTP 1.1 与 1.0 规范有一个很大的不同：1.0 规范下服务器在处理完每个 Get/Post 请求后会关闭套接口连接； 而 1.1 规范下服务器会保持这个连接，在处理两个请求的间隔时间里，这个连接处于空闲状态。 Java 1.4 引入了支持异步 IO 的 java.nio 包。当连接处于空闲时，为这个连接分配的线程资源会返还到线程池，可以供新的连接使用；当原来处于空闲的连接的客户发出新的请求，会从线程池里分配一个线程资源处理这个请求。 这种技术在连接处于空闲的机率较高、并发连接数目很多的场景下对于降低服务器的资源负载非常有效。 但是 AJAX 的应用使请求的出现变得频繁，而 Comet 则会长时间占用一个连接，上述的服务器模型在新的应用背景下会变得非常低效，线程池里有限的线程数甚至可能会阻塞新的连接。Jetty 6 Web 服务器针对 AJAX、Comet 应用的特点进行了很多创新的改进，请参考文章“AJAX，Comet and Jetty”（请参见 参考资源）。 控制信息与数据信息使用不同的 HTTP 连接 使用长连接时，存在一个很常见的场景：客户端网页需要关闭，而服务器端还处在读取数据的堵塞状态，客户端需要及时通知服务器端关闭数据连接。服务器在收到关闭请求后首先要从读取数据的阻塞状态唤醒，然后释放为这个客户端分配的资源，再关闭连接。 所以在设计上，我们需要使客户端的控制请求和数据请求使用不同的 HTTP 连接，才能使控制请求不会被阻塞。 在实现上，如果是基于 iframe 流方式的长连接，客户端页面需要使用两个 iframe，一个是控制帧，用于往服务器端发送控制请求，控制请求能很快收到响应，不会被堵塞；一个是显示帧，用于往服务器端发送长连接请求。如果是基于 AJAX 的长轮询方式，客户端可以异步地发出一个 XMLHttpRequest 请求，通知服务器端关闭数据连接。 在客户和服务器之间保持“心跳”信息 在浏览器与服务器之间维持一个长连接会为通信带来一些不确定性：因为数据传输是随机的，客户端不知道何时服务器才有数据传送。服务器端需要确保当客户端不再工作时，释放为这个客户端分配的资源，防止内存泄漏。因此需要一种机制使双方知道大家都在正常运行。在实现上： 服务器端在阻塞读时会设置一个时限，超时后阻塞读调用会返回，同时发给客户端没有新数据到达的心跳信息。此时如果客户端已经关闭，服务器往通道写数据会出现异常，服务器端就会及时释放为这个客户端分配的资源。 如果客户端使用的是基于 AJAX 的长轮询方式；服务器端返回数据、关闭连接后，经过某个时限没有收到客户端的再次请求，会认为客户端不能正常工作，会释放为这个客户端分配、维护的资源。 当服务器处理信息出现异常情况，需要发送错误信息通知客户端，同时释放资源、关闭连接。 Pushlet - 开源 Comet 框架 Pushlet 是一个开源的 Comet 框架，在设计上有很多值得借鉴的地方，对于开发轻量级的 Comet 应用很有参考价值。 观察者模型 Pushlet 使用了观察者模型：客户端发送请求，订阅感兴趣的事件；服务器端为每个客户端分配一个会话 ID 作为标记，事件源会把新产生的事件以多播的方式发送到订阅者的事件队列里。 客户端 JavaScript 库 pushlet 提供了基于 AJAX 的 JavaScript 库文件用于实现长轮询方式的“服务器推”；还提供了基于 iframe 的 JavaScript 库文件用于实现流方式的“服务器推”。 JavaScript 库做了很多封装工作： 定义客户端的通信状态：STATE_ERROR、STATE_ABORT、STATE_NULL、STATE_READY、STATE_JOINED、STATE_LISTENING； 保存服务器分配的会话 ID，在建立连接之后的每次请求中会附上会话 ID 表明身份； 提供了 join()、leave()、subscribe()、 unsubsribe()、listen() 等 API 供页面调用； 提供了处理响应的 JavaScript 函数接口 onData()、onEvent()… 网页可以很方便地使用这两个 JavaScript 库文件封装的 API 与服务器进行通信。 客户端与服务器端通信信息格式 pushlet 定义了一套客户与服务器通信的信息格式，使用 XML 格式。定义了客户端发送请求的类型：join、leave、subscribe、unsubscribe、listen、refresh；以及响应的事件类型：data、join_ack、listen_ack、refresh、heartbeat、error、abort、subscribe_ack、unsubscribe_ack。 服务器端事件队列管理 pushlet 在服务器端使用 Java Servlet 实现，其数据结构的设计框架仍可适用于 PHP、C 编写的后台客户端。 Pushlet 支持客户端自己选择使用流、拉（长轮询）、轮询方式。服务器端根据客户选择的方式在读取事件队列（fetchEvents）时进行不同的处理。“轮询”模式下 fetchEvents() 会马上返回。”流“和”拉“模式使用阻塞的方式读事件，如果超时，会发给客户端发送一个没有新信息收到的“heartbeat“事件，如果是“拉”模式，会把“heartbeat”与“refresh”事件一起传给客户端，通知客户端重新发出请求、建立连接。 客户服务器之间的会话管理 服务端在客户端发送 join 请求时，会为客户端分配一个会话 ID， 并传给客户端，然后客户端就通过此会话 ID 标明身份发出 subscribe 和 listen 请求。服务器端会为每个会话维护一个订阅的主题集合、事件队列。 服务器端的事件源会把新产生的事件以多播的方式发送到每个会话（即订阅者）的事件队列里。 回页首 小结 本文介绍了如何在现有的技术基础上选择合适的方案开发一个“服务器推”的应用，最优的方案还是取决于应用需求的本身。相对于传统的 Web 应用， 目前开发 Comet 应用还是具有一定的挑战性。 “服务器推”存在广泛的应用需求，为了使 Comet 模型适用于大规模的商业应用，以及方便用户构建 Comet 应用，最近几年，无论是服务器还是浏览器都出现了很多新技术，同时也出现了很多开源的 Comet 框架、协议。需求推动技术的发展，相信 Comet 的应用会变得和 AJAX 一样普及。 参考资料 学习 developerWorks 文章“ 面向 Java 开发人员的 Ajax: 使用 Jetty 和 Direct Web Remoting 编写可扩展的 Comet 应用程序”：受异步服务器端事件驱动的 Ajax 应用程序实现较为困难，本文介绍了一种结合使用 Comet 模式和 Jetty 6 Continuations API 的解决方法。 “Comet: Low Latency Data for the Browser”：Alex Russell 是 Dojo Toolkit 的项目主管和 Dojo Foundation 的主席，他在这篇博客文章中提出了 Comet 这个术语。 “What else is burried down in the depth’s of Google’s amazing JavaScript?”（Alex Russel，2006 年 2 月）：Alex 在这篇文章里介绍了如何使用“htmlfile”ActiveX 控件解决 iframe 请求长连接时 IE 的加载显示问题。 Comet wiki：提供了很多开源 Comet 框架的链接。 Jetty：Jetty 是一种开源的基于标准的 Web 服务器，完全使用 Java 语言实现。 “Ajax, Comet and Jetty”（Greg Wilkins，Webtide，2006 年 1 月）：Wilkins 的这份白皮书讨论了扩展 Ajax 连接的 Jetty 架构方法。 Continuations：了解更多关于 Jetty 的 Continuations 特性的信息。 “pushlet”：开源 comet 框架，使用了观察者模型。浏览器端提供了基于 AJAX 和 iframe 的 JavaScript 库，服务器端使用 Java Servlet。 “How to implement COMET with PHP”：提供的 comet-iframe.tar.gz 使用 iframe/htmlfile 封装了一个 JavaScript comet 对象，支持 IE、Mozilla Firefox 浏览器。 “AFLAX”：Asynchronous Flash and XML，提供了强大的 Flash、Javascript 库和很多范例。 developerWorks Ajax 技术资源中心：能找到更多关于 Ajax 技术的文章和教程。 developerWorks Web 开发技术专区：提供了关于 Web 开发和架构方面的大量文章。 developerWorks Java 技术专区：提供了关于 Java 编程各个方面的数百篇文章。 浏览 技术书店，查阅有关本文所述主题以及其他技术主题的书籍。 Pushlet - 开源 Comet 框架 Pushlet 是一个开源的 Comet 框架，在设计上有很多值得借鉴的地方，对于开发轻量级的 Comet 应用很有参考价值。 观察者模型 Pushlet 使用了观察者模型：客户端发送请求，订阅感兴趣的事件；服务器端为每个客户端分配一个会话 ID 作为标记，事件源会把新产生的事件以多播的方式发送到订阅者的事件队列里。 客户端 JavaScript 库 pushlet 提供了基于 AJAX 的 JavaScript 库文件用于实现长轮询方式的“服务器推”；还提供了基于 iframe 的 JavaScript 库文件用于实现流方式的“服务器推”。

<title><fmt:message key="menu.admin" />-><fmt:message key="menu.admin.departmentsManager" /></title>

<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/default.css'/>" />
<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/helptip.css'/>" />
<link rel="stylesheet" type="text/css" media="print" href="<c:url value='/styles/print.css'/>" />

<c:if test="${not empty errorReason}">
   <div align="center" style="color: red">
       <c:if test="${errorReason=='updateConstraint'}">
         <fmt:message key="tcsBox.updateConstraint"/>
       </c:if>
       <c:if test="${errorReason=='addConstraint'}">
         <fmt:message key="tcsBox.addConstraint"/>
       </c:if>
   </div>
</c:if>
<html:form action="editBoxes.html?method=finishEdit" styleId="TcsboxForm" >

<table class="detail" valign="top"> 
<c:if test="${from == 'update' or param.handle =='update'}">
  <input type="hidden" value="update"  name="handle"/>
</c:if >
<c:if test="${from == 'add'}">
  <input type="hidden" value="add"  name="handle"/>
</c:if >  
<!-- <c:set var="pageButtons">
    <tr>
        <td height="50"></td>
        <td class="buttonBar">
         <c:if test="${from == 'update'}">
           <input type="submit" value='<fmt:message key="button.submit"/>' class="button" />
           <input type="hidden" value="update"  name="handle"/>
         </c:if >
         <c:if test="${from == 'add'}">
          <input type="submit" value='<fmt:message key="button.submit"/>' class="button" />
          <input type="hidden" value="add"  name="handle"/>
            </c:if >  
             <input type="reset" value='<fmt:message key="button.reset"/>' class="button"/>
               
                <input type="button" value='<fmt:message key="button.back"/>' class="button" onclick="history.back()"/>
        </td>
    </tr>
</c:set> -->
 
      <c:if test="${from=='update' or param.handle =='update'}">
        <tr>
         <th>
             <manhourpool:label key="TcsBoxForm.tcs_box_id"/>
         </th>
         <td>
             <html:text property="tcs_box_id" styleId="tcs_box_id" readonly="true"></html:text>
         </td>
         </tr>
       </c:if>
     <tr>
         <th>
             <manhourpool:label key="TcsBoxForm.code"/>
         </th>
         <td>
             <html:text property="tcs_box_code" styleId="tcs_box_code" ></html:text>
         </td>
     </tr>
      <tr>
         <th>
             <manhourpool:label key="TcsBoxForm.tcs_box_name"/>
         </th>
         <td>
             <html:text property="tcs_box_name" styleId="tcs_box_name" ></html:text>
         </td>
     </tr>
     <tr>
         <th>
             <manhourpool:label key="TcsBoxForm.companycode"/>
         </th>
         <td>
         <html:select property="company_code" styleId="company_code" onchange="changeCompany_Code(this)">
          <html:options collection="companyLst" property="code" labelProperty="name" />
         </html:select>
         </td>
     </tr>
     <tr>
         <th>
             <manhourpool:label key="TcsBoxForm.burea"/>
         </th>
         <td>
         <html:select property="bureau_id"  styleId="bureau_id" >
          <html:options collection="bureauLst" property="code" labelProperty="name" />
         </html:select>
         </td>
     </tr>
    
      <tr>
         <th>
             <manhourpool:label key="TcsBoxForm.district"/>
         </th>
         <td>
         <html:select property="district_id"  styleId="district_id" >
          <html:options collection="districtLst" property="code" labelProperty="name" />
         </html:select>
         </td>
     </tr>
    
     <tr>
         <th>
             <manhourpool:label key="TcsBoxForm.address"/>
         </th>
         <td>
    <html:text property="tcs_address" styleId="tcs_address" ></html:text>
         </td>
     </tr>
     <c:if test="${from=='update' or param.handle =='update'}">
          <tr>
          <th>
              <manhourpool:label key="chartem.state"/>
          </th>
          <td>
              <html:select property="state" >
                 <html:options collection="doms" property="column_value" labelProperty="description"/>
              </html:select>
          </td>
         </tr>
     </c:if>
</table>
<table align="center">
<!-- <c:out value="${pageButtons}"  escapeXml="false"/> --></table>
</html:form>

<script type='text/javascript' src='dwr/interface/bureauManager.js'></script>
<script type='text/javascript' src='dwr/interface/districtManager.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type="text/javascript">
   var bureau_on_load=true;
   var bureau_id='<c:out value="${tcsBoxForm.bureau_id}"/>';
   window.onload=function(){
     window.changeCompany_Code(document.all.company_code);
 var ppage = window.parent.document.frames['theiframtwo'];
 if('<c:out value="${handlesucc}" />'){
  ppage.document.getElementById('viewBoxes').submit();
 }
   }
   function changeCompany_Code(sel_obj)
   {
     var company_code=sel_obj.value;
    
     if(company_code=='')
        return;
     var param =new Object();
     param.company_code=company_code;
     bureauManager.getBureauListInDwr(param,showBureau);
     districtManager.getDistrictBycompany(company_code,showDistrict);
     
   }
  
   function showBureau(bureaus)
   {
 //     var bureau_id=$('bureau_id').value;
 //     if(window.bureau_on_load)
 //     {
 //       bureau_id='<c:out value="${param.bureau_id}"/>';
 //       window.bureau_on_load=false;
//      }
      DWRUtil.removeAllOptions('bureau_id');
      var op=document.createElement('option');
      op.value='';
      op.text='<fmt:message key="task.default" />';
      $('bureau_id').options.add(op);
     
      DWRUtil.addOptions('bureau_id',bureaus,'bureau_id','bureau_name');
      for(var i=0;i<$('bureau_id').options.length;i++)
      {
        if($('bureau_id').options[i].value==bureau_id)
        {
          $('bureau_id').selectedIndex=i;
          break;
        }
      }
   }
  
  
   function showDistrict(dis)
   { 
  
   var dis_code=$('district_id').value;
   if(window.isOnload)
   {
     dis_code='<c:out value="${taskInfoForm.district_id}"/>';
     window.isOnload=false;
   }
     DWRUtil.removeAllOptions('district_id');
     var op=document.createElement('option');
     op.value='';
     op.text='<fmt:message key="task.default" />';
     $('district_id').options.add(op);
     DWRUtil.addOptions('district_id',dis,'code','name');
     for(var i=0;i<$('district_id').options.length;i++)
     {
      if($('district_id').options[i].value==dis_code)
      {
        $('district_id').selectedIndex=i;
        break;
      }
     }
   }
</script>

    
         </td>
     </tr>
    
     <tr>
         <th>
             <fmt:message key="timelimitmv.value.name"/>
         </th>
         <td>
          <select name="begin_value" id="begin_value">
       <option value="1" ><fmt:message key="timelimitmv.type1"/></option>
       <option value="2"><fmt:message key="timelimitmv.type2"/></option>
       <option value="4"><fmt:message key="timelimitmv.type4"/></option>
             </select>

    
         </td>
     </tr>

DWR.xml配置文件说明书.doc
DWR笔记.doc
DWR技术分析.doc
DWR开发培训.ppt
DWR学习.doc
打包下载 http://www.javaeye.com/topic/32782

DWR学习 http://www.javaeye.com/topic/16424

DWR应用总结 http://www.javaeye.com/topic/33678

Message物件如下…
1234567891011121314151617181920212223 package onlyfun.caterpillar; public class Message {    private long id = System.currentTimeMillis();    private String text;        public Message(String newtext) {        text = newtext;        if (text.length() > 256) {            text = text.substring(0, 256);        }        text = text.replace('<', '[');        text = text.replace('&', '_');    }     public long getId() {        return id;    }     public String getText() {        return text;    }} 

Servlet接受訊息新增與查詢，判斷的方式是檢查請求參數task是send或query。

Servlet會以XML傳回目前List當中的訊息，客戶端可以查詢或插入新訊息時，取得目前List中的訊息，接著在web.xml中設定一下…
12345678910111213141516171819202122 <?xml version="1.0" encoding="UTF-8"?><web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  <servlet>    <description>    </description>    <display-name>    ChatRoomServlet</display-name>    <servlet-name>ChatRoomServlet</servlet-name>    <servlet-class>    onlyfun.caterpillar.ChatRoomServlet</servlet-class>  </servlet>   <servlet-mapping>    <servlet-name>ChatRoomServlet</servlet-name>    <url-pattern>/ChatRoomServlet</url-pattern>  </servlet-mapping>  <session-config>    <session-timeout>            30        </session-timeout>  </session-config>  </web-app>

在網頁中，使用者可以在輸入訊息後按下按鈕送出資訊，並在XML回應取得時，將訊息以一列一列的表格方式顯示出來，另外還設定了週期性的輪詢，即使不輸入新訊息，也可以週期性的取得新的聊天訊息…
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=BIG5"><title>Chat Room</title> <script type="text/javascript">var xmlHttp; function createXMLHttpRequest() {    if (window.ActiveXObject) {        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    }     else if (window.XMLHttpRequest) {        xmlHttp = new XMLHttpRequest();    }} function sendMessage() {  var msg = document.getElementById("text").value;    if(msg == "") {    refreshMessage();    return;  }    var param = "task=send&msg=" + msg;  ajaxRequest(param);  document.getElementById("text").value = "";} function queryMessage() {  var param = "task=query";  ajaxRequest(param);} function ajaxRequest(param) {  var url = "ChatRoomServlet?timestamp" + new Date().getTime();    createXMLHttpRequest();  xmlHttp.onreadystatechange = refreshMessage;    xmlHttp.open("POST", url, true);  xmlHttp.setRequestHeader("Content-Type",           "application/x-www-form-urlencoded;");    xmlHttp.send(param);}  function refreshMessage() {  if(xmlHttp.readyState == 4) {        if(xmlHttp.status == 200) {          var messages = xmlHttp.responseXML.getElementsByTagName("message");            var table_body = document.getElementById("dynamicUpdateArea");      var length = table_body.childNodes.length;      for (var i = 0; i < length; i++) {        table_body.removeChild(table_body.childNodes[0]);      }            var length = messages.length;          for(var i = length - 1; i >= 0 ; i--) {              var message = messages[i].firstChild.data;              var row = createRow(message);                      table_body.appendChild(row);                                  }      setTimeout("queryMessage()", 2000);        }  }} function createRow(message) {    var row = document.createElement("tr");    var cell = document.createElement("td");    var cell_data = document.createTextNode(message);    cell.appendChild(cell_data);    row.appendChild(cell);    return row;} </script> </head><body> <p>  Your Message:  <input id="text"/>  <input type="button" value="Send"      onclick="sendMessage()"/></p> <p>Messages:</p>    <table align="left">        <tbody id="dynamicUpdateArea"></tbody>    </table> </body></html>

簡單抓個畫面… 

直接用AJAX，後端用JSP/Servlet，您要對請求參數做些判斷，看看是新增訊息或查詢，並要自行輸出XML，有的沒的…

改成DWR的話，就很簡單了，寫個簡單的Java物件…
1234567891011121314151617181920212223 package onlyfun.caterpillar; import java.util.LinkedList;import java.util.List; public class Chat {  private static LinkedList<Message> messages = new LinkedList<Message>();   public List addMessage(String text) {    if (text != null && text.trim().length() > 0) {      messages.addFirst(new Message(text));      while (messages.size() > 10) {        messages.removeLast();      }    }     return messages;  }   public List getMessages() {    return messages;  }} 

接著…在dwr.xml中開放一下…
12345678910111213 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr>  <allow>     <create creator="new" javascript="Chat">      <param name="class" value="onlyfun.caterpillar.Chat"/>    </create>        <convert converter="bean" match="onlyfun.caterpillar.Message"/>        </allow></dwr>

使用者取得訊息時，是直接傳回List物件，而List中裝的是Message物件，Message物件是自訂物件，conterver設定為 bean，表示DWR會自動將Message的getter名稱轉換為傳回客戶端的JavaScript物件中的屬性，例如Message中有 getText()，則在客戶端可以用message.text這樣的方式來存取。

接著是簡單的客戶端網頁…
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=BIG5"><title>Insert title here</title> <script src="dwr/interface/Chat.js" type="text/javascript"></script><script src="dwr/engine.js" type="text/javascript"></script><script src="dwr/util.js" type="text/javascript"></script> <script type="text/javascript">function sendMessage() {    var text = DWRUtil.getValue("text");    DWRUtil.setValue("text", "");    Chat.addMessage(text, gotMessages);} function gotMessages(messages) {    var chatlog = "";    for (var data in messages) {        chatlog = "<div>" + messages[data].text +            "</div>" + chatlog;    }    DWRUtil.setValue("chatlog", chatlog);  setTimeout("queryMessage()", 2000);} function queryMessage() {  Chat.getMessages(gotMessages);}</script> </head><body> <p>  Your Message:  <input id="text"/>  <input type="button" value="Send"      onclick="sendMessage()"/></p> <p>Messages:</p><div id="chatlog"></div> </body></html>

當List物件傳回時，它成為gotMessages(messages)中的messages物件，而messages物件中包括 Message物件轉換後對應的JavaScript物件，由於我們已經設定了Converter，所以可以用messages[data].text來 取得傳回的訊息…

簡單抓個畫面…

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/caterpillar_here/archive/2006/09/30/1311605.aspx

例如一個示意的Java程式如下：
12345678 package onlyfun.caterpillar; public class Option {  public String[] getOptions() {                // 實際上這些字串是從資料庫中查到的啦…    return new String[] {"良葛格", "毛美眉", "米小狗"};   }} 

傳回的字串陣列，您要填寫到下拉選單中，當然，首先我們要在dwr.xml中開發這個物件…
12345678910 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr>  <allow>    <create creator="new" javascript="OPT">        <param name="class" value="onlyfun.caterpillar.Option"/>    </create>    </allow></dwr>

這是我們的網頁…
123456789101112131415 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=BIG5"><script src="option.js" type="text/javascript"></script><script src="dwr/interface/OPT.js" type="text/javascript"></script><script src="dwr/engine.js" type="text/javascript"></script><script src="dwr/util.js" type="text/javascript"></script> </head> <body>    選項: <select id="opts"></select></body></html>

傳回的字串陣列會填入opts這個select中，我們的option.js如下…
12345678 window.onload = function() {    OPT.getOptions(populate);  }; function populate(list){    DWRUtil.removeAllOptions("opts");    DWRUtil.addOptions("opts", list);} 

夠簡單了…不需要解釋了…

看一下結果… 

好啦！我知道有人在說了，這個程式有夠無聊…

改一下！就是個不錯的範例了，例如連動方塊，唔！在Ajax in action中叫啥？Dynamic double combo？…

假設一個會去從資料庫中查詢資料的Java程式示意如下：
123456789101112131415161718192021222324252627282930 package onlyfun.caterpillar; import java.util.Map;import java.util.TreeMap; public class Bike {  private Map<String, String[]> bikes;    public Bike() {    bikes = new TreeMap<String, String[]>();    bikes.put("2000", new String[] {"2000 T1", "2000 T2", "2000 T3"});    bikes.put("2001", new String[] {"2001 A1", "2001 A2"});    bikes.put("2002", new String[] {"2002 BW1", "2002 BW2", "2002 BW"});    bikes.put("2003", new String[] {"2003 S320"});    bikes.put("2004", new String[] {"2004 TA1", "2004 TA2", "2004 TA3"});  }    public String[] getYears() {    String[] keys = new String[bikes.size()];    int i = 0;    for(String key : bikes.keySet()) {      keys[i++] = key;    }    return keys;   }    public String[] getBikes(String year) {    return bikes.get(year);  }} 

getYears()跟getBkies()分別表示產品的年份跟型號，這邊用Map模擬，實際上資料是來自資料庫的查詢。

一樣的，在dwr.xml中設定：
12345678910 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr>  <allow>    <create creator="new" javascript="Bike" scope="application">        <param name="class" value="onlyfun.caterpillar.Bike"/>    </create>  </allow></dwr>

我們會有個腳踏車年份與型號查詢頁面：
123456789101112131415 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=BIG5"><title>Insert title here</title>  <script type='text/javascript' src='dwr/interface/Bike.js'></script>  <script type='text/javascript' src='dwr/engine.js'></script>  <script type='text/javascript' src='dwr/util.js'></script>  <script type='text/javascript' src='bike.js'></script></head><body onload="refreshYearList();">  年份：<select id="years" onchange="refreshBikeList();"></select><br/><br/>  型號：<select id="bikes"></select><br/></body></html>

注意，在選完第一個年份後，會觸發onchange事件，接著第二個下拉選單會自動填上對應年份的型號，而不是按鈕按下，再去取得第二個下拉選單，然後refresh...blah...blah...

bike.js如下…
12345678910111213141516171819 function refreshYearList() {    Bike.getYears(populateYearList);} function populateYearList(list){    DWRUtil.removeAllOptions("years");    DWRUtil.addOptions("years", list);    refreshBikeList();} function refreshBikeList() {    var year = $("years").value;    Bike.getBikes(year, populateBikeList);} function populateBikeList(list){    DWRUtil.removeAllOptions("bikes");    DWRUtil.addOptions("bikes", list);} 

一樣很簡單…

看個無聊的畫面…XD

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/caterpillar_here/archive/2006/09/18/1239538.aspx

請先到 http://getahead.ltd.uk/dwr/ 下載 dwr.jar，放到WEB-INF/lib下…

負責處理客戶端請求，並呼叫Java物件的是DWRServlet，DWR其實也有些Model 2的味道，只是View的這一層比較弱，因為放到客戶端的JavaScript應用程式中…

在web.xml中加入DWRServlet…
1234567891011121314151617181920212223 <?xml version="1.0" encoding="UTF-8"?><web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  <display-name>  ajaxDWR</display-name>  <servlet>    <servlet-name>dwr-invoker</servlet-name>    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>    <init-param>      <description>      </description>      <param-name>debug</param-name>      <param-value>true</param-value>    </init-param>  </servlet>  <servlet-mapping>    <servlet-name>dwr-invoker</servlet-name>    <url-pattern>/dwr/*</url-pattern>  </servlet-mapping></web-app>

接下來寫個簡單的Hello吧！
1234567 package onlyfun.caterpillar; public class Hello {  public String hello(String name) {      return "哈囉！" + name + "！您的第一個DWR！";    }} 

客戶端要呼叫這個Java物件，傳給它參數，而後傳回一個字串，客戶端再顯示這個字串，神奇？其實是要告訴DWRServlet這件事，這需要一個dwr.xml：
1234567891011 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr>  <allow>    <create creator="new" javascript="Hello">      <param name="class" value="onlyfun.caterpillar.Hello" />    </create>  </allow></dwr>

creator設定為new，表示使用Hello的無參數建構子來生成物件，javascript設定為Hello，表示客戶端JavaScript程式可以使用Hello來呼叫對應的onlyfun.caterpillar.Hello物件。

來寫個客戶端的網頁，當中有一個輸入欄位…
12345678910111213141516171819 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=BIG5">  <title>第一個DWR程式</title>  <script type='text/javascript' src='dwr/interface/Hello.js'></script>  <script type='text/javascript' src='dwr/engine.js'></script>  <script type='text/javascript' src='dwr/util.js'></script>  <script type='text/javascript' src='hello.js'></script></head><body> <input id="user" type="text" /><input type='button' value='哈囉' onclick='hello();' />  <div id="result"></div> </body></html>

dwr/interface/Hello.js是由DWRServlet根據dwr.xml中的設定生成的，engine.js負責客戶端伺服端溝通，util.js是一些好用的JavaScript程式，可以讓您少寫很多JavaScript。

hello.js是我們自訂的函式，按下按鈕後，會呼叫當中的hello()函式：
12345678 function hello() {    var user = $('user').value;    Hello.hello(user, callback);} function callback(msg) {   DWRUtil.setValue('result', msg);} 

${'user'}取得輸入欄位的DOM物件，value取得當中的欄位值，而後呼叫Hello.hello()，並將value當作參數傳送… 結果是呼叫Server端的Hello Java物件，當結果傳回後，會呼叫JavaScript的callback函式，DWRUtil的setValue()方法會將傳回的msg設定給指定 id的DOM，結果就是…啥！AJAX的功能在哪…就這個而言就是發出非同步請求，而回應不用Refresh頁面啦！ 

好啦！這個無聊的Hello DWR可以做啥！…XD

已經可以讓您做個簡單的文字提示功能了…像這個…
http://caterpillar.onlyfun.net/Gossip/index.html

把滑鼠指到書的照片上，會顯示提示文字，這些提示文字本身不是存在網頁上的，而是在Server端，當滑鼠指到書上時，會用Request object去抓，然後顯示在框框中…

當然！我的網站只支援PHP，所以那不是DWR完成的功能，而且我是直接用Request object跟DOM去慢慢刻的…對初學者來說已經有些麻煩了…XD

不過！用DWR就可以很簡單完成這個功能…

先寫個Java類別吧！會抓properties檔案中的文字訊息，例如…
123456789101112131415 package onlyfun.caterpillar; import java.util.ResourceBundle; public class Book {  private ResourceBundle resource;    public Book() {    resource = ResourceBundle.getBundle("book");   }          public String getDescription(String key) {    return resource.getString(key);  }} 

從程式中就知道，它會去抓book_zh_TW.properties的資料，這不是重點啦！只是Java的一個功能，我們要看的是DWR，不過先把book_zh_TW.properties準備好…
123 java=Java 學習筆記的介紹 … BlaBla...spring=Spring 技術手冊的介紹…BlaBla...ajax=Ajax in action 中文版的介紹…

唔！裏頭是中文字，自己用native2ascii轉換吧…這也不是重點…我們是要看DWR怎麼做到文字提示功能…

一樣的…要開放這個Book物件，在dwr.xml中…
1234567891011 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr>  <allow>  <create creator="new" javascript="Book" scope="application">            <param name="class" value="onlyfun.caterpillar.Book"/>        </create>    </allow></dwr>

scope設定為application，表示這個Book物件在整個應用程式階段都活著。

然後，客戶端寫個網頁…
12345678910111213141516171819202122232425262728293031323334353637383940 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=BIG5">  <script type='text/javascript' src='dwr/interface/Book.js'></script>  <script type='text/javascript' src='dwr/engine.js'></script>  <script type='text/javascript' src='dwr/util.js'></script>  <script type='text/javascript' src='book.js'></script><title>個人著／譯作</title></head><body>       <div id="ajax" onmouseover="getBookData(this);" onmouseout="clearData();"><a href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=AXP011800"><small><img style="border: 0px solid ; width: 80px; height: 110px; float: left;" alt="Ajax in action 中文版" title="Ajax in action 中文版" src="images/ajax_in_action_c.jpg" hspace="10" vspace="2"></small></a></div>       <div id="spring" onmouseover="getBookData(this);" onmouseout="clearData();"><a href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=ACL021000"><small><img style="border: 0px solid ; width: 80px; height: 110px; float: left;" alt="Spring 技術手冊" title="Spring 技術手冊" src="images/SpringTech_S.jpg" hspace="10" vspace="2"></small></a></div>       <div id="java" onmouseover="getBookData(this);" onmouseout="clearData();"><a href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=ACL020931"><small><img style="border: 0px solid ; width: 80px; height: 110px; float: left;" alt="Java 學習筆記" title="Java 學習筆記" src="images/JavaGossip_Cover_Small.jpg" hspace="10" vspace="2"></small></a></div>     <br/><br/><br/><br/><br/><br/>     <div id="info"></div> </body></html>

重點在於onmouseover跟onmouseout，滑鼠移入與移出時會呼叫的函式，還有最下面的info，抓回來的書籍介紹會放到當中…

book.js如下，簡單的很…
1234567891011 function getBookData(ele) {  Book.getDescription(ele.id, setBookData);} function setBookData(description) {  DWRUtil.setValue('info', description);} function clearData() {  DWRUtil.setValue('info', '');} 

程式很簡單，我懶得解釋了…XD

看一下畫面好了…這是滑鼠移到 Ajax in action中文版 上的介紹畫面…

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/caterpillar_here/archive/2006/09/06/1186566.aspx

作为一种广泛使 用的 Web 应用程序开发技术，Ajax 牢固确立了自己的地位，随之而来的是一些通用 Ajax 使用模式。例如，Ajax 经常用于对用户输入作出响应，然后使用从服务器获得的新数据修改页面的部分内容。但是，有时 Web 应用程序的用户界面需要进行更新以响应服务器端发生的异步事件，而不需要用户操作 —— 例如，显示到达 Ajax 聊天应用程序的新消息，或者在文本编辑器中显示来自另一个用户的改变。由于只能由浏览器建立 Web 浏览器和服务器之间的 HTTP 连接，服务器无法在改动发生时将变化 “推送” 给浏览器。

Ajax 应用程序可以使用两种基本的方法解决这一问题：一种方法是浏览器每隔若干秒时间向服务器发出轮询以进行更新，另一种方法是服务器始终打开与浏览器的连接并在数据可用时发送给浏览器。长期连接技术被称为 Comet（请参阅 参考资料）。本文将展示如何结合使用 Jetty servlet 引擎和 DWR 简捷有效地实现一个 Comet Web 应用程序。

为什么使用 Comet？

轮 询方法的主要缺点是：当扩展到更多客户机时，将生成大量的通信量。每个客户机必须定期访问服务器以检查更新，这为服务器资源添加了更多负荷。最坏的一种情 况是对不频繁发生更新的应用程序使用轮询，例如一种 Ajax 邮件 Inbox。在这种情况下，相当数量的客户机轮询是没有必要的，服务器对这些轮询的回答只会是 “没有产生新数据”。虽然可以通过增加轮询的时间间隔来减轻服务器负荷，但是这种方法会产生不良后果，即延迟客户机对服务器事件的感知。当然，很多应用程 序可以实现某种权衡，从而获得可接受的轮询方法。

尽管如此，吸引人们使用 Comet 策略的其中一个优点是其显而易见的高效性。客户机不会像使用轮询方法那样生成烦人的通信量，并且事件发生后可立即发布给客户机。但是保持长期连接处于打开 状态也会消耗服务器资源。当等待状态的 servlet 持有一个持久性请求时，该 servlet 会独占一个线程。这将限制 Comet 对传统 servlet 引擎的可伸缩性，因为客户机的数量会很快超过服务器栈能有效处理的线程数量。

回页首

Jetty 6 有何不同

Jetty 6 的目的是扩展大量同步连接，使用 Java™ 语言的非阻塞 I/O（java.nio）库并使用一个经过优化的输出缓冲架构（参阅 参考资料）。Jetty 还为处理长期连接提供了一些技巧：该特性称为 Continuations。 我将使用一个简单的 servlet 对 Continuations 进行演示，这个 servlet 将接受请求，等待处理，然后发送响应。接下来，我将展示当客户机数量超过服务器提供的处理线程后发生的状况。最后，我将使用 Continuations 重新实现 servlet，您将了解 Continuations 在其中扮演的角色。

为了便于理解下面的示例，我将把 Jetty servlet 引擎限制在一个单请求处理线程。清单 1 展示了 jetty.xml 中的相关配置。我实际上需要在 ThreadPool 使用三个线程：Jetty 服务器本身使用一个线程，另一线程运行 HTTP 连接器，侦听到来的请求。第三个线程执行 servlet 代码。

                

            <?xml version="1.0"?>

            <!DOCTYPE Configure PUBLIC "-//Mort Bay Consulting//DTD Configure//EN"

            "http://jetty.mortbay.org/configure.dtd">

            <Configure id="Server" class="org.mortbay.jetty.Server">

            <Set name="ThreadPool">

            <New class="org.mortbay.thread.BoundedThreadPool">

            <Set name="minThreads">3</Set>

            <Set name="lowThreads">0</Set>

            <Set name="maxThreads">3</Set>

            </New>

            </Set>

            </Configure>

            

接下来，为了模拟对异步事件的等待，清单 2 展示了 BlockingServlet 的 service() 方法，该方法将使用 Thread.sleep() 调用在线程结束之前暂停 2000 毫秒的时间。它还在执行开始和结束时输出系统时间。为了区别输出和不同的请求，还将作为标识符的请求参数记录在日志中。

                

            public class BlockingServlet extends HttpServlet {

            

            public void service(HttpServletRequest req, HttpServletResponse res)

            throws java.io.IOException {

            

            String reqId = req.getParameter("id");

            

            res.setContentType("text/plain");

            res.getWriter().println("Request: "+reqId+"\tstart:\t" + new Date());

            res.getWriter().flush();

            

            try {

            Thread.sleep(2000);

            } catch (Exception e) {}

            

            res.getWriter().println("Request: "+reqId+"\tend:\t" + new Date());

            }

            }

            

现在可以观察到 servlet 响应一些同步请求的行为。清单 3 展示了控制台输出，五个使用 lynx 的并行请求。命令行启动五个 lynx 进程，将标识序号附加在请求 URL 的后面。

                

            

            $ for i in 'seq 1 5'  ; do lynx -dump localhost:8080/blocking?id=$i &  done

            Request: 1      start:  Sun Jul 01 12:32:29 BST 2007

            Request: 1      end:    Sun Jul 01 12:32:31 BST 2007

            

            Request: 2      start:  Sun Jul 01 12:32:31 BST 2007

            Request: 2      end:    Sun Jul 01 12:32:33 BST 2007

            

            Request: 3      start:  Sun Jul 01 12:32:33 BST 2007

            Request: 3      end:    Sun Jul 01 12:32:35 BST 2007

            

            Request: 4      start:  Sun Jul 01 12:32:35 BST 2007

            Request: 4      end:    Sun Jul 01 12:32:37 BST 2007

            

            Request: 5      start:  Sun Jul 01 12:32:37 BST 2007

            Request: 5      end:    Sun Jul 01 12:32:39 BST 2007

            

清单 3 中的输出和预期一样。因为 Jetty 只可以使用一个线程执行 servlet 的 service() 方法。Jetty 对请求进行排列，并按顺序提供服务。当针对某请求发出响应后将立即显示时间戳（一个 end 消息），servlet 接着处理下一个请求（后续的 start 消息）。因此即使同时发出五个请求，其中一个请求必须等待 8 秒钟的时间才能接受 servlet 处理。

请注意，当 servlet 被阻塞时，执行任何操作都无济于事。这段代码模拟了请求等待来自应用程序不同部分的异步事件。这里使用的服务器既不是 CPU 密集型也不是 I/O 密集型：只有线程池耗尽之后才会对请求进行排队。

现在，查看 Jetty 6 的 Continuations 特性如何为这类情形提供帮助。清单 4 展示了 清单 2 中使用 Continuations API 重写后的 BlockingServlet。我将稍后解释这些代码。

                

            public class ContinuationServlet extends HttpServlet {

            

            public void service(HttpServletRequest req, HttpServletResponse res)

            throws java.io.IOException {

            

            String reqId = req.getParameter("id");

            

            Continuation cc = ContinuationSupport.getContinuation(req,null);

            

            res.setContentType("text/plain");

            res.getWriter().println("Request: "+reqId+"\tstart:\t"+new Date());

            res.getWriter().flush();

            

            cc.suspend(2000);

            

            res.getWriter().println("Request: "+reqId+"\tend:\t"+new Date());

            }

            }

            

清单 5 展示了对 ContinuationServlet 的五个同步请求的输出；请与 清单 3 进行比较。

                

            $ for i in 'seq 1 5'  ; do lynx -dump localhost:8080/continuation?id=$i &  done

            

            Request: 1      start:  Sun Jul 01 13:37:37 BST 2007

            Request: 1      start:  Sun Jul 01 13:37:39 BST 2007

            Request: 1      end:    Sun Jul 01 13:37:39 BST 2007

            

            Request: 3      start:  Sun Jul 01 13:37:37 BST 2007

            Request: 3      start:  Sun Jul 01 13:37:39 BST 2007

            Request: 3      end:    Sun Jul 01 13:37:39 BST 2007

            

            Request: 2      start:  Sun Jul 01 13:37:37 BST 2007

            Request: 2      start:  Sun Jul 01 13:37:39 BST 2007

            Request: 2      end:    Sun Jul 01 13:37:39 BST 2007

            

            Request: 5      start:  Sun Jul 01 13:37:37 BST 2007

            Request: 5      start:  Sun Jul 01 13:37:39 BST 2007

            Request: 5      end:    Sun Jul 01 13:37:39 BST 2007

            

            Request: 4      start:  Sun Jul 01 13:37:37 BST 2007

            Request: 4      start:  Sun Jul 01 13:37:39 BST 2007

            Request: 4      end:    Sun Jul 01 13:37:39 BST 2007

            

清单 5 中有两处需要重点注意。首先，每个 start 消息出现两次；先不要着急。其次，更重要的一点，请求现在不需排队就能够并发处理，注意所有 start 和 end 消息的时间戳是相同的。因此，每个请求的处理时间不会超过两秒，即使只运行一个 servlet 线程。

回页首

Jetty Continuations 机制原理

理解了 Jetty Continuations 机制的实现原理，您就能够解释 清单 5 中的现象。要使用 Continuations，必须对 Jetty 进行配置，以使用其 SelectChannelConnector 处理请求。这个连接器构建在 java.nio API 之上，因此使它能够不用消耗每个连接的线程就可以持有开放的连接。当使用 SelectChannelConnector 时，ContinuationSupport.getContinuation() 将提供一个 SelectChannelConnector.RetryContinuation 实例。（然而，您应该只针对 Continuation 接口进行编码；请参阅 Portability and the Continuations API。）当对 RetryContinuation 调用 suspend() 时，它将抛出一个特殊的运行时异常 —— RetryRequest —— 该异常将传播到 servlet 以外并通过过滤器链传回，并由 SelectChannelConnector 捕获。 但是发生该异常之后并没有将响应发送给客户机，请求被放到处于等待状态的 Continuation 队列中，而 HTTP 连接仍然保持打开状态。此时，为该请求提供服务的线程将返回 ThreadPool，用以为其他请求提供服务。

可移植性和 Continuations API 我提到过应该使用 Jetty 的 SelectChannelConnector 来启用 Continuations 功能。然而，Continuations API 仍然可用于传统的 SocketConnector，这种情况下 Jetty 将回退到不同的 Continuation 实现，该实现使用 wait()/notify() 方法。您的代码仍然可以编译和运行，但是却失去了非阻塞 Continuations 的优点。如果您希望继续使用非 Jetty 服务器，您应该考虑编写自己的 Continuation 包装器，在运行时期使用反射检查 Jetty Continuations 库是否可用。DWR 就使用了这种策略。

暂停的请求将一直保持在等待状态的 Continuation 队列，直到超出指定的时限，或者当对 resume() 方法的 Continuation 调用 resume() 时（稍后将详细介绍）。出现上述任意一种条件时，请求将被重新提交到 servlet（通过过滤器链）。事实上，整个请求被重新进行处理，直到首次调用 suspend()。当执行第二次发生 suspend() 调用时，RetryRequest 异常不会被抛出，执行照常进行。

现在应该可以解释 清单 5 中的输出了。每个请求依次进入 servlet 的 service() 方法后，将发送 start 消息进行响应，Continuation 的 suspend() 方法引发 servlet 异常，将释放线程使其处理下一个请求。所有五个请求快速通过 service() 方法的第一部分，并进入等待状态，并且所有 start 消息将在几毫秒内输出。两秒后，当超过 suspend() 的时限后，将从等待队列中检索第一个请求，并将其重新提交给 ContinuationServlet。第二次输出 start 消息，立即返回对 suspend() 的第二次调用，并且发送 end 消息进行响应。然后将在此执行 servlet 代码来处理队列中的下一个请求，以此类推。

因此，在 BlockingServlet 和 ContinuationServlet 两种情况中，请求被放入队列中以访问单个 servlet 线程。然而，虽然 servlet 线程执行期间 BlockingServlet 发生两秒暂停，SelectChannelConnector 中的 ContinuationServlet 的暂停发生在 servlet 之外。ContinuationServlet 的总吞吐量更高一些，因为 servlet 线程没有将大部分时间用在 sleep() 调用中。

回页首

使 Continuations 变得有用

现在您已经了解到 Continuations 能够不消耗线程就可以暂停 servlet 请求，我需要进一步解释 Continuations API 以向您展示如何在实际应用中使用。

resume() 方法生成一对 suspend()。可以将它们视为标准的 Object wait()/notify() 机制的 Continuations 等价体。就是说，suspend() 使 Continuation（因此也包括当前方法的执行）处于暂停状态，直到超出时限，或者另一个线程调用 resume()。suspend()/resume() 对于实现真正使用 Continuations 的 Comet 风格的服务非常关键。其基本模式是：从当前请求获得 Continuation，调用 suspend()，等待异步事件的到来。然后调用 resume() 并生成一个响应。

然而，与 Scheme 这种语言中真正的语言级别的 continuations 或者是 Java 语言的 wait()/notify() 范例不同的是，对 Jetty Continuation 调用 resume() 并不意味着代码会从中断的地方继续执行。正如您刚刚看到的，实际上和 Continuation 相关的请求被重新处理。这会产生两个问题：重新执行 清单 4 中的 ContinuationServlet 代码，以及丢失状态：即调用 suspend() 时丢失作用域内所有内容。

第一个问题的解决方法是使用 isPending() 方法。如果 isPending() 返回值为 true，这意味着之前已经调用过一次 suspend()，而重新执行请求时还没有发生第二次 suspend() 调用。换言之，根据 isPending() 条件在执行 suspend() 调用之前运行代码，这样将确保对每个请求只执行一次。在 suspend() 调用具有等幂性之前，最好先对应用程序进行设计，这样即使调用两次也不会出现问题，但是某些情况下无法使用 isPending() 方法。Continuation 也提供了一种简单的机制来保持状态：putObject(Object) 和 getObject() 方法。在 Continuation 发生暂停时，使用这两种方法可以保持上下文对象以及需要保存的状态。您还可以使用这种机制作为在线程之间传递事件数据的方式，稍后将演示这种方法。

回页首

编写基于 Continuations 的应用程序

作 为实际示例场景，我将开发一个基本的 GPS 坐标跟踪 Web 应用程序。它将在不规则的时间间隔内生成随机的经纬度值对。发挥一下想象力，生成的坐标值可能就是临近的一个公共车站、随身携带着 GPS 设备的马拉松选手、汽车拉力赛中的汽车或者运输中的包裹。令人感兴趣的是我将如何告诉浏览器这个坐标。图 1 展示了这个简单的 GPS 跟踪器应用程序的类图：

首先，应用程序需要某种方法来生成坐标。这将由 RandomWalkGenerator 完成。从一对初始坐标对开始，每次调用它的私有 generateNextCoord() 方法时，将从该位置移动随机指定的距离，并将新的位置作为 GpsCoord 对象返回。初始化完成后，RandomWalkGenerator 将生成一个线程，该线程以随机的时间间隔调用 generateNextCoord() 方法并将生成的坐标发送给任何注册了 addListener() 的 CoordListener 实例。清单 6 展示了 RandomWalkGenerator 循环的逻辑：

                

            public void run() {

            

            try {

            while (true) {

            int sleepMillis = 5000 + (int)(Math.random()*8000d);

            Thread.sleep(sleepMillis);

            dispatchUpdate(generateNextCoord());

            }

            } catch (Exception e) {

            throw new RuntimeException(e);

            }

            }

            

CoordListener 是一个回调接口，仅仅定义 onCoord(GpsCoord coord) 方法。在本例中，ContinuationBasedTracker 类实现 CoordListener。ContinuationBasedTracker 的另一个公有方法是 getNextPosition(Continuation, int)。清单 7 展示了这些方法的实现：

                

            public GpsCoord getNextPosition(Continuation continuation, int timeoutSecs) {

            

            synchronized(this) {

            if (!continuation.isPending()) {

            pendingContinuations.add(continuation);

            }

            

            // Wait for next update

            continuation.suspend(timeoutSecs*1000);

            }

            

            return (GpsCoord)continuation.getObject();

            }

            

            

            public void onCoord(GpsCoord gpsCoord) {

            

            synchronized(this) {

            for (Continuation continuation : pendingContinuations) {

            

            continuation.setObject(gpsCoord);

            continuation.resume();

            }

            

            pendingContinuations.clear();

            }

            }

            

当客户机使用 Continuation 调用 getNextPosition() 时，isPending 方法将检查此时的请求是否是第二次执行，然后将它添加到等待坐标的 Continuation 集合中。然后该 Continuation 被暂停。同时，onCoord —— 生成新坐标时将被调用 —— 循环遍历所有处于等待状态的 Continuation，对它们设置 GPS 坐标，并重新使用它们。之后，每个再次执行的请求完成 getNextPosition() 执行，从 Continuation 检索 GpsCoord 并将其返回给调用者。注意此处的同步需求，是为了保护 pendingContinuations 集合中的实例状态不会改变，并确保新增的 Continuation 在暂停之前没有被处理过。

最后一个难点是 servlet 代码本身，如 清单 8 所示：

                

            public class GpsTrackerServlet extends HttpServlet {

            

            private static final int TIMEOUT_SECS = 60;

            private ContinuationBasedTracker tracker = new ContinuationBasedTracker();

            

            public void service(HttpServletRequest req, HttpServletResponse res)

            throws java.io.IOException {

            

            Continuation c = ContinuationSupport.getContinuation(req,null);

            GpsCoord position = tracker.getNextPosition(c, TIMEOUT_SECS);

            

            String json = new Jsonifier().toJson(position);

            res.getWriter().print(json);

            }

            }

            

如您所见，servlet 只执行了很少的工作。它仅仅获取了请求的 Continuation，调用 getNextPosition()，将 GPSCoord 转换成 JavaScript Object Notation (JSON)，然后输出。这里不需要防止重新执行，因此我不必检查 isPending()。清单 9 展示了调用 GpsTrackerServlet 的输出，同样，有五个同步请求而服务器只有一个可用线程：

                

            $  for i in 'seq 1 5'  ; do lynx -dump localhost:8080/tracker &  done

            { coord : { lat : 51.51122, lng : -0.08103112 } }

            { coord : { lat : 51.51122, lng : -0.08103112 } }

            { coord : { lat : 51.51122, lng : -0.08103112 } }

            { coord : { lat : 51.51122, lng : -0.08103112 } }

            { coord : { lat : 51.51122, lng : -0.08103112 } }

            

这个示例并不引人注意，但是提供了概念证明。发出请求后，它们将一直保持打开的连接直至生成坐标，此时将快速生成响应。这是 Comet 模式的基本原理，Jetty 使用这种原理在一个线程内处理 5 个并发请求，这都是 Continuations 的功劳。

回页首

创建一个 Comet 客户机

现在您已经了解了如何使用 Continuations 在理论上创建非阻塞 Web 服务，您可能想知道如何创建客户端代码来使用这种功能。一个 Comet 客户机需要完成以下功能：

1. 保持打开 XMLHttpRequest 连接，直到收到响应。
2. 将响应发送到合适的 JavaScript 处理程序。
3. 立即建立新的连接。

然而，如果服务器使用 Java 语言，使用 DWR 2 可以同时在客户机和服务器上获得 Comet 高级支持，这是一种不错的方法（参阅 参考资料）。如果您并不了解 DWR 的话，请参阅本系列第 3 部分 “结合 Direct Web Remoting 使用 Ajax”。DWR 透明地提供了一种 HTTP-RPC 传输层，将您的 Java 对象公开给网络中 JavaScript 代码的调用。DWR 生成客户端代理，将自动封送和解除封送数据，处理安全问题，提供方便的客户端实用工具库，并可以在所有主要浏览器上工作。

回页首

DWR 2: Reverse Ajax

DWR 2 最新引入了 Reverse Ajax 概念。这种机制可以将服务器端事件 “推入” 到客户机。客户端 DWR 代码透明地处理已建立的连接并解析响应，因此从开发人员的角度来看，事件是从服务器端 Java 代码轻松地发布到客户机中。

DWR 经过配置之后可以使用 Reverse Ajax 的三种不同机制。第一种就是较为熟悉的轮询方法。第二种称为 piggyback， 这种机制并不创建任何到服务器的连接，相反，将一直等待直至发生另一个 DWR 服务，piggybacks 使事件等待该请求的响应。这使它具有较高的效率，但也意味着客户机事件通知被延迟到直到发生另一个不相关的客户机调用。最后一种机制使用长期的、 Comet 风格的连接。最妙的是，当运行在 Jetty 下时，DWR 能够自动检测并切换为使用 Contiuations，实现非阻塞 Comet。

我将在 GPS 示例中结合使用 Reverse Ajax 和 DWR 2。通过这种演示，您将对 Reverse Ajax 的工作原理有更多的了解。

此时不再需要使用 servlet。DWR 提供了一个控制器 servlet，它将在 Java 对象之上直接转交客户机请求。同样也不需要显式地处理 Continuations，因为 DWR 将在内部进行处理。因此我只需要一个新的 CoordListener 实现，将坐标更新发布到到任何客户机浏览器上。

ServerContext 接口提供了 DWR 的 Reverse Ajax 功能。ServerContext 可以察觉到当前查看给定页面的所有 Web 客户机，并提供一个 ScriptSession 进行相互通信。ScriptSession 用于从 Java 代码将 JavaScript 片段推入到客户机。清单 10 展示了 ReverseAjaxTracker 响应坐标通知的方式，并使用它们生成对客户端 updateCoordinate() 函数的调用。注意对 DWR ScriptBuffer 对象调用 appendData() 将自动把 Java 对象封送给 JSON（如果使用合适的转换器）。

                

            public void onCoord(GpsCoord gpsCoord) {

            

            // Generate JavaScript code to call client-side

            // function with coord data

            ScriptBuffer script = new ScriptBuffer();

            script.appendScript("updateCoordinate(")

            .appendData(gpsCoord)

            .appendScript(");");

            

            // Push script out to clients viewing the page

            Collection<ScriptSession> sessions = 

            sctx.getScriptSessionsByPage(pageUrl);

            

            for (ScriptSession session : sessions) {

            session.addScript(script);

            }   

            }

            

接下来，必须对 DWR 进行配置以感知 ReverseAjaxTracker 的存在。在大型应用程序中，可以使用 DWR 的 Spring 集成提供 Spring 生成的 bean。但是，在本例中，我仅使用 DWR 创建了一个 ReverseAjaxTracker 新实例并将其放到 application 范围中。所有后续请求将访问这个实例。

我还需告诉 DWR 如何将数据从 GpsCoord beans 封送到 JSON。由于 GpsCoord 是一个简单对象，DWR 的基于反射的 BeanConverter 就可以完成此功能。清单 11 展示了 ReverseAjaxTracker 的配置：

                

            <dwr>

            <allow>

            <create creator="new" javascript="Tracker" scope="application">

            <param name="class" value="developerworks.jetty6.gpstracker.ReverseAjaxTracker"/>

            </create>

            

            <convert converter="bean" match="developerworks.jetty6.gpstracker.GpsCoord"/>

            </allow>

            </dwr>

            

create 元素的 javascript 属性指定了 DWR 用于将跟踪器公开为 JavaScript 对象的名字，在本例中，我的客户端代码没有使用该属性，而是将数据从跟踪器推入到其中。同样 ，还需对 web.xml 进行额外的配置，以针对 Reverse Ajax 配置 DWR，如 清单 12 所示：

                

            <servlet>

            <servlet-name>dwr-invoker</servlet-name>

            <servlet-class>

            org.directwebremoting.servlet.DwrServlet

            </servlet-class>

            <init-param>

            <param-name>activeReverseAjaxEnabled</param-name>

            <param-value>true</param-value>

            </init-param>

            <init-param>

            <param-name>initApplicationScopeCreatorsAtStartup</param-name>

            <param-value>true</param-value>

            </init-param>

            <load-on-startup>1</load-on-startup>

            </servlet>

            

第一个 servlet init-param，activeReverseAjaxEnabled 将激活轮询和 Comet 功能。第二个 initApplicationScopeCreatorsAtStartup 通知 DWR 在应用程序启动时初始化 ReverseAjaxTracker。这将在对 bean 生成第一个请求时改写延迟初始化（lazy initialization）的常规行为 —— 在本例中这是必须的，因为客户机不会主动对 ReverseAjaxTracker 调用方法。

最后，我需要实现调用自 DWR 的客户端 JavaScript 函数。将向回调函数 —— updateCoordinate() —— 传递 GpsCoord Java bean 的 JSON 表示，由 DWR 的 BeanConverter 自动序列化。该函数将从坐标中提取 longitude 和 latitude 字段，并通过调用 Document Object Model (DOM) 将它们附加到列表中。清单 13 展示了这一过程，以及页面的 onload 函数。onload 包含对 dwr.engine.setActiveReverseAjax(true) 的调用，将通知 DWR 打开与服务器的持久连接并等待回调。

                

            window.onload = function() {

            dwr.engine.setActiveReverseAjax(true);

            }

            

            function updateCoordinate(coord) {

            if (coord) {

            var li = document.createElement("li");

            li.appendChild(document.createTextNode(

            coord.longitude + ", " + coord.latitude)

            );

            document.getElementById("coords").appendChild(li);

            }

            }

            

不使用 JavaScript 更新页面 如果希望最小化应用程序中使用的 JavaScript 代码的数量，可以使用 ScriptSession 编写 JavaScript 回调：将 ScriptSession 实例封装在 DWR Util 对象中。该类将提供直接操作浏览器 DOM 的简单 Java 方法，并在后台自动生成所需的脚本。

现在我可以将浏览器指向跟踪器页面，DWR 将在生成坐标数据时把数据推入客户机。该实现输出生成坐标的列表，如 图 2 所示：

可以看到，使用 Reverse Ajax 创建事件驱动的 Ajax 应用程序非常简单。请记住，正是由于 DWR 使用了 Jetty Continuations，当客户机等待新事件到来时不会占用服务器上面的线程。

此时，集成来自 Yahoo! 或 Google 的地图部件非常简单。通过更改客户端回调，可轻松地将坐标传送到地图 API，而不是直接附加到页面中。图 3 展示了 DWR Reverse Ajax GPS 跟踪器在此类地图组件上标绘随机路线：

回页首

结束语

通 过本文，您了解了如何结合使用 Jetty Continuations 和 Comet 为事件驱动 Ajax 应用程序提供高效的可扩展解决方案。我没有给出 Continuations 可扩展性的具体数字，因为实际应用程序的性能取决于多种变化的因素。服务器硬件、所选择的操作系统、JVM 实现、Jetty 配置以及应用程序的设计和通信量配置文件都会影响 Jetty Continuations 的性能。然而，Webtide 的 Greg Wilkins（主要的 Jetty 开发人员）曾经发布了一份关于 Jetty 6 的白皮书，对使用 Continuations 和没有使用 Continuations 的 Comet 应用程序的性能进行了比较，该程序同时处理 10000 个并发请求（参阅 参考资料）。在 Greg 的测试中，使用 Continuations 能够减少线程消耗，并同时减少了超过 10 倍的栈内存消耗。

您 还看到了使用 DWR 的 Reverse Ajax 技术实现事件驱动 Ajax 应用程序是多么简单。DWR 不仅省去了大量客户端和服务器端编码，而且 Reverse Ajax 还从代码中将完整的服务器-推送机制抽象出来。通过更改 DWR 的配置，您可以自由地在 Comet、轮询，甚至是 piggyback 方法之间进行切换。您可以对此进行实验，并找到适合自己应用程序的最佳性能策略，同时不会影响到自己的代码。

如果希望对自己的 Reverse Ajax 应用程序进行实验，下载并研究 DWR 演示程序的代码（DWR 源代码发行版的一部分，参阅 参考资源）将非常有帮助。如果希望亲自运行示例，还可获得本文使用的示例代码（参见 下载）。

回页首

下载

	关于下载方法的信息

参考资料

• 您可以参阅本文在 developerWorks 全球站点上的 英文原文 。
  
  
• “Comet: Low Latency Data for the Browser”：Alex Russell 是 Dojo Toolkit 的项目主管和 Dojo Foundation 的主席，他在这篇博客文章中提出了 Comet 这个术语。
  
  
• Jetty：Jetty 是一种开源的基于标准的 Web 服务器，完全使用 Java 语言实现。
  
  
• “Ajax, Comet and Jetty”（Greg Wilkins，Webtide，2006 年 1 月）：Wilkins 的这份白皮书讨论了扩展 Ajax 连接的 Jetty 架构方法。
  
  
• Continuations：了解更多关于 Jetty 的 Continuations 特性的信息。
  
  
• Direct Web Remoting (DWR): DWR 是用于编写 Ajax Web 应用程序的开源 Java 库，使浏览器中的 JavaScript 能够与服务器中的 Java 代码进行交互。
  
  
• “Merlin 给 Java 平台带来了非阻塞 I/O”（Aruna Kalagnanam 和 Balu G, developerWorks，2002 年 3 月）：阅读这个 Java 非阻塞 I/O 包，由 JDK 1.4 引入。
  
  
• developerWorks Java 技术专区：提供了关于 Java 编程各个方面的数百篇文章。
  
  
• 浏览 技术书店，查阅有关本文所述主题以及其他技术主题的书籍。
  
  

• Jetty：下载 Jetty。
  
  
• DWR：下载 DWR。