总之，一个新兴事物的诞生之初，有不同的观点进行争论是很正常的现象。作者作为支持Ajax的一派，对这个新生事物，可以说是倾注了很多精 力。从最初的不懂，到略知一二，再到深刻认识，发现Ajax背后隐藏的趋势，多少有些亢奋。凭此文，希望能够把自己的观点，表达一二。

　　Ajax在2005年异军突起，伴随着Web2.0，成为了本年度最为流行的名词之一。很多人看到这样一门技术，可能会很奇怪，感到很突兀。

• 　　为什么会突然产生这样一种技术?
• 　　类似的技术早就有，Ajax有什么突破?
• 　　为什么这种技术如此盛行，并被某些人认为是一种趋势呢?

　　如果你仅仅试图从Ajax本身去寻找这些问 题的答案，你可能会一无所获。如果你仅能够看到Ajax本身，那就如同瞎子摸象、管中窥豹，不能领略全局，当然也不能领会其意义。相反，如果你能够从一个 更好的高度上去思考Ajax所带来的好处，把Ajax放到一个相关的语境中去体会，你就会有另一番发现。

　　与Ajax相连的，还有这么两个名词—RiA和Web2.0。

　　什么是RiA?

　　RiA就是Rich Internet Application的缩写。

　　“Rich”代表功能强大，高交互性，高用户体验。

　　“Internet”代表方便。应用程序部署方便，用户使用方便。跨系统，跨语言。

　 　其实RiA实际上一种基于Web的C/S架构(我称之为C/S/B)。由于有一个客户端，所以RiA应用可以提供强大的功能，让用户体验到高交互性，高 用户体验。同时，RiA又是基于Internet浏览器的应用，所以，用户使用RiA非常方便。理想来说，用户使用RiA应当像现在使用普通网页一样方 便。用户不需要安装任何的客户端软件，只要拥有浏览器。当用户通过浏览器发出指令，希望运行某种RiA应用程序时，一切都会飞快的建立在客户端机器上，就 像你在Web上点击一个页面一样。

　　目前，典型的RiA的代表有如下几种技术:

• 　　MS ClickOnce
• 　　Sun Java Web Start
• 　　Adobe Flash
• 　　Ajax

　　应该说，各大厂商均看到了RiA美好的未来，纷纷行动起来希望分一杯羹。只有Ajax技术在这些技术中有些特立独行。

　 　Ajax并不属于任何厂商，相反，Ajax代表的是一种开源的风格。由于Ajax所采用的各种技术要么是基于标准的，要么也没有被各大厂商所垄断，所以 Ajax真正是一个平民化的技术，谁都可以用它。同时，由于Ajax采用的各种技术基于现有的浏览器，所以兼容性最好。用Ajax技术建立的网站，目前均 可以直接运行，不需要任何客户端的改变。

　　其他的各种技术与Ajax比较起来，目前或多或少的还有些兼容性的问题。虽然这些技术功能强 大，但是目前它们应用起来还并不是很方便。不过可以看到，随着时间的推进，相信，未来还是属于功能更强大的一方。除非Ajax本身的功能有所加强。这样， 就看Javascript的功力了。

　　RiA实际上代表的是一种回归。

　　最开始流行的C/S结构，因为功能强大，而且范围有限，不需要害怕部署问题。之后随着用户的增加，部署问题越来越大，导致B/S模式的产生。

　 　B/S模式虽然功能有限，但是却使用非常方便。从长期来看，方便的作用还是非常巨大的。功能可以不断增强，但是如果不方便，将吓走所有的客户。实际上观 察一下Web的发展，就会发现，如今百花齐放的Web开发技术，其目的都是为了提高B/S架构的交互性，让他更能适应需要而已。

　　不过， 随着目前越来越多的应用需要一直到Web上，人们终于发现B/S模式的缺点。各种技术上的硬性问题均限制着B/S模式的发展。从最基本的请求/相应模型， HTTP协议，到所有负载均运行在服务器上的事实，让我们迫切需要一种方式来提高Web的交互能力，但同时又不能丧失它的使用方便性。

　　于是，RiA诞生了。RiA就是基于浏览器的C/S结构。它将部分的服务器负载转移到客户端，同时又不会丧失使用和部署上的方便性。所以说，RiA就是一次回归，只不过这次回归我们没有原地不动，相反，我们找到了最佳结合点。如图1所示:

　　图1、RiA就是一种回归

　　但是，我们知道了RiA是一种回归。可是，为什么RiA会盛行呢?这就需要我们把RiA放到Web2.0的环境中去思考。

　　什么是Web2.0?

　　目前，对于Web2.0并没有明确的定义。在《What Is Web 2.0》这篇文章里，对Web2.0应用所需要具备的各种特点进行了总结，并且提了出来。

• 　　Services, not packaged software, with cost-effective scalability
• 　　Control over unique, hard-to-recreate data sources that get richer as more people use them
• 　　Trusting users as co-developers
• 　　Harnessing collective intelligence
• 　　Leveraging the long tail through customer self-service
• 　　Software above the level of a single device
• 　　Lightweight user interfaces, development models, AND business models

　　虽然有这么多特性，但是Web2.0背后最本质的东西就只有两点:

1. 　　软件向服务化发展，向平台化发展
2. 　　Web由原来“Publisher”的观点，发展成“Participation”的观点。

　　正是基于这两点，Web2.0时代迫切需要一种使用方便，高交互性的应用程序，而此重任，就落在了RiA身上。

　　通过图2，你可以看到由Web1.0到Web2.0的变化。

　　图2、Web1.0向Web2.0的演变

　 　还是在《What Is Web 2.0》那篇文章里，勾勒出了一幅Web2.0的Meme Map。这张图的中心代表的是Web2.0的核心概念，而旁边是Web2.0概念的延伸。在这张图里，我试图勾勒出一些迫切需要RiA的特征点。实际上， 你可以看到，在Web2.0的Meme Map里，到处充满了RiA的倩影。如图3所示:

　　图3、Web2.0中的RiA倩影

　　看看大象本身

　　介绍了这么多，让我们总结一下。

　　随着软件和互联网的发展，需求导致一种新的计算模型出现。这种计算模型的特色就是，软件逐渐的有前台推向后台，以平台的方式提供服务，让用户在前台表演。

　　计算模型的变化，导致Web2.0的出现。尽管仅仅是开始，但是，从Web2.0的身上你依然可以依稀看到这种变化的趋势。不过Web2.0要想有如此变化，要想让用户参与进来，就必须提供一个用户功能强大的，使用方便的用户接口(UI)。

　　于是，需求导致了RiA的出现。RiA提供了一个满足需求的用户接口，使得大家可以参与到Web2.0中来。但是，RiA要想应用起来，可能还需要一个过程。

　　于是，几种RiA技术中，目前使用起来最合适的Ajax凸现出来。正是由于Ajax出色的兼容性，让他走到了历史的前台。有了它，我们开始了一场新的革命。

　　图4显示了这些名词之间的关系。把它们放在一起看，也许你会发现不一样的东西。

　　图4、Ajax、RiA与Web2.0

　　未来的样子

　　当我走在北京的街头，我在想，如果我有一台智能手机，可以访问百度的map服务，也许我就不会像现在这样担心迷路了。实际上，类似的例子还有很多。如果Web2.0的明天已经到来，我们的生活会发生很多改变。

　　我不知道，尽管我很想知道。如果我真的能够看到未来的样子，再具备一些必要的执行力的话，也许我就是下一个比尔。不过，看到目前的这一点，已经令我非常兴奋。不管怎么样，我们都有权利想象。也有权利，用我们的手去改变世界。

　　怎么样?开始吧?Let’s do it!

　　<span>SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，<span>标识符允许你将一个段落分成不同的部分。

　　还有一个标识符具有类似的功能，<div>DIV也被用来在HTML文件中建立逻辑部分。但与<div>SPAN不同，<div>工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。

容就换成与所点搜索项有关的，这是如何实现的呢？我要做这个功能

一.资源类网站

1,国内网站

1)Ajax中国(推荐)

一个专业的ajax技术网站,分类清晰,有大量的电子版教程,以及AJAX源码下载!

www.okajax.com

2)ajaxcn.org

李琨老师的blog。李琨:《ajax实战》译者.

www.ajaxcn.org

3)www.ajaxw3c.com

2,国外网站

1)、Ajax的诞生

Ajax:ANewApproachtoWebApplications

www.adaptivepath.com/publications/essays/archives/000385.php

2)、AJAXMatters

www.ajaxmatters.com

关于Ajax技术一个信息量非常大的网站，有点像Ajax世界中的TSS。

3)、AJAXPatterns

与AJAX设计模式相关的资源。

www.ajaxpatterns.org

www.softwareas.com/ajax-patterns

4)、http://www.ajaxian.com

二.热门文章

1.什么是AJAX

www.okajax.com/info/net/20060510.html

2.ajax技术简介

www.okajax.com/info/basic/200604654.html

3.ajax.net

www.okajax.com/info/basic/200604556.html

www.okajax.com/info/tech/200605589.html

weblogs.asp.net/mschwarz/archive/2005/04/11/399893.aspx(英文)

三.ajax相关下载（电子书教程/源码）

1.Ajax基础教程电子版

www.okajax.com/info/bookdown/200604950.htm

2.《AJAX实战》ajaxinaction电子版

www.okajax.com/info/bookdown/200604366.htm

3.AJAX开发简略

www.okajax.com/info/bookdown/20060538.htm

4.AJAX版CD管理系统(jsp)

www.okajax.com/info/codedown/200604327.htm

5.Alexa查询系统(Xmlhttp+Ajax)

www.okajax.com/info/codedown/200604982.htm

6.ASP.NET+AJAX解决网页打开等待问题

www.okajax.com/info/codedown/200604166.htm

7.Ajax技术简介(ajaxdemo)

www.okajax.com/info/codedown/200604576.htm

四.ajax相关图书

1.《Ajax实战》(目前Ajax领域最为全面深入的一本著作)

www.china-pub.com/computers/common/info.asp?id=28433

2.《Ajax基础教程》（亚马逊计算机榜首图书，国内第1本Ajax图书，中文pdf版）

http://www.devworld.cn/art2527.aspx

3.《Ajax修炼之道-Web2.0入门》（Ajax从小工到专家的首选图书）

www.china-pub.com/computers/common/info.asp?id=29430

4.《征服Ajax+Lucene构建搜索引擎》

www.china-pub.com/computers/common/info.asp?id=29996

5.《征服Ajax--Web2.0快速入门与项目实践（.net）》

www.china-pub.com/computers/common/info.asp?id=29995

6.《Ajax开发精要--概念、案例与框架》

www.china-pub.com/computers/common/info.asp?id=30006

7.AJAX——新手快车道
           
http://www.sp1.cn/ajax/info/bookdown/200605663.htm

8,Ajax 探密 (Ajax Hacks )

http://www.sp1.cn/ajax/info/bookdown/20060540.htm

9.Ajax基础教程电子版
           
http://wh.wlha.com.cn/bbs/pic/ajaxbasic.rar
               

五.部分技术文章

www.dragonson.com/doc/ajax.html

Ajax内部交流文档

info96.k12studio.com/~nio/comments.php?id=242_0_1_0_C

简单地对Ajax进行描述介绍

www.adaptivepath.com/publications/essays/archives/000385.php

Ajax:ANewApproachtoWebApplications

jibbering.com/2002/4/httprequest.html

UsingtheXMLHTTPRequestobject

developer.apple.com/internet/webcontent/xmlhttpreq.html

DynamicHTMLandXML:TheXMLHttpRequestObject

del.icio.us/popular/ajax

www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples

XMLHttpRequest&AjaxWorkingExamples

www.xml.com/lpt/a/2005/02/09/xml-http-request.html

VeryDynamicWebInterfaces

www.standards-schmandards.com/index.php?2005/03/01/16-ajax-and-accessibility

AJAXandAccessibility

www.xml.com/lpt/a/2005/05/11/ajax-error.html

ErrorsandAJAX

www.softwareas.com/ajax-patterns

AJAXPatterns:DesignPatternsforAJAXUsability

www.backbase.com/download/Whitepaper%20Backbase%20AJAX%20and%20Beyond.pdf

WhitepaperBackbaseAJAXandBeyond

www.ajaxpatterns.org/index.php?title=Main_Page

AJAXpatterns

www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html

六、补充内容

在增加一个,有些基础教程,虽然不多，但是都蛮有用的!
http://www.sp1.cn/ajax/info/basic/index.htm 

Ajax & XMLHttpRequset
http://tech.acnow.net/Html/Web/ASP/ASP_Skill/2006-6/15/163322869.shtml

了解Ajax框架
http://kb.csdn.net/java/Articles/200606/0964add7-c017-484e-9652-5d85030222c5.html 

标题 实现无刷新闪烁二级联动下拉菜单
http://www.seaskyer.net/Index/Catalog11/266.html

February 18, 2005

If anything about current interaction design can be called “glamorous,” it’s creating Web applications. After all, when was the last time you heard someone rave about the interaction design of a product that wasn’t on the Web? (Okay, besides the iPod.) All the cool, innovative new projects are online.

Despite this, Web interaction designers can’t help but feel a little envious of our colleagues who create desktop software. Desktop applications have a richness and responsiveness that has seemed out of reach on the Web. The same simplicity that enabled the Web’s rapid proliferation also creates a gap between the experiences we can provide and the experiences users can get from a desktop application.

That gap is closing. Take a look at Google Suggest. Watch the way the suggested terms update as you type, almost instantly. Now look at Google Maps. Zoom in. Use your cursor to grab the map and scroll around a bit. Again, everything happens almost instantly, with no waiting for pages to reload.

Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.

Defining Ajax

Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:

• standards-based presentation using XHTML and CSS;
• dynamic display and interaction using the Document Object Model;
• data interchange and manipulation using XML and XSLT;
• asynchronous data retrieval using XMLHttpRequest;
• and JavaScript binding everything together.

The classic web application model works like this: Most user actions in the interface trigger an HTTP request back to a web server. The server does some processing — retrieving data, crunching numbers, talking to various legacy systems — and then returns an HTML page to the client. It’s a model adapted from the Web’s original use as a hypertext medium, but as fans of The Elements of User Experience know, what makes the Web good for hypertext doesn’t necessarily make it good for software applications.

Figure 1: The traditional model for web applications (left) compared to the Ajax model (right).

This approach makes a lot of technical sense, but it doesn’t make for a great user experience. While the server is doing its thing, what’s the user doing? That’s right, waiting. And at every step in a task, the user waits some more.

Obviously, if we were designing the Web from scratch for applications, we wouldn’t make users wait around. Once an interface is loaded, why should the user interaction come to a halt every time the application needs something from the server? In fact, why should the user see the application go to the server at all?

How Ajax is Different

An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true.

Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine — written in JavaScript and usually tucked away in a hidden frame. This engine is responsible for both rendering the interface the user sees and communicating with the server on the user’s behalf. The Ajax engine allows the user’s interaction with the application to happen asynchronously — independent of communication with the server. So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something.

Figure 2: The synchronous interaction pattern of a traditional web application (top) compared with the asynchronous pattern of an Ajax application (bottom).

Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn’t require a trip back to the server — such as simple data validation, editing data in memory, and even some navigation — the engine handles on its own. If the engine needs something from the server in order to respond — if it’s submitting data for processing, loading additional interface code, or retrieving new data — the engine makes those requests asynchronously, usually using XML, without stalling a user’s interaction with the application.

Who’s Using Ajax

Google is making a huge investment in developing the Ajax approach. All of the major products Google has introduced over the last year — Orkut, Gmail, the latest beta version of Google Groups, Google Suggest, and Google Maps — are Ajax applications. (For more on the technical nuts and bolts of these Ajax implementations, check out these excellent analyses of Gmail, Google Suggest, and Google Maps.) Others are following suit: many of the features that people love in Flickr depend on Ajax, and Amazon’s A9.com search engine applies similar techniques.

These projects demonstrate that Ajax is not only technically sound, but also practical for real-world applications. This isn’t another technology that only works in a laboratory. And Ajax applications can be any size, from the very simple, single-function Google Suggest to the very complex and sophisticated Google Maps.

At Adaptive Path, we’ve been doing our own work with Ajax over the last several months, and we’re realizing we’ve only scratched the surface of the rich interaction and responsiveness that Ajax applications can provide. Ajax is an important development for Web applications, and its importance is only going to grow. And because there are so many developers out there who already know how to use these technologies, we expect to see many more organizations following Google’s lead in reaping the competitive advantage Ajax provides.

Moving Forward

The biggest challenges in creating Ajax applications are not technical. The core Ajax technologies are mature, stable, and well understood. Instead, the challenges are for the designers of these applications: to forget what we think we know about the limitations of the Web, and begin to imagine a wider, richer range of possibilities.

It’s going to be fun.

    从最简单的角度来说，DWR 是一个引擎，可以把服务器端 Java 对象的方法公开给 JavaScript 代码。使用 DWR 可以有效地从应用程序代码中把 Ajax 的全部请求-响应循环消除掉。这意味着客户端代码再也不需要直接处理 XMLHttpRequest 对象或者服务器的响应。不再需要编写对象的序列化代码或者使用第三方工具才能把对象变成 XML。甚至不再需要编写 servlet 代码把 Ajax 请求调整成对 Java 域对象的调用。

    DWR 是作为 Web 应用程序中的 servlet 部署的。把它看作一个黑盒子，这个 servlet 有两个主要作用：首先，对于公开的每个类，DWR 动态地生成包含在 Web 页面中的 JavaScript。生成的 JavaScript 包含存根函数，代表 Java 类上的对应方法并在幕后执行 XMLHttpRequest。 这些请求被发送给 DWR，这时它的第二个作用就是把请求翻译成服务器端 Java 对象上的方法调用并把方法的返回值放在 servlet 响应中发送回客户端，编码成 JavaScript。DWR 还提供了帮助执行常见的用户界面任务的 JavaScript 工具函数。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
概述

这篇文章阐述了使用开源项目DWR(直接Web远程控制)和AJAX(异步JavaScript和XML)的概念来提高Web应用的可用性。作者一步步来展示DWR如何使得AJAX的应用既简单又快捷。（1600字;2005年6月20日）

AJAX， 或者说是异步JavaScript和XML，描述了一种使用混合了HTML(或XHTML)和层叠样式表作为表达信息,来创建交互式的Web应用的开发技 术;文档对象模型（DOM），JavaScript,动态地显示和与表达信息进行交互;并且，XMLHttpRequest对象与Web服务器异步地交换 和处理数据。

因特网上许多例子展示了在一个HTML文件内部使用XMLHttpRequest与服务器端进行交互的必要的步骤。当手工地 编写和维护XMLHttpRequest代码时，开发者必须处理许多潜在的问题，特别是类似于跨浏览器的DOM实现的兼容性这样的问题。这将会导致在编码 和调试Javascript代码上面花费数不清的时间，这显然对开发者来说很不友好。

DWR(直接Web远程控制)项目是在Apache 许可下的一个开源的解决方案，它供给那些想要以一种简单的方式使用AJAX和XMLHttpRequest的开发者。它具有一套Javascript功能 集，它们把从HTML页面调用应用服务器上的Java对象的方法简化了。它操控不同类型的参数，并同时保持了HTML代码的可读性。

DWR 不是对一个设计的插入，也不强迫对象使用任何种类的继承结构。它和servlet框架内的应用配合的很好。对缺少DHTML编程经验的开发者来说，DWR 也提供了一个JavaScript库包含了经常使用的DHTML任务，如组装表，用item填充select下拉框，改变HTML元素的内容，如< div>和<span>
DWR网站是详尽的并且有大量的文档，这也是这篇文章的基础。一些例子用来展示DWR如何使用和用它的库可以完成什么样的工作。

这篇文章让读者看到了一个使用了DWR的Web应用是如何一步步建立的。我会展示创建这个简单的示例应用的必要的细节，这个应用是可下载的并且可以在你的环境中布署来看看DWR如何工作。
注意：找到有关AJAX的信息并不困难;网页上有几篇文章和博客的条目涵盖了这个主题，每一个都试图指出和评论这个概念的不同的方面。在资源部分，你会找到一些有趣的指向示例和文章的链接，来学习AJAX的更多的内容。

示例应用
这篇文章使用的示例应用模拟了多伦多的一个公寓出租搜索引擎。用户可以在搜索前选择一组搜索标准。为了提高交互性，AJAX中以下两种情况下使用：
·应用通告用户配合他的选择会返回多少搜索结果。这个数字是实时更新的-使用AJAX-当用户选择的卧室和浴室的数量，或者价格范围变化时。当符合标准的搜索结果没有或太多时，用户就没有必要点击搜索按纽。
·数据库查询并取回结果是由AJAX完成的。当用户按下显示结果按钮时，数据库执行搜索。这样，应用看起来更具响应了，而整个页面不需要重载来显示结果。

数据库
我们使用的数据库是HSQL，它是一种占用资源很小的Java SQL数据库引擎，可以不需要安装和配置的与Web应用捆绑在一起。一个SQL文件被用来在Web应用的上下文启动时创建一个内存中的表并添加一些记录。

Java类
应 用包含了两个主要的类叫Apartment和ApartmentDAO。Apartment.java类是一个有着属性和getter/setter方法 的简单的Java类。ApartmentDAO.java是数据访问类，用来查询数据库并基于用户的搜索标准来返回信息。ApartmentDAO类的实 现的直接了当的;它直接使用了Java数据库联接调用来得到公寓的总数和符合用户请求的可用公寓的列表。

DWR配置和使用
设 置DWR的使用是简单的：将DWR的jar文件拷入Web应用的WEB-INF/lib目录中，在web.xml中增加一个servlet声明，并创建 DWR的配置文件。DWR的分发中需要使用一个单独的jar文件。你必须将DWR servlet加到应用的WEB-INF/web.xml中布署描述段中去。

    <servlet>
        <servlet-name>dwr-invoker</servlet-name>
        <display-name>DWR Servlet</display-name>
        <description>Direct Web Remoter Servlet</description>
        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
        <init-param>
            <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>

一 个可选的步骤是设置DWR为调试模式—象上面的例子那样—在servlet描述段中将debug参数设为true。当DWR在调试模式时，你可以从 HTMl网页中看到所有的可访问的Java对象。包含了可用对象列表的网页会出现在/WEBAPP/dwr这个url上，它显示了对象的公共方法。所列方 法可以从页面中调用，允许你，第一次，运行服务器上的对象的方法。下图显示了调试页的样子:


调试页

现 在你必须让DWR知道通过XMLHttpRequest对象，什么对象将会接收请求。这个任务由叫做dwr.xml的配置文件来完成。在配置文件中，定义 了DWR允许你从网页中调用的对象。从设计上讲，DWR允许访问所有公布类的公共方法，但在我们的例子中，我们只允许访问几个方法。下面是我们示例的配置 文件:

<dwr>
    <allow>
        <convert converter="bean" match="dwr.sample.Apartment"/>
        <create creator="new" javascript="ApartmentDAO" class="dwr.sample.ApartmentDAO">
            <include method="findApartments"/>
            <include method="countApartments"/>
        </create>
    </allow>
</dwr>

上 面的文件实现了我们例子中的两个目标。首先，<convert>标记告诉DWR将dwr.sample.Apartment对象的类型转换为 联合数组，因为，出于安全的原因，DWR默认的不会转换普通bean。第二，<create>标记让DWR暴露出 dwr.sample.ApartmentDAO类给JavaScript调用;我们在页面中使用JavaScript文件被javascript属性定 义。我们必须注意<include>标记，它指明了dwr.sample.ApartmentDAO类的哪些方法可用。

HTML/JSP代码
配 置完成后，你就可以启动你的Web应用了，这时DWR会为从你的HTML或Java服务器端页面(JSP)上调用所需方法作好准备，并不需要你创建 JavaScript文件。在search.jsp文件中， 我们必须增加由DWR提供的JavaScript接口，还有DWR引擎，加入以下三行到我们的代码中：

  <script src='dwr/interface/ApartmentDAO.js'></script>
  <script src='dwr/engine.js'></script>
  <script src='dwr/util.js'></script>

我 们注意到当用户改变搜索标准时，这是AJAX在示例程序中的首次应用;正如他所看到的，当标准改变时，可用的公寓数量被更新了。我创建了两个 JavaScript函数：当某一个选择下拉框中的值变化时被调用。ApartmentDAO.countApartments()函数是最重要的部分。 最有趣的是第一个参数, loadTotal()函数，它指明了当接收到服务端的返回时DWR将会调用的JavaScript方法。loadTotal于是被调用来在HTML页面 的<div>中显示结果。下面是在这个交互场景中所使用到的JavaScript函数:

function updateTotal() {
    $("resultTable").style.display = 'none';
    var bedrooms = document.getElementById("bedrooms").value;
    var bathrooms = document.getElementById("bathrooms").value;
    var price = document.getElementById("price").value;
    ApartmentDAO.countApartments(loadTotal, bedrooms, bathrooms, price);
}

function loadTotal(data) {
    document.getElementById("totalRecords").innerHTML = data;
}

很明显，用户想看到符合他的搜索条件的公寓列表。那么，当用户对他的搜索标准感到满意，并且总数也是有效的话，他会按下显示结果的按纽，这将会调用updateResults() JavaScript方法：

function updateResults() {
    
    DWRUtil.removeAllRows("apartmentsbody");
    var bedrooms = document.getElementById("bedrooms").value;
    var bathrooms = document.getElementById("bathrooms").value;
    var price = document.getElementById("price").value;
    ApartmentDAO.findApartments(fillTable, bedrooms, bathrooms, price);
    $("resultTable").style.display = '';
}

function fillTable(apartment) {
    DWRUtil.addRows("apartmentsbody", apartment, [ getId, getAddress, getBedrooms, getBathrooms, getPrice ]);
}

其 中的一个例子就是标签导航栏（tabbed navigation）。随着[标签导航]的使用率不断上升，它已逐渐成为了站点导航的主流方式，现在是时候来讨论一下对标签导航栏的控制了。既然CSS 被广泛地支持，我们就可以用它来优化站点标签的质地和外观。你很可能会想到，CSS可以驯服平坦的无序列表。可能你已经见到过一些样式化为标签的列表，比如下面这个：

如果我们采用与上面完全相同的标记，但却把它们变成了下面的样子，该如何去做呢：

在这里，仅仅用非常简单的样式就可以实现。

创新之道

我所见过的许多基于CSS的标签都受到了一些共同特性的限制：单色的矩形块，可能在当前标签上加了轮廓，或者边框；在鼠标掠过时改变矩形的颜色等等。这就是CSS能为我们提供的全部吗？仅仅是成堆的单色方块？

早 在CSS被广泛采用之前，我们就能够看到许多在导航设计上的创新。创新的外形，可控的色彩混合，以及对现实世界中物力表面的模仿。但是这些设计通常都依赖 于将文字内嵌于图片的复杂结构或多层的表格嵌套。编辑标签上的文字或者改变它们的顺序都会引起繁重的工作。文字的缩放更是不可能，不然就会引起严重的页面 布局错误。

单纯的文字导航要比嵌入文字的图片式导航更加易于管理并且加载更迅速。而且，虽然我们可以给每个图片都加上alt属性， 但是单纯的文字导航更具有可读性，因为对于视力不好读者，这些文字都是可缩放的。也正因为如此，由CSS样式化的文字的导航栏再次成为网页设计者们的选 择，并不足为奇。但是到目前为止，大多数基于CSS的标签设计，只是后退了一步，回到了我们曾经的做法--当然这些是无法被优秀的设计作品采用的。采用一 项新技术（比如CSS）应该能够让我们创作出一些更好的东西，而不至于失去先前的表格或者图片式标签所能表现的质地。

“滑动门”技术

只 要我们用两片分离的背景图片，就能够创造出精美的手工界面，并且具有高度的灵活性，可随文字的缩放而自动适应。试想一下，左右两幅图片，就像左右两扇滑动 门一样，构成了一扇完整的门。将这两扇门推近，重叠的部分多一些，就可以适应一个比较狭窄的空间，而如果将它们拉开，重叠的部分减少，就可以满足较宽的空 间，正如下图所示：

在 这个例子中，一幅图片盖住了另一幅的某些部分。假设每幅图片的边缘都有些独特的形状，例如标签的圆角，我们不希望这些边缘被它前方图片盖住。为了防止这种 情况发生，我们将放置在前方（以左边为例）的图片制作得尽可能地窄，但是保证它能够完整地显示出边缘上的独特形状。以圆角标签为例，我们将前方的图片制作 到仅与圆角的部分同宽即可：

如 果目标物由于不同文字或文字类型而变得比上图所示的宽度更大,那么这两幅图就会被拉开,出现一个非常不美观的缺口。 这时就需要我们对可能的扩展性进行预测。 在用户缩放字体的时候，目标物会增大多少？实际上，我们至少应该为文字的缩放而作出300%的可伸缩性准备。 我们需要将背景图扩大到足够弥补缺口。 对于这些例子，我们将把后面的图像 ( 右边) 制作为 400 x150 图素, 前面的图像制作为 9 x150 图素。

要记住，背景图片只能在它所应用的元素的“门前”出现 [内容区域+补丁区域(padding)]。 这两幅图被分别安放到他们所应用的元素外侧。 而这些背景的可见部分交叠在一起构成了一个完整的标签样式:

如果标签被扩大的话，这两幅图就分别向两侧滑动，每一幅都更多地被显示出来，以满足更宽的“门”的需求。

就 比如我用Photoshop制作了两幅平滑的，略带3D效果的个性化标签图片，正如文章开头的图片所示。在另一个色彩明亮一点的版本中，这两幅图片的填充 色变的更亮，边缘的阴影更暗，这是为“当前”标签准备的。为了给上面所述的技术作示范，我们需要扩展标签背景的覆盖区域，并把它切成了两片:

那个明亮一些的版本也需要这样做，一旦这些图片都作好了（1, 2, 3, 4），我们就可以进入CSS标记部分了。

创建标签

当发现了如何利用CSS创建横向列表后，你可能会注意到，至少有两种方法能够将一组列表排列成一行。一种是用内嵌方框，另一种是利用浮动属性。它们各有利弊。而且每一种方法都会遇到CSS中非常奇怪的方面，很容易让人迷惑。

第一种方法，也是最常用的方法，就是将列表的项目属性设置为“内嵌”，这种方法由于非常简便而具有相当的吸引力。然而，对于我们将要讨论的“滑动门”技术来说，这种内嵌的方法在某些特定的浏览器上会出现渲染问题。第二种方法，也是我们所要关注的，是利用“浮动”属性将列表项排成一横行。而浮动属性也会同样令人无所适从。它们那些看来不协调的行为并不遵从自然逻辑。尽管如此，处理多个浮动元素的基本认识以及将它们确实可靠地处理为可用元素的方法依然会取得另人惊奇的效果。

我 们会在一个浮动的容器中创建多个浮动的元素。这样做是为了使外部容器紧密围绕在内容元素的周围。利用这种方法，我们可以给标签后的空白加上背景。要切记， 在标签之后布局的元素，一定要在CSS中用clear属性重新定位它的位置。这样是为了防止浮动标签影响布局中的其他页面元素的位置。

那么，现在就让我们看看这些标记语言：

<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

事实上，头部(#header)的层可能同时会包含网站的LOGO以及一个搜索框。在这个的例子中，我们会精简每个锚点（anchor）中的href值。显然，正常情况下这些值应该为锚点地址或者文件位置。

我 们最初的样式化就是让头部（#header）的层浮动。这样做是为了让这个作为容器的层能够真正地将它所容纳的那些浮动列表项包在内部。由于这个元素是浮 动的，我们需要给它标记为“100%”的宽度。再给它加上临时的黄色背景来确认这一父容器的伸缩能够正好填满标签的整个背景区域。同时设置默认文字的属 性，以保证容器内的文字看起来一致:

#header {
float:left;
width:100%;
background:yellow;
font-size:93%;
line-height:normal;
}

现在，我们将无序列表默认的内外补丁(padding)都设置为0，并将列表的项目符号去掉，给他们加上向左浮动的属性：

#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
margin:0;
padding:0;
}

我们将锚点的显示属性设置为“块(display:block;)”，这样在控制它们的时候就不必担心内嵌方框的问题了:

#header a {
display:block;
}

接下来，我们将右侧的图片添加到列表项的背景中（添加的部分用粗体显示）：

#header li {
float:left;
background:url("norm_right.gif")
no-repeat right top;
margin:0;
padding:0;
}

在加入左边的图片之前，我们先停下来看看到目前为止，效果一究竟是怎样的。

- - -

现在，我们就可以将在上方显示的左侧图片加入到锚点（内层元素）的背景中，与此同时，我们也加入了内补丁，将标签扩展，给文字与标签的边缘间添加一些空白：

#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px;
}

这些变化出现在效果二中。 看，现在标签已经有了大体的形状。对于这一点，IE5/Mac的用户可能会感到奇怪了，“这是怎么了，为什么标签会堆叠着伸展地穿过整个屏幕？”别急，我 们很快就要帮你解决这些问题。那么现在，尽可能地跟着我们继续下去，如果手头有其他浏览器的话，暂时先换一个来继续往下看。IE5/Mac的问题一定会得 到很好的解决。

- - -

这时，普通的标签背景已经做好了，接下来，需要为“当前”标签加上背景。我们通过为当前标签内的锚点加上id=“current”来实现对它的定位。由于并不需要改变当前标签的其他设置，只需要更换背景，所以我们仅用以下的代码即可：

				#header #current {
background-image:url("norm_right_on.gif");
}
#header #current a {
background-image:url("norm_left_on.gif");
}
				

		

在标签的下方，我们想要有边框出现，但是如果用对父容器#header设置下边框的的方法，那么就无法消除当前标签的下边框。因此，我们用创建一幅新图片的方法来代替，这幅图片的底部包含了我们想要的边框，同时将图片的颜色设置为少许的梯度，就像下面这幅：

我们将这幅图片用于容器#header的背景（代替了我们刚才所用的黄色），并将它设置为底部对齐，给容器设置与之相应的背景色。同时，将body的内补丁移除，给列表ul的上，左，右侧，分别加上10像素的内补丁：

#header {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif")
repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}

要 完成标签导航栏，还需要将当前标签的下边框消除。你可能会想到，给其他标签加上与#header背景色完全相同的下边框，然后给当前标签加上一个白色的下 边框。然而，那些观察非常仔细的人还是会在这样的做法中发现些许破绽。我们用给锚点加上内补丁的方法来替代它，这样就可以创建出完美的方形边角了。在下面 经过放大的示意图中就可以看出区别：

为了实现这样的效果，我们为其他标签设置了4像素的内补丁，而当前标签的设置为5像素：

#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px 4px;
}
#header #current a {
background-image:url("norm_left_on.gif");
padding-bottom:5px;
}

上面的代码保证了在效果三中下边框只出现在其他标签上，而不出现在当前标签上。

打磨完工

敏 锐的目光可能会发现，在上一效果图中，圆角标签的角落上仍然留有白色的色块。这些前方图片上的不透明的边角挡住了导航栏的背景。从理论上说，我们可以将这 些边角的背景修改为与导航栏背景色一致来达到看似透明的效果。但是我们的导航标签可能会改变高度，超过背景的范围，或者背景色出现更改。因此，不如直接将 前方背景的边角设置为透明，这样更为方便。如果圆角是抗锯齿的话，我们可以让它的边缘以背景色进行柔化。

现在边角透明了，可是右侧图片的一部分出现在左侧透明的边角后。为了抵消它，我们在项目列表的左侧加上与左侧图片相同大小的9像素的内补丁。由于项目列表加上了左内补丁，就需要在锚点的左侧减去一部分内补丁，以保证文字的居中(15px - 9px = 6px)：

#header li {
float:left;
background:url("right.gif")
no-repeat right top;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background:url("left.gif")
no-repeat left top;
padding:5px 15px 4px 6px;
}

然而，并不能就这样把它放在那儿，因为左侧的图片由于刚才加上的9像素的内补丁而被推开了。既然左右两幅图片的内边缘已经相连了，我们就没必要非将左侧的图片保持在上方。因此，我们交换一下左右两幅图片，让他们应用到对方的元素上。当然，当前标签也需要这样做：

#header li {
float:left;
background:url("left.gif")
no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a, #header strong, #header span {
display:block;
background:url("right.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
}
#header #current {
background-image:url("left_on.gif");
}
#header #current a {
background-image:url("right_on.gif");
padding-bottom:5px;
}

一旦这样做好了，就完成了效果四。 注意，为了使边角透明而做的这一系列调整使得每个标签的左侧都有一小部分不可点击。这一非活动区域是在文字之外的，所以并不是非常引人注目。并不是每个站 点都要求标签背景是透明的，如果不希望有这一小部分非活动区域的话，尽可以用纯色的背景和方角来代替透明和圆角。在我们的例子中，依然保持透明和圆角的效 果。

- - -

剩下的调整就很简单了，我们一并来完成：将标签字体设置为粗体，正常标签的字体颜色设置为棕色，当前标签颜色设置为深灰色，去掉下滑线，将鼠标悬浮时的字体颜色同样设置为深灰色。这些增加的变化在效果五中表现出来。

一致性的特例

在效果二之后，我们认识到，在IE5/Mac中，标签被扩大到与页面同宽，导致了他们垂直堆叠在下一个的上方，这并不是我们想要的效果。

在大多数浏览器中，浮动会引起收缩的效果-它会收缩到仅能容纳其所含元素的最小空间。如果浮动元素中包含的是图片，那么它会收缩到与图片大小相同，如果仅包含文字的话，它会收缩到与最长的不换行文字同宽。

而 在IE5/Mac中，当一个自动调整宽度的块级元素（block-level element）被插入到另一浮动元素中时，就会出现问题。其他浏览器依然会尽可能地收缩浮动元素，并不理会它所容纳的块级元素。但是IE5/Mac在这 种情况下并不收缩浮动元素，反而将浮动和块级元素扩展到最大的可用宽度。在这种情况下，我们需要将锚点也同时浮动，但是仅在IE5/Mac中这样做，以免 影响到其他浏览器。之后，我们就可以用反斜杠注释法（Commented Backslash Hack）来隐藏这些代码，使其仅在IE5/Mac下工作：

#header a {
float:left;
display:block;
background:url("right.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */

这回，IE5/Mac浏览器应该显示我们所希望的效果了，见效果六。 在非IE5/Mac浏览器中，应该没有任何变化。注意，IE5.0/Mac中出现了很多渲染错误，在IE5.1中已得到更正。因此，在IE5.0中出现的 错误已经超出了我所应该作为特例而修改的范畴了。由于现在升级到5.1并不困难，而OS 9 Macs用户中仍然使用IE5.0的已经相当的少了。

适用性

我 们刚刚看过如何运用滑动门技术创建纯文本的导航标签,它们是由一系列锚点组成的无序列表标记而成,并赋予一些个性化的样式。它加载快速,易于维护,并且可 以在不破坏原有设计的同时对其文本进行大比例的缩放。那么这项技术足够灵活吗？可以胜任创建各种类型的精美导航栏的任务吗?

无需怀疑，这项技术的使用只局限于我们的想象力。最终效果只展示出了其中一种可能性。但是我们不应被一种设计局限了自己的想法.

例如,标签没必要非得对称。我很快就制作出这些标签的2.0版， 在这个版本中，并没有使用3D阴影效果,这样更利于展示平面色彩,有角的边缘，以及更宽,更细致的左边框。正如2.0版所示，我们甚至可以交换左右两幅图 片的位置，当然，这些均取决于你的设计。通过细致的计划和巧妙的图片处理,我们尽可以将下边框彻底放弃,这更有利于标签图片与背景的搭配,就如在我充满灵 感的3.0版中所表现的那样。如果你的浏览器支持在样式表间切换的话,你甚至可以看到这个主文件在三个不同的版本的样式间切换（注：Firefox和Opera支持样式切换）。

其 他我们没有讨论到的效果可以基于这项技术使用。在一路举来的这个例子中,我只改变了鼠标悬浮时的文字颜色，但除此之外你还可以将整个背景替换掉，以创造出 更为有趣的翻转效果。只要有两个嵌套的HTML元素标记，就可以利用CSS为他们加上背景，创造出我们甚至想都没想过的的效果。在这个例子中我制作了一个 水平的导航标签,但是滑动门技术在其他许多情况下都是可以使用的。

那么,你会用它做什么呢?