BlogJava-VincentChen‘s Blog-文章分类-AJAXhttp://www.blogjava.net/Vencent/category/7763.html<font color='orange'>本博客仅为收集所用。在此对原作者表示感谢。</font> <center> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><div class="custom"> <script type="text/javascript"><!-- google_ad_client = "pub-6256612161572960"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_type = "text"; google_ad_channel =""; google_page_url = document.location; google_color_border = ["FFDDAA","FFDDAA","FFDDAA","FFDDAA"]; google_color_bg = ["EEEEEE","EEEEEE","EEEEEE","EEEEEE"]; google_color_link = ["FFDDAA","0033FF","00008B","99CC33"]; google_color_url = ["999999","0033FF","00008B","FFCC00"]; google_color_text = ["0033FF","AA9999","0033FF","AA9999"]; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div></center> <bgsound src="http://www.blogjava.net/Files/Vencent/The%20Mass%20Era.zip" volume="10" loop="10"/>zh-cnMon, 14 May 2007 07:21:44 GMTMon, 14 May 2007 07:21:44 GMT60转载：On having layouthttp://www.blogjava.net/Vencent/articles/117308.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Mon, 14 May 2007 04:53:00 GMThttp://www.blogjava.net/Vencent/articles/117308.htmlhttp://www.blogjava.net/Vencent/comments/117308.htmlhttp://www.blogjava.net/Vencent/articles/117308.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/117308.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/117308.html          On having layout

　　译者注：一篇很好的文章，很久以前在blog上就推荐过，这两天断断续续花了点时间翻译了一下，推荐读读。英文原文在此。

　　文中所有的 layout 这个单词都未作翻译，一来本身这个单词意思就比较多，翻成啥都觉得别扭，二来它也是专有的属性，所以就意会一下吧。水平有限，很多地方都是模模糊糊地意译，发现错误欢迎留言指出。

　　引用一段来自Dean Edwards的评价：

　　I recommend that every CSS designer and DOM scripter read this. Understanding “layout” gives a huge insight into lots of other IE bugs and idiosyncrasies.

(Dean Edwards)

介绍

　　Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为“尺寸bug(dimensional bugs)”，意思是这些 bug 可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout”的一个问题：为什么它会改变元素的渲染特性，为什么它会影响到元素之间的关系？这个问题问得很好，但却很难回答。在这篇文章中，我们专注于这个复杂问题会有那些方面的表现，某一方面的具体讨论和范例请参考文中给出的相关链接。

hasLayout — 定义

　　“Layout”是一个 IE/Win 的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等，这有点类似于一个窗体的概念。

　　微软的开发者们认为盒状元素(box-type elements)应该具有一个“属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 layout , 也就是 hasLayout。

　　hasLayout 其实既不是一个属性更不是一个行为，而是 IE 这个渲染引擎代代继承一贯拥有的一个渲染概念，在这个概念下渲染的元素将具有一种特性。

　　实际上这种渲染特性在有些 HTML 元素中与身俱来，而在另外一些元素中也可以通过一些 CSS 属性将其触发为 true ，且一旦触发将不可逆转。

术语

　　当我们说一个元素“拥有layout”或“得到layout”，或者说一个元素“has layout” 的时候，我们的意思是指它的微软专有属性 hasLayout 被设为了 true 。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。

　　而“无layout元素”，是指 hasLayout 未被触发的元素，比如一个未设定宽高尺寸的干净 div 元素就可以做为一个 “无layout祖先”。

　　给一个默认没有 layout 的元素赋予 layout 的方法包括设置可触发 hasLayout = true 的 CSS 属性。参考默认 layout 元素以及这些属性列表。没有办法设置 hasLayout = false ， 除非把一开始那些触发 hasLayout = true 的 CSS 属性去除。

问题种种

　　hasLayout 的问题不管新手还是老手，不管设计师或者程序员可能都遇到过。具有 layout 的元素通常有着不同寻常而且难以预料的的显示效果，而且有时甚至会牵连到他们的孩子元素。

　　一个元素是否具有“layout”可能会引发如下的一些问题：

  • IE 很多常见的浮动 bug 。
  • 元素本身对一些基本属性的异常处理问题。
  • 容器和其子孙之间的边距重叠(margin collapsing)问题。
  • 使用列表时遇到的诸多问题。
  • 背景图像的定位偏差问题。
  • 使用脚本时遇到的浏览器之间处理不一致的问题。

　　上面的列表只是列出一个大概，也不完善。下面的文章将尽可能详细彻底的描述有无“layout”所带来的各种问题。

Layout 从何而来

　　不同于标准属性，也不像某些浏览器的私有 CSS 属性，layout 无法通过某一个 CSS 声明直接设定 。也就是说没有“layout属性”这么一个东西，元素要么本身自动拥有 layout，要么借助一些 CSS 声明悄悄地获得 layout。

默认layout元素

　　下列元素应该是默认具有 layout 的：

  • <html>, <body>
  • <table>, <tr>, <th>, <td>
  • <img>
  • <hr>
  • <input>, <select>, <textarea>, <button>
  • <iframe>, <embed>, <object>, <applet>
  • <marquee>
属性

　　下列 CSS 属性和取值将会让一个元素获得 layout：

position: absolute
绝对定位元素的包含区块(containing block)就会经常在这一方面出问题。
float: left|right
由于 layout 元素的特性，浮动模型会有很多怪异的表现。
display: inline-block
当一个内联级别的元素需要 layout 的时候往往就要用到它，这也可能也是这个 CSS 属性的唯一效果——让某个元素拥有 layout。“inline-block行为”在IE中是可以实现的，但是非常与众不同： IE/Win: inline-block and hasLayout 。
width: 任意值
很多人遇到 layout 相关问题发生时，一般都会先尝试用这个来修复。
height: 任意值
height: 1% 就在 Holly Hack 中用到。
zoom: 任意值 (MSDN)
MS专有属性，无法通过校验。 不过 zoom: 1 可以临时用做调试。
writing-mode: tb-rl (MSDN)
MS专有属性，无法通过校验。

　　在 IE7 中，overflow 也变成了一个 layout 触发器：

overflow: hidden|scroll|auto
这个属性在之前版本 IE 中没有触发 layout 的功能。
overflow-x|-y: hidden|scroll|auto
overflow-x 和 overflow-y 是 CSS3 盒模型中的属性，尚未得到浏览器的广泛支持。他们在之前版本IE中没有触发 layout 的功能。

　　另外 IE7 的荧幕上又新添了几个 haslayout 的演员，如果只从 hasLayout 这个方面考虑，min/max 和 width/height 的表现类似，position 的 fixed 和 absolute 也是一模一样。

position: fixed
./.
min-width: 任意值
就算设为0也可以让该元素获得 layout。
max-width: 除 none 之外的任意值
./.
min-height: 任意值
即使设为0也可以让该元素的 haslayout=true
max-height: 除 none 之外的任意值
./.

　　以上结论借助 IE Developer Toobar 以及预先测试得出。

有关内联级别元素

　　对于内联元素(可以是默认即为内联的比如 span 元素，也可以是 display: inline 的元素)

  • width 和 height 只在 IE5.x 下和 IE6 的 quirks 模式下触发 hasLayout 。因为在 IE6 中，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height 不能在此种情况下令该元素具有 layout。
  • zoom 总是可以触发 hasLayout，但是在 IE5.0 中不支持。

　　具有“layout” 的元素如果同时也 display: inline ，那么它的行为就和标准中所说的 inline-block 很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align 影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题，因为在别的浏览器中 display: inline 就是内联，不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。

脚本属性 hasLayout

　　我们这里称 hasLayout 为“脚本属性”是为了和我们熟知的 CSS 属性相区别。

　　注意一旦一个元素拥有了 layout，就没有办法再将其设成 hasLayout = False 了。

　　hasLayout-property 可以用来检测一个元素是否拥有 layout：举个例子，如果它的 id 是“eid”，那么只要在 IE5.5+ 的地址栏里输入 javascript: alert(eid.currentStyle.hasLayout) 即可检测它的状态。

　　IE的 Developer Toolbar 可以实时检查一个元素的当前样式；如果 hasLayout 是 true ，那么它的值显示为 “-1”。 我们可以通过实时修改一个元素的属性将“zoom(css)”设置为“1”来触发 hasLayout 以便调试。

　　另外一个需要注意的是“layout”会影响脚本编程。如果一个元素没有“layout”，那么clientWidth/clientHeight 总是返回0。这会让一些脚本新手感到困惑，而且这和 Mozilla 浏览器的处理方式也不一样。不过我们可以利用这一点在 IE5.0 中检测“layout”：如果 clientWidth 是零那么这个元素就没有 layout。

CSS hacks

　　下面用于触发 haslayout 的 hack 已经经过 IE6 及以下版本测试。今后版本的IE有可能会对此做不同处理。如果新版本浏览器发布我们会重新整理这部分内容。

　　John Gallant 和 Holly Bergevin 在2003年发布的 Holly hack ：

/* \*/
* html .gainlayout { height: 1%; }
/* */
  • 可以让 IE5+ 的任意元素获得 layout，除了标准兼容模式 IE6 中的内联元素。
  • 一般都很有效，除了在某些极少情况下，需要用 height:0 或者 1px 更好一些。
  • 和 overflow: hidden 不相容，除非在 IE6 的标注兼容模式下(因为这时如果父元素没有定高，那么height: 1% 会被变回 height: auto)。

　　或者我们可以用 underscore hack:

.gainlayout { _height: 0; }

　　另外，更具有向后兼容性的方法是使用 条件注释(conditional comments):

<!--[if lte IE 6]>
<style>
.gainlayout { height: 1px; }
</style>
<![endif]-->

　　在条件注释中链接一个专门对 IE/Win 做修正的外部样式表文件，也不失为一个安全有效的好方法：

<link rel="stylesheet" href="allbrowsers.css" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="iefix.css" type="text/css" />
<![endif]-->

　　我们更倾向于使用 height: 0 和 1px —— 并主张始终使用 height 除非它和别的什么东西冲突 (overflow: hidden)。对于取值，我们则倾向于避免 1% ，因为它可能会(虽然很少)引起一些问题。

　　一个需要注意的情况是如果我们希望一个元素保持内联，那么就不能使用 height 了，这时可以用 display: inline-block 。我们只在早期调试阶段用 zoom: 1 来避免一些渲染错误。

　　我们曾看过一些把 Holly hack 真的当作 holy(神圣的) hack 盲目使用的情况，比如对浮动元素使用或者对已经具有特定宽度的元素也使用这个 hack。要记住这个 hack 的目的不是要给某个元素加一个高度，而只是要触发 hasLayout = True 而已。

　　不要给所有元素设置 layout：* {_height: 1px;}。所谓过犹不及，获得 layout 不等于获得灵丹妙药，它只是用来改变渲染模式。

Hack整理

　　但是浏览器总是会变的，我们需要面对很多问题，比如一些依赖 IE6 的 bug 所做的 hack 会在 IE7 或更高版本的新浏览器中因 bug 修复而失效(甚至有害)的问题；比如新版本浏览器中类似的布局 bug 依然存在但用于 hack 的过滤器比如 * html 却不能正常工作的问题。这种情况下，MS专有属性 zoom 就可以考虑使用了。

<!--[if lt IE 7]><style>
/* IE 6 + IE5.5 + IE5.0 所用样式*/
.gainlayout { height: 0; }
</style><![endif]-->
<!--[if IE 7]><style>
.gainlayout { zoom: 1;}
/* 或者其他任何以后可能需要的东西 */
</style><![endif]-->
  • zoom: 1; 可以让 IE5.5+ 的任何元素(包括内联元素)获得 layout，但是在 IE5.0 中无效。
  • 没有其他附带效果(内联元素会变成 inline-block，这个当然)。
  • 如果需要通过验证，应该用条件注释将 zoom 隐藏起来。

　　其实当我们考虑到“向后兼容”时是很自相矛盾的，我们强烈建议页面设计者回过头看一下自己页面中用的到的明显的或是不明显的“hacks”，并用条件注释针对不同浏览器重新处理以保万无一失。

关于IE Mac 的小问题

　　IE Mac 和 windows 下的 IE 是完全不同的两个东西，它们各自拥有自己的渲染引擎，IE Mac 就全然不知“hasLayout”(或contenteditable)所谓何物。相比之下 IE Mac 的渲染引擎要更标准兼容一点，比如 height 就是被当作 height 处理，没有别的效果。因此针对“hasLayout”的 hacks 和别的解决方法(特别是通过使用 height 或 width 属性的)往往对 IE Mac 来说是有害的，所以需要对其隐藏。更多的关于 IE Mac 相关的问题可以在 IE Mac, bugs and oddities pages 找到。

MSDN 文档

　　MSDN 中涉及到 hasLayout 这个 MS 属性的地方寥寥无几，而具体解释 layout 和 IE 渲染模型之间关系的则少之又少。

　　在IE4的时候，除了未经绝对定位也未指定宽高的内联元素，几乎所有元素都有某种 layout(MSDN)。在这种早期的layout概念中，像 border, margin, padding 这些属性被称作“layout属性”，它们是不能应用到一个简单的内联元素上的。换句话说，“拥有layout”就可以粗略理解成：“可以拥有这几个属性”。

　　MSDN 上仍然使用 layout 属性这种说法， 只是含义变了，它们和拥有 layout 的元素已经没有什么关系了。在 IE5.5 中方才引入了 MS 的这个专有属性 hasLayout，也只是某种内部的标志位而已。

　　在 IE5.5 中，MSHTML Editing Platform(即可以通过设置<body contenteditable=true>来允许用户实时编辑、拖动 layout 元素以及调整其尺寸等)的文档中描述了三个和 layout 相关的重要特性：

　　如果一个 layout 元素中有内容，内容的排版布局将由它的边界矩形框决定。

　　拥有 layout 的意思基本上就是表示某元素是一个矩形。

　　从内部来说，拥有 layout 意思就是一个元素将自己负责绘制其内部内容。

(Editing Platform)

　　和 layout 自身相关的内部工作机制直到2005年8月才有相应文档描述，当时由于 The Web Standards Project 和微软的特别工作小组的原因，Markus Mielke [MSFT] 打开了深入讨论的大门：

　　一般来说，在 Internet Explorer 的 DHTML 引擎中，元素是不对自己的位置安排负责的。虽然一个 div 或者一个 p 元素都在源码中有一个位置，在文档流有一个位置，但是它们的内容却是由它们最近的一个 layout 祖先(经常是 body)控制安排的。这些元素依赖它们祖先的 layout 来为他们处理诸如决定大小尺寸和测量信息等诸多繁重的工作。

(HasLayout概述)

分析

　　我们的分析试图解释在已知案例下发生了什么事情，这种分析也应该可以作为未知案例下的指导。但我们这种试图利用种种测试案例投石探路的黑箱测试方法，是注定无法消除黑箱的神秘感的——我们无法回答“为什么”的问题。我们只能去尝试了解整个“hasLayout”模式的工作框架，以及它会怎样影响网页文档的渲染。因此，最终我们只能提供一些指导方针(而且只能是指导方针，而不是绝对的解决方案)。

　　我们认为他们所指的是一个小窗体。一个 layout 元素的内部内容是完全独立的，而且也无法影响其边界外的任何内容。

　　而 MS 属性 layout 只是某种标志位：一旦它被设定，这个元素就会拥有其特殊的 layout“特性”，这包括体现在其自身以及其非 layout 孩子身上的浮动、清除浮动、层叠、计数等等诸多方面的特殊性能。

　　这种独立性也许正可以解释为什么 layout 元素通常比较稳定，而且它们可以让某些 bug 消失。这种情况的代价有二，一是偏离了标准，二是它没有考虑到今后可能因此出现的 bug 和问题。

　　MS 的“页面”模式，从符号学角度考虑，可以看做是由很多互不相关的小的区块构成，而 HTML 和 W3C 的模式则认为“页面”模式应该是叙述完备的，故事性的相关信息区块构成的。

各种情况的详细说明

清除浮动和自动扩展适应高度

　　浮动元素会被 layou 元素自动包含。这是很多新手经常遇到的问题：在 IE 下完成的页面到了标准兼容浏览器下所有未清除的浮动元素都伸出了其包含容器之外。

　　相反的情况：如果确实需要一个浮动元素伸出其包含容器，也就是自动包含不是想要的效果时，该怎么办？你很可能也会遇到这种头疼的问题，下面的深入讨论就是一个例子：

　　在IE中，一个浮动元素总是“隶属于”它的 layout 包含容器。而后面的元素会受这个 layout 包含容器影响而不是这个浮动元素影响。

　　这个特性和IE6的那个自动扩展以适应内部内容宽度的特性，都可以看成是受这个规则影响的：“由它的边界矩形框决定”。

　　更糟的问题：clear 无法影响其 layout 包含容器之外的 float 元素。如果依赖这个 bug 在 IE 中布局的页面要转到标准兼容浏览器中，只有全部重做。

　　更多相关信息查看本文 “和 CSS 规范类似的地方” 这一部分。

浮动元素旁边的元素

　　当一个块级元素紧跟在一个左浮动元素之后时，其中的文字内容应该沿着浮动元素的右边顺序排列并会滑到浮动元素下方。但是如果这个块级元素有 layout，比如由于某种原因被设置了宽度，那么这个 layout 元素就会表现为一个矩形，其中文字不会滑向浮动元素下方。其宽度也被错误计算——从浮动元素的右边开始算起了，所以如果给它设置 width: 100% 将会导致显示时这个 block 的宽度加上了浮动元素的宽度而出现横向滚动条。这种表现就和规范中描述的相去甚远了。

　　与此类似，和浮动元素相邻的相对定位元素，它的位置偏移量应该参照的是父元素的补白(padding)边缘(例如，left: 0; 应该将一个相对定位元素叠放于它前面的浮动元素之上)。在IE中，偏移量 left: value; 是从浮动元素的右边距(margin)边缘开始算起的，这会因浮动元素所占的宽度变化导致水平方向的错位(一个解决方法是用 margin-left 代替，但是也要注意如使用百分值时会有一些怪异问题)。

　　根据规范所述，浮动元素应该与其后的盒子交织在一起。而对于没有交叉的二维空间中的矩形而言这是无法实现的。

　　可以(再次)访问下面这个页面：

　　我们可以看到跟在一个浮动元素后的 layout 元素不会显示这个3px间隙的 bug，因为浮动元素外围的3px硬边无法影响一个 layout 元素的内部内容，所以这个硬边将整个 layout 元素右推了3px。好比一个防护罩，layout 可以保护其内部内容不受影响，但是浮动元素的力量却将整个防护罩推了开来。

　　更多相关信息查看本文 “和 CSS 规范类似的地方” 这一部分

列表

　　无论是列表本身(ol, ul) 还是单个的列表元素(li)，拥有 layout 后都会影响列表的表现。不同版本 IE 的表现又有不同。最明显的效果就体现在列表符号上(如果你的列表自定义了列表符号则不会受这个问题影响)。这些符号很可能是通过某种内部机制附到列表元素上的(通常是附着在它们外面)。不幸的是，由于是通过“内部机制”添加的，我们无法访问它们也无法修正它们的错误表现。

　　最明显的效果有：

  • 列表获得 layout 后，列表符号会消失或者被放置在不同的或者错误的位置。

　　有时它们又可以通过改变列表元素的边距而重新出现。这看起来似乎是以下事实导致的结果：layout 元素会试图裁掉超出其边界的内部内容。

　　进一步又有一个问题就是(在有序列表中)任何具有 layout 的列表元素似乎都有自己独立的计数器。比如我们有一个含五个列表元素的有序列表，只有第三个列表元素有 layout。我们会看到这样：

　　1… 2… 1… 4… 5…

　　此外，如果一个有 layout 的列表元素跨行显示时，列表符号会底部对齐(而不是按照预料的顶部对齐)。

　　以上某些问题还是无法解决的，所以如果需要列表符号的时候最好避免让列表和列表元素获得 layout。如果需要限定尺寸，最好给别的元素设定尺寸，比如给整个列表外面套一个元素并设定它的宽度，又或者比如给每个列表元素中的内容设定高度等等。

　　另一个IE中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下，列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。

表格

　　table 总是有 layout 的，它总表现为一个已定义宽度的对象。在IE6中，table-layout: fixed 通常和一个宽度设为100%的表格相同，同时这也会带来很多问题(一些计算方面的错误)。另外在IE5.5和IE6的quirks模式下还有一些别的需要注意的情况。

相对定位元素(r.p.)

　　注意，由于 position: relative 并不触发 hasLayout，所以很多诸如内容消失或错位的渲染错误就会因此而起。这些现象可能会在刷新页面、调整窗口大小、滚动页面、选中内容等情况下出现。原因是 IE 在据这个属性对元素做偏移处理时，却似乎忘了发出信号让其 layout 孩子元素进行“重绘”(而如果是一个layout元素，那么在其重绘事件的信号链中，这个传给其孩子的信号是会正常发出的)。

　　以上是一些相关问题的描述。作为经验之谈，相对定位一个元素时最好给予其 layout。再有，我们也需要检查拥有这种结构的父元素是否也需要 layout 或者position: relative亦或二者都需要，如果涉及到浮动元素这点就十分重要。

绝对定位元素(a.p.)：
包含区块，什么是包含区块？

　　理解 CSS 的包含区块概念很重要，它回答了绝对定位元素是相对哪里定位的问题：包含区块决定了偏移起点，包含区块定义了百分比长度的计算参考。

　　对于绝对定位元素，包含区块是由其最近的定位祖先决定的。如果其祖先都没有被定位，那么就使用初始包含区块 html。

　　通常情况下我们会用 position: relative 来设定任意包含区块。这就是说，我们可以让一个绝对定位元素所参考的原点和长度等不依赖于元素的排列顺序，这可以满足诸如“内容优先”这种可访问性概念的需要，也可以给复杂的浮动布局带来方便。

　　但是由于 layout 概念的存在，这种设计理念的效果在IE中就要打个问号了。因为在IE中绝对定位的元素是相对于其最近的 layout 定位祖先而做偏移的，而百分比的尺寸却是参考这个 layout 定位祖先的下一个 layout 祖先计算的。注意这里的小差别，还有刚才提到 position: relative 是不会触发 hasLayout 的。

　　假设一个无 layout 的父元素被相对定位了——我们就得给它赋予 layout 才能使偏移量起作用：

　　假设一个未定位的父元素需要特定尺寸，而且页面设计是基于百分比宽度的——我们就可以放弃这个想法了，因为浏览器支持不佳：

滤镜

　　MS专有的滤镜属性 filter 是只适用于 layout 元素的。有些滤镜扩展了对象的边界。它们会显示出自身特有的缺陷。

对已渲染元素的重排(re-flow)

　　当所有元素都已渲染完成时，如果有一个因鼠标经过而引起的变化产生(比如某个链接的 background 有变化)，IE会对其 layout 包含区块进行重排。有时一些元素就会因此被排到了新的位置，因为当这个鼠标经过发生时，IE已经知道了所有相关元素的宽度、偏移量等数据了。这在文档首次载入时则不会发生，那时由于自动扩张的特性，宽度还无法确定。这种情况会导致在鼠标经过时页面出现跳变。

　　这些和重排问题相关的 bug 会给百分比边距和补白使用较多的流动布局带来不少麻烦。

背景原点

　　MS专有的这个 hasLayout 还会影响背景的定位和扩展。比如，根据 CSS 规范，background-position: 0 0 应该指元素的“补白边缘(padding edge)”。而在 IE/Win 下，如果 hasLayout = false 则指的是“边框边缘(border edge)”，当 hasLayout=true 时指的才是补白边缘：

边距重叠

　　hasLayout 会影响一个盒子和其子孙的边距重叠。根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠：

　　在 IE/Win 中如果这个盒子有 layout 那么这种现象就不会发生了：似乎拥有 layout 会阻止其孩子的边距伸出包含容器之外。此外当 hasLayout = true 时，不论包含容器还是孩子元素，都会有边距计算错误的问题出现。

　　hasLayout 会影响一个块级别链接的鼠标响应区域(可点击区域)。通常 hasLayout = false 时只有文字覆盖区域才能响应。而 hasLayout = true 则整个块状区域都可响应。添加了 onclick/onmouseover 等事件的任意块级元素也有同样的现象。

在页面内使用键盘浏览：探索中

　　当使用 tab 在页面中浏览时，如果进入了一个页内链接(in-page link)，那么接下来再按的 tab 键就不会正常继续了：

　　tab 键会把用户带到(这通常是错误的)其最近的 layout 祖先中的第一个目标(如果这个祖先是由 table， div， span 或某些别的标签构成)。

堆叠，分层和 layout

　　IE/Win 中似乎有两种分层和堆叠顺序：

  • 一种是(伪)试图采用CSS的模式：Effect of z-index value to RP and AP blocks
  • 还有一种是由“hasLayout”及其孪生兄弟“contenteditable”的行为产生的堆叠顺序。正如在上面相对定位的例子中展现的那样，在 layout 影响下的堆叠现象就好像 Harry Houdini (译者注：魔术师，以纸牌魔术成名)的拿手戏法儿一样。

　　两种堆叠模式虽互不相容，但却共存于IE的渲染引擎中。经验之谈：调试的时候，两种情况都要考虑到。我们可能会有规律地在下拉菜单或者类似的复杂菜单中看到相关问题，因为它们往往牵涉到堆叠，定位和浮动等诸多令人头疼的问题。给那些 z-index 定位的元素 layout 是一种可能的修正方法，不过也不限于此，这里只是提醒一下。

混乱的 contenteditable

　　如果给一个 HTML 标签设定 contenteditable=true 属性，比如<body contenteditable=true>，将会允许对该元素以及其 layout 子元素进行实时的编辑、拖动改变尺寸等操作。你可以把这属性用在浮动元素或者一个有序列表中的 layout 列表元素上看看效果。

　　为了对元素进行操作(编辑它们)，“contenteditable”和“hasLayout”为那些 hasLayout 返回 true 的元素引入了一套单独的堆叠顺序。

　　Editing Platform 继承了 layout 概念，对 layout 的误解多是因 contenteditable 而起即可作为证明(那些某种程度上集成了IE编辑引擎的应用软件多暗含着对layout概念的某种强制向后兼容性)。

和 CSS 规范类似的地方

　　你的 MSIE 页面在别的浏览器中一团糟？我们可没必要让这种事情发生。如果使用恰当，任何好的浏览器都能摆平 MSIE 的页面——只要你使用一些正确的 CSS。

　　利用 hasLayout 和“新的块级格式内容”之间的细微相似之处，我们可以有几种方法在标准兼容浏览器中重新实现 hasLayout 的“包含浮动元素”效果，和一些“浮动元素旁边的元素”所特有的效果。

Quirks 模式

　　某些 doctype，或者 <xml> 声明，在 IE6 中会触发“quirks模式”或曰向后兼容模式。在这种模式下，IE6 就像 IE5.5，并且和它老弟拥有一样的bug，一样的问题和一样的行为。

　　而对于IE7，<xml> 声明不会再改变渲染模式了；要触发 quirks 模式，我们不得不插入一个注释才行。(IE7 的 quirks 模式和 IE6 的 quirks 模式是否一样还有待验证)

<?xml version="1.0" encoding="utf-8"?>
<!-- ... 让 IE7 运行在 quirks 模式 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Layout — 结论

　　整个 layout 概念和一些基本 CSS 概念是不兼容的，即包含，排列，浮动，定位和层叠等。

　　由于页面中元素或有或没有 layout，会导致 IE/Win 的行为和 CSS 规范相违背。

拥有 layout — 另外一个引擎？

　　IE 的对象模型看起来是文档模型和他们传统的应用程序模型的糅合。我之所以提到这点是因为它对于理解IE如何渲染页面很重要。而从文档模型切换到应用程序模型的开关就是给一个元素“layout”。

(Dean Edwards)

　　有时候要解释清楚某种行为是不可能的：就比如 hasLayout，会根据它的状态选择两种不同渲染引擎的一种使用，而且每一种都有其自己的 bug 和怪异之处。

不可消除的 bug

　　软件 bug 是由于在制作过程中对完整性和逻辑问题考虑不周等人为错误而导致的。这是人类的固有缺陷，目前还没有什么好的解决方法。

　　同样由于这种缺陷，任何试图不重写软件而修复 bug 的做法，都将会不可避免的导致软件中出现更复杂的bug。

　　所有依赖别的软件的软件——当然包括依赖操作系统，也会同样依赖他们的 bug。于是我们会从所有关联的软件中得到一连串的 bug，这也更说明找到一个无 bug 软件是几乎不可能的。

(Molly, the cat?)

　　　　本文创建于2005年6月30日，最后一次修改于2006年4月2日。

编者：
Holly Bergevin
Ingo Chao
Bruno Fassino
John Gallant
Georg S?rtun
Philippe Wittenbergh
特别致谢给予此项目支持的：
Dean Edwards, and Molly ?the cat?
各种语言版本：
Original(English)
Brazilian Portuguese by Mauricio Samy Silva
中文版本 by old9
相关讨论：
dean.edwards.name/weblog/
联系作者：
spam.layout@satzansatz.de
版权说明：
本文基于创作共用协议发布。


Vincent Chen 2007-05-14 12:53 发表评论
]]> Web 显示层技术评估 http://www.blogjava.net/Vencent/articles/58380.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 15 Jul 2006 17:46:00 GMThttp://www.blogjava.net/Vencent/articles/58380.htmlhttp://www.blogjava.net/Vencent/comments/58380.htmlhttp://www.blogjava.net/Vencent/articles/58380.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/58380.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/58380.html阅读全文

Vincent Chen 2006-07-16 01:46 发表评论
]]>dwr配置篇web.xmlhttp://www.blogjava.net/Vencent/articles/37105.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Thu, 23 Mar 2006 14:41:00 GMThttp://www.blogjava.net/Vencent/articles/37105.htmlhttp://www.blogjava.net/Vencent/comments/37105.htmlhttp://www.blogjava.net/Vencent/articles/37105.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/37105.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/37105.html1、最小配置
java代码: 

<servlet>
  <servlet-name>dwr-invoker</servlet-name>
  <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

2、当我们想看DWR自动生成的测试页（Using debug/test mode）时，可在
java代码: 

servlet中加
<init-param>
  <param-name>debug</param-name>
  <param-value>true</param-value>
</init-param>
这个参数DWR默认是false.如果选择true.我们可以通过url http://localhost:port/app/dwr ,你就可以看到你部署的每个DWR class。并且可以测试java代码的每个方法是否运行正常。为了安全考虑，在正式环境下你一定把这个参数设为false.
3、logging信息配置。
在 无java.util.logging的jdk1.3下运行DWR,我们不希望强制用户加一个logging包，而是用HttpServlet.log ()方法来输出日志。如果classpath中包括logging jar包，DWR自动切换用logging输出日志。
如果用HttpServlet.log()方法，以下配置是有效的。
java代码: 

<init-param>
<param-name>logLevel</param-name>
<param-value>DEBUG</param-value>
</init-param>
有效的值是 FATAL, ERROR, WARN (the default), INFO and DEBUG

我是喜欢用log4j输出日志，那么在log4j.properties下加，log4j.logger.uk.ltd.getahead.dwr = debug。这样可以看DWR的调试日志。
4、多dwr.xml文件的配置
可能有几种情况，我们一一列举。 一个servlet,多个dwr.xml配置文件；多个servlet，每个servlet对应一个或多个dwr.xml.
一个servlet,多个dwr.xml配置文件；
java代码: 

<servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
    <init-param>
      <param-name>config-1</param-name>
      <param-value>WEB-INF/dwr1.xml</param-value>
    </init-param>
    <init-param>
      <param-name>config-2</param-name>
      <param-value>WEB-INF/dwr2.xml</param-value>
    </init-param>
</servlet>
在 这种配置下，param-name的值必须以config开头。param-name可以有>=0个。如果没有param-name，那么将会读取 WEB-INF/dwr.xml。如果有大于零个param-name，那么WEB-INF/dwr.xml文件将不会被读取。

多个servlet，每个servlet对应一个或多个dwr.xml
java代码: 

<servlet>
   <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<!--用classes/dwr.xml-->
</servlet>
<servlet>
   <servlet-name>dwr-invoker1</servlet-name>
   <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
   <init-param>
     <param-name>config-admin</param-name>
     <param-value>WEB-INF/dwr1.xml</param-value>
   </init-param>
   <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>
<servlet-mapping>
   <servlet-name>dwr-invoker1</servlet-name>
   <url-pattern>/dwr1/*</url-pattern>
</servlet-mapping>
在这种情况下，我们可以根据J2EE security来控制权限，针对不同url,加不同的角色。
5、dwr的几个扩展点（Plug-ins）
DWR对以下接口提供的默认的实现，用户可以继承DWR的默认实现类来达到我们想要的效果。但这至少需要我们读了DWR源码才能做这些工作(dwr源码很是清晰，有兴趣可以学习一下)，以后可能补存这部分。
java代码: 

uk.ltd.getahead.dwr.AccessControl   
uk.ltd.getahead.dwr.Configuration
uk.ltd.getahead.dwr.ConverterManager
uk.ltd.getahead.dwr.CreatorManager
uk.ltd.getahead.dwr.Processor
uk.ltd.getahead.dwr.ExecutionContext


Vincent Chen 2006-03-23 22:41 发表评论
]]>读了遍DWR1.1官方文档，提取的些东西http://www.blogjava.net/Vencent/articles/37104.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Thu, 23 Mar 2006 14:40:00 GMThttp://www.blogjava.net/Vencent/articles/37104.htmlhttp://www.blogjava.net/Vencent/comments/37104.htmlhttp://www.blogjava.net/Vencent/articles/37104.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/37104.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/37104.html1、java的方法避免用 java 和 javascript的关键字。 如 try()方法 或 delete()方法。
2、在你的java类中不要出现重载 avoid overloaded methods.
3、 在生产环境下，你可以把deprecated.js engine.js util.js 合并成一个，并放到web容器内，直接在htm,jsp中引用。 （对于java代码转换成的javascript代码也可以这么做，免得每次生成javascript代码浪费时间）
4、研究一下Bean Converters。POJOjava对象必须严格按照 getProperty() setProperty()定义。Bean Converters是按照 java对象的 get set方法工作的。DWR1.1加了Object Converters,是按private int property;这类属性工作的。
<convert converter="bean" match="example.Fred"/>
<param name="exclude" value="property1, property2"/>
</convert>
当你这样配置时，java对象转化成的javascript对象不包括property1和property2。
<convert converter="bean" match="example.Fred"/>
<param name="include" value="property1, property2"/>
</convert>
反过来java对象转化成的javascript对象直包括property1和property2。
5、<convert converter="collection" match="java.util.Collection"/>
<convert converter="map" match="java.util.Map"/>
这也是容易出问题的地方.
如
package example;
public class Person{
private String name;
get ... set
private List relationPerson;
public List setRelationPerson(List relationPerson){
this.relationPerson=relationPerson;
}
}
<convert converter="bean" match="example.Person"/>
</convert>
<signatures>
<![CDATA[
import java.util.Set;
import example.Person;

Person.setRelationPerson(List<Person>);
]]>
</signatures>

在jdk1.5泛型中有写法区别


6、另外在Set,List等做为方法参数时也会出现混淆。返回集合类型不会出现问题，想想就知道了。
如 在Test类中有 public Set testBeanSetParam(Set test) 这个方法，客户端得到的javascript方法可能是Test.testBeanSetParam(p0,callback);当我们 javascript调用这个方法时，鬼才知道怎么确定p0的类型,也不可能知道Set集合中该放什么类型的java对象，所以dwr的 special signatures syntax 确定这些集合和内容的类型
<signatures>
<![CDATA[
import java.util.Set;
import example.Test;

Test.testBeanSetParam(Set<TestBean>);
<!--Test.stringStringMapParam(Map<String, String>);-->
]]>
</signatures>
7、Creators
<allow>
<create creator="..." javascript="..." scope="...">
<param name="..." value="..."/>
<auth method="..." role="..."/>
<exclude method="..."/>
<include method="..."/>
</create>
...
</allow>
为了更少的暴露业务方法，最好配置include属性。
dwr支持new ,script,struts....几种集成方法，也支持static方法的调用，我觉得最好的是spring,其他感觉是处理遗留问题处理。
8、engine_js 作为dwr框架客户端核心，主要完成xmlHttp或iframe的构造，我们没必要关心它如何实现。有几点创新的我们可以学习下。
Call Batching 我们可以把几个客户端请求一起放送到服务器端，减少了网络交互，但要注意依存关系和他们处理的顺序。
Call Ordering 同步异步调整。一般用默认的就好了。注意依存关系。
Remoting Hooks 钩子，"small AOP"
依存关系解释。 如果 request1() request2()两个业务逻辑方法，request2方法需要用到request1方法从服务器端返回的结果。如果调用request2时，request1还没处理或还没请求。 下拉框连动可能有这个问题。
9、util.js propotype.js有些重复，这让我很难受。只能改代码了，可别坏了开元协议。
10、如果你的回调方法想加其他参数
var dataFromBrowser = ...;
var callbackProxy = function(dataFromServer) {
callbackFunc(dataFromServer, dataFromBrowser);
};
var callMetaData = { callback:callbackProxy };
Remote.method(params, callMetaData);
11、dwr1.1
1.1只能算一个bug消除版本，没有什么大的功能调整。源代码结构做了些调整。2.0有新的特征加入。

It has a far broader scope; the major new features are accessibility enhancements, and what now appears to be called 'Comet'. 在文档中提到了“Comet”，估计与DWR2.0作者想法类似。

http://forum.javaeye.com/viewtopic.php?t=19089

楼主叫server push。

http://alex.dojotoolkit.org/?p=545 给正名了，叫 Comet

Vincent Chen 2006-03-23 22:40 发表评论
]]>dwr学习1http://www.blogjava.net/Vencent/articles/37103.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Thu, 23 Mar 2006 14:39:00 GMThttp://www.blogjava.net/Vencent/articles/37103.htmlhttp://www.blogjava.net/Vencent/comments/37103.htmlhttp://www.blogjava.net/Vencent/articles/37103.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/37103.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/37103.html以下是我临时译的一些东西.本来想全译,发现dwr实在是简单,就随便写了.英文居差,现一把.

1、DWR: Easy AJAX for JAVA

作为一个java open source library,DWR可以帮助开发人员完成应用AJAX技术的web程序。它可以让浏览器上的javascript方法调用运行在web服务器上java方法。

DWR主要由两部门组成。javascript与web服务器通信并更新web页；运行在web服务器的Servlet处理请求并把响应发回浏览器。

DWR 采用新颖的方法实现了AJAX(本来也没有确切的定义)，在java代码基础上动态的生成javascript代码。web开发者可以直接调用这些 javascript代码，然而真正的代码是运行在web服务器上的java code。出与安全考虑，开发者必须配置哪些java class暴露给DWR.(dwr.xml)

这种从(java到javascript)调用机制给用户一种感觉，好象常规的RPC机制，或RMI or SOAP.但是它运行在web上，不需要任何浏览器插件。

DWR 不认为浏览器和web服务器之间协议重要，把系统界面放在首位。最大挑战是java method call的同步特征与ajax异步特性之间的矛盾。在异步模型里，结果只有在方法结束后才有效。DWR解决了这个问题，把回调函数当成参数传给方法，处理 完成后，自动调用回调方法。

这个图表显示了，通过javascript事件，DWR能改变select的内容，当然这些内容由 java代码返回。 javascript函数Data.getOptions(populateList)由DWR动态生成，这个函数会调用java class Data类的方法。DWR处理如何远程调用，包括转换所有的参数和返回的结果（javascript\java）。java方法执行完后，执行回调方法 populateList。在整个过程中我们就想在用本地的方法一样。

2、Getting Started

废话少说，试试就ok了。
web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app id="dwr">
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>

dwr.xml 与web.xml同目录
<?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="JDate">
<param name="class" value="java.util.Date"/>
</create>
</allow>
</dwr>

index.html
<html>
<head>
<title>DWR - Test Home</title>
<script type='text/javascript' src='dwr/interface/JDate.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script>
function init(){
JDate.getYear(load);
}
function load(data){
alert(data+1900+'年')
}
</script>
</head>
<body onload="init()">
</body>
</html>

dwr.jar 下载放lib下

完了，什么，够了，就这些。访问ok!
3、Examples
http://www.aboutmyhealth.org/ 这不是Google Suggest吗!ok.
4、源码浅析
dwr的设计很象webwork2的设计,隐藏http协议,扩展性，兼容性及强。

通过研究uk.ltd.getahead.dwr.DWRServlet这个servlet来研究下dwr到底是如何工作滴。

java代码: 

web.xml配置
<servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>


这样所有的/dwr/*所有请求都由这个servlet来处理，它到底处理了些什么能。我们还以上面最简单的例子来看。
1、 web服务器启动，DWRServlet init()方法调用，init主要做了以下工作。
设置日志级别、实例化DWR用到的单例类（这些类在jvm中只有一个实例对象）、读去配置文件（包括dwr.jar包中的dwr.xml,WEB-INF/dwr.xml. config*.xml）。
2、请求处理
DWRServlet.doGet, doPost方法都调用processor.handle(req, resp)方法处理。Processor对象在init()方法中已经初始化了。
java代码: 

publicvoid handle(HttpServletRequest req, HttpServletResponse resp)
        throwsIOException
    {
        String pathinfo = req.getPathInfo();
        if(pathinfo == null || pathinfo.length() == 0 || pathinfo.equals("/"))
        {
            resp.sendRedirect(req.getContextPath() + req.getServletPath() + '/' + "index.html");
        }else
        if(pathinfo != null && pathinfo.equalsIgnoreCase("/index.html"))
        {
            doIndex(req, resp);
        }else
        if(pathinfo != null && pathinfo.startsWith("/test/"))
        {
            doTest(req, resp);
        }else
        if(pathinfo != null && pathinfo.equalsIgnoreCase("/engine.js"))
        {
            doFile(resp, "engine.js", "text/javascript");
        }else
        if(pathinfo != null && pathinfo.equalsIgnoreCase("/util.js"))
        {
            doFile(resp, "util.js", "text/javascript");
        }else
        if(pathinfo != null && pathinfo.equalsIgnoreCase("/deprecated.js"))
        {
            doFile(resp, "deprecated.js", "text/javascript");
        }else
        if(pathinfo != null && pathinfo.startsWith("/interface/"))
        {
            doInterface(req, resp);
        }else
        if(pathinfo != null && pathinfo.startsWith("/exec"))
        {
            doExec(req, resp);
        }else
        {
            log.warn("Page not found. In debug/test mode try viewing /[WEB-APP]/dwr/");
            resp.sendError(404);
        }
    }


哦。这些恍然大悟。dwr/*处理的请求也就这几种。
（1）dwr/index.html，dwr/test/这种只能在debug模式下使用，调试用。
dwr/engine.js，dwr/util.js，dwr/deprecated.js当这个请求到达，从dwr.jar包中读取文件流，响应回去。（重复请求有缓存）
（2） 当dwr/interface/这种请求到来，（例如我们在index.html中的 <script type='text/javascript' src='dwr/interface/JDate.js'></script>）DWR做一件伟大的事。把我们在WEB- INF/dwr.xml中的
<create creator="new" javascript="JDate">
<param name="class" value="java.util.Date"/>
</create>
java.util.Date转化为javascript函数。
http://localhost:port/simpledwr/dwr/interface/JDate.js看看吧。
细节也比较简单，通过java反射，把方法都写成javascript特定的方法。（我觉得这些转换可以放到缓存里，下次调用没必要再生成一遍，不知道作者为什么没这样做）。
（3）dwr/exec
javascript调用方法时发送这种请求，可能是XMLHttpRequest或IFrame发送。
当 然，javascript调用的方法签名与java代码一致，包括参数，还有javascript的回调方法也传到了服务器端，在服务器端很容易实现。回 调方法的java的执行结果 返回类似 <script>callMethod(结果)<script>的javascript字符串,在浏览器执行。哈，一切就这么简 单，巧妙。

dwr的设计构思很是巧妙。
第一、把java类转化为javascript类由dwr自动完成，只需简单的配置。
第二、应用起来极其简单。开发者不要该服务器代码就可以集成。
第三、容易测试。和webwork一样，隐藏的http协议。
第四、及强扩展性。例如与spring集成，只需修改一点代码。
第五、性能。就我与jason,等简单比较，dwr性能可能是最好的。
第六、自动把java对象转化为javascript对象，并且及易扩展。[/code]

Vincent Chen 2006-03-23 22:39 发表评论
]]>开发保留标准浏览器功能的AJAX应用程序http://www.blogjava.net/Vencent/articles/36447.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Mon, 20 Mar 2006 13:54:00 GMThttp://www.blogjava.net/Vencent/articles/36447.htmlhttp://www.blogjava.net/Vencent/comments/36447.htmlhttp://www.blogjava.net/Vencent/articles/36447.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/36447.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/36447.html 时间：2006-03-14
作者：Mark Schiefelbein
浏览次数：
本文关键字：Ajax, RIA, Rich Internet Application, Dev Toolbox
文章工具
推荐给朋友 推荐给朋友
打印文章 打印文章

摘要

Ajax应用程序由于其丰富的功能、交互性以及快速的响应能力而得到人们的普遍赞许。它可以使用XMLHttpRequest对象动态地加载数据， 而不是加载新的页面。在它大肆进行宣传以及许多人兴奋的同时，有评论指出，Ajax应用程序丢失了浏览器的一些重要功能，包括对后退前进按钮的支持。

本文将首先阐明为什么在Ajax应用程序中除非显式地构建后退/前进按钮以及其它浏览器功能，否则它们将无法运行的原因。然后，我们将简要介绍开发 人员如何解决这些问题。最后，我们将看到有关Backbase Ajax引擎如何支持后退/前进按钮以及其它标准浏览器功能的详细情况。

Ajax应用程序是否需要后退按钮？

Ajax承诺，可以让开发人员完全基于标准的Web浏览器技术（通常是指DHTML）创建在视觉上吸引人的、高度交互式的Web应用程序。

以前开发人员不得不在功能丰富（具有高度交互性的、吸引人的用户界面）和易于到达（不需要进行客户端安装就可以工作在所有Web浏览器下的前端）二者之中作出选择。而Ajax应用程序应该能够产生既“功能丰富”又“易于到达”的前端。

但是一个界面怎样才算是“功能丰富”的，而一个应用程序又怎样才是“易于到达”的呢？

很难精确地定义“功能丰富”的含义，但是却很容易直觉地认识到：当您看到一个界面时，您就会知道它是不是功能丰富的。象Microsoft Office之类的桌面应用程序就是功能丰富的。功能丰富的界面使用诸如选项卡和上下文菜单这样的高级UI控件。这样的界面提供一些高级交互方法。例如， 拖放、对关注的UI元素进行高亮显示等。传统的浏览器应用程序是功能不丰富的。它们仅限于诸如表单之类的简单控件，交互主要是由到新页面的单击链接组成。 我们只要看看微软的电子邮件客户端就可以看出功能丰富和功能不丰富的区别：Outlook是功能丰富的，而Hotmail就是功能不丰富的。

Ajax应用程序已经由于功能丰富而得到人们的普遍赞许。Google的Gmail就是其中最具代表性的例子。Google所开发的其它Ajax应 用程序（Google Suggest、 Google Map）、微软即将推出的名为“Kahuna”的Web邮件客户端以及Backbase RSS Reader都包含了一些高级控件和交互模块。可查看Dan Grossman的Top 10 Ajax Applications列表，其中给出了一个让人印象深刻的功能丰富界面的列表。

通过前面的讨论，可以说Ajax应用程序很明显满足“功能丰富”的标准。那么它是不是“易于到达”的呢？

首先，最基本的是，只有界面在Web浏览器中运行的应用程序才是“易于到达”的。Ajax应用程序是基于浏览器标准的，因此可以通过Web浏览器来访问。

但是，仅仅可以通过Web浏览器访问还不够。Jakob Nielson在他2000年的文章Flash: 99% Bad中指出，Flash“打破了Web的基本交互方式”。终端用户希望在使用Web应用程序时所面对的是特定的交互方式。应用程序需要遵从传统的Web交互方式，并提供以下的可用功能：

  • 后退和前进按钮可以正常工作，以便终端用户可以导航到历史记录页面。
  • 用户应该可以创建书签。
  • 支持深链接，以保证终端用户可以将这个页面通过电子邮件发送给朋友和同事。
  • 刷新按钮可以正常工作，以便刷新当前的状态而不是重新初始化应用程序。
  • 开发人员可以使用“查看源文件”看到源代码。
  • 终端用户可以使用“查找”对页面进行搜索。
  • 搜索引擎可以为页面做索引并创建到搜索项的深链接。

再看一下Top 10 Ajax Applications列表，我们可以看出，之前讨论的大多数Ajax应用程序的确打破了标准的Web交互方式。在下一节中，我们将讨论为什么许多Ajax应用程序会这么做。

为什么Ajax应用程序常常会使后退按钮无法正常工作？

我们所说的Web基于以下三个原则：

  • 使用 (D)HTML来定义界面
  • 使用HTTP实现客户端与服务器间的通讯
  • 使用URI进行寻址

Ajax编程突破了由以上原则所带来的种种限制，使得界面功能更加丰富。正如我在以前的文章A Backbase Ajax Front-end for J2EE Applications(中 文版)中所介绍的那样，Ajax广泛使用了JavaScript（“J”）以创建功能丰富的UI组件和交互性。Ajax还引入了异步的XML通信（“A” 和“X”），也就是使用XMLHttpRequest对象导入新的数据和表示逻辑而不必刷新页面。然而，目前的Ajax模型并没有解决如何处理URI的问 题。

Ajax应用程序对(D)HTML和HTTP的使用方式做了改变，而这种改变带来的直接结果就是后退按钮和Web的基本交互方式的其它元素无法正常 工作了。在本节的其余部分，我将说明如何通过以Ajax的方式处理URI来解决上述问题。首先我们来看看在传统的Web应用程序中URI是如何与用户交互 相关联的。

从技术方面来说，用户交互是指用户界面状态的一次更改。状态改变由终端用户发起。浏览器客户端通过向服务器发出页面请求来处理状态更改（REST法则）。服务器将发送新的页面和新的URI到客户端以生成新的界面状态。
简单地说，每个用户交互都是通过会导致如下结果的服务器往返来处理的：

  • 生成新的页面
  • 生成新的URI

这些Web功能之所以能够被使用，是因为浏览器在它的历史记录堆栈中记录了连续的URI，并在地址栏中向终端用户显示当前URI，用户可以通过地址 栏复制URI，并将其发送给朋友。当用户单击后退按钮或者向浏览器的地址栏中粘贴一个来自于电子邮件的URI时，就会触发一次到服务器的往返。因为服务器 负责状态管理，所以它就可以生成相应的页面。

Ajax应用程序与传统的Web应用程序之间的主要区别在，Ajax应用程序可以处理用户的交互而无需页面重新加载。例如，通过XMLHttpRequest对象从服务器载入数据，或者使用JavaScript来处理拖放客户端。

在上面的两个例子中，状态改变了，但是却没有生成新的URI。因此，单击后退按钮或刷新按钮会产生意外的结果，在地址栏中也不会有深链接的URI。

为了提供传统的Web可用功能，Ajax应用程序需要以类似于服务器处理传统的Web应用程序的方式来处理URI客户端。Ajax应用程序需要实现以下功能：

  • 当客户端状态发生改变时，生成一个URI，并将其发送到浏览器
  • 当浏览器请求新的URI时可以重新创建状态。

实现以上功能后，浏览器的历史记录就可以正常工作，浏览器的地址栏就可以显示URI，当然，您也就可以将它发送给朋友了。
这里还有另外一个难点，那就是如何确定Ajax引擎什么时候需要实现以上功能（例如，哪一次状态改变需要创建新的URI）。在传统的模式中，每一次页面刷 新都对应着一次URI更新。而在Ajax模式中，每一个客户端事件都将新的URI添加到浏览器堆栈中。交互设计者和开发人员将不得不做出决定：哪一次状态 改变是有意义的。只对有意义的状态改变才需要生成URI。

下面我们对提供Web可用功能的Ajax应用程序在客户端需要实现的功能做一下总结：

  • 创建历史记录
    • 保存有意义的状态
    • 生成相应的URI
    • 将这个URI添加到浏览器的堆栈中
  • 恢复历史记录
    • 检测URI的改变
    • 通过URI重新创建状态

在Ajax中支持后退按钮的基本设计思想

在这一节中，我们将讨论在Ajax应用程序中支持后退按钮所需的基本步骤，并给出说明所需步骤的简单示例代码。有关如何以跨浏览器兼容的方式实现后退按钮支持的更完整讨论可以参见Mike Stenhouse在Content with Style以及Brad Neuberg在OnJava发表的文章。这两篇文章也是我比较喜欢的。

简单示例程序如图１所示，在界面中将有一个选择框，它有两个值：“Year 1”和“Year 2”。对于这个程序，我们将在选择框值发生改变时跟踪历史记录。这意味着用户可以首先选择“Year 2”然后单击后退按钮后退到先前的选择。

带有选择框的简单示例程序
图1.带有选择框的简单示例程序

示例程序最初是一个带有JavaScript getter和setter（用于选择框值）的简单HTML表单：

<html>

<head>
<script language="JavaScript" type="text/JavaScript">
function reportOptionValue()
{
  var myForm = document.make_history;
  var mySelect = myForm.change_year;
  return mySelect.options[mySelect.selectedIndex].value;
}

function setOptionValue(value)
{
  var myForm = document.make_history;
  var mySelect = myForm.change_year;
  mySelect.options[value-1].selected = true;
}
</script>
</head>

<body>
<form name=make_history>
  <select name=change_year>
    <option value="year_1">Year 1</option>
    <option value="year_2">Year 2</option>
  </select>
</form>
</body>

</html>

我们将首先实现第一个要求：创建状态的历史记录。正如我们前面所提到的，这个要求包含以下三个步骤：

  • 创建历史记录
    • 保存有意义的状态
    • 生成相应的URI
    • 将这个URI添加到浏览器的堆栈中

我们希望能够保存选择框的每一次更改。因此我们将创建新的包含选择框状态信息的URI。

为了遵循Internet标准，我们将使用URI的碎片标识符部分。按照IETF RFC 3986的规定，“……作为客户端间接引用的主要形式，碎片标识符在信息检索系统中起着特殊的作用，〈……〉碎片标识符在解除引用之前与URI的其余部分是分离的，因此，碎片本身中的标识信息只被用户代理所废弃，而不考虑URI方案……”。

使用碎片标识符，我们可以创建一个“Ajax-URI”，其中的客户端部分和服务器端部分使用“#”隔开。

JavaScript提供了window.location()函数，以便通过URI更新浏览器的历史记录和地址。此外，我们可以使用window.location.hash()直接访问碎片标识符。

在下面的代码片断中，您可以看到如何通过对选择框使用onchange事件处理程序来扩展我们的代码，该处理程序使用一个“Ajax-URI”来更新浏览器历史记录及地址栏。

<html>

<head>
<script language="JavaScript" type="text/JavaScript">
function makeHistory(newHash)
{
  window.location.hash = newHash;
}

function reportOptionValue()
{
  var myForm = document.make_history;
  var mySelect = myForm.change_year;
  return mySelect.options[mySelect.selectedIndex].value;
}

function setOptionValue(value)
{
  var myForm = document.make_history;
  var mySelect = myForm.change_year;
  mySelect.options[value-1].selected = true;
}
</script>
</head>

<body>
<form name=make_history>
  <select name=change_year 
    onchange=
      "return makeHistory(reportOptionValue())">
    <option value="year_1">Year 1</option>
    <option value="year_2">Year 2</option>
  </select>
</form>
</body>

</html>

正如我们在图２中所看到的，选择框的每一次变动都将导致浏览器地址的更新。请注意，在需要使用隐藏帧以获取正确的行为的Internet Explorer (IE)中会存在一些问题，详细情况还是请参见Mike Stenhouse和Brad Neuberg的文章。

状态变化时历史记录堆栈被更新
图2.状态变化时历史记录堆栈被更新

我们现在有了一个在选择框的值发生变化时创建新URI的事件处理程序。新URI使用碎片标识符存储重新创建先前状态所需的信息。现在我们可以着手实现下一个功能了。

  • 恢复历史记录
    • 检测URI的更改
    • 通过URI重新创建状态

在第一步中，我们通过window.location.hash()函数更新了客户端的URI。这个调用并不会产生服务器的往返，也不会导致页面刷新。因此，我们需要使用Ajax的方法（在客户端）处理URI的改变。

首先需要增加一个轮询函数，以定时检查浏览器历史记录中的URI。我将在页面的onload事件中使用pollHash()函数，每隔1000毫秒它将重新执行一次。

这个轮询函数将调用handleHistory()函数，后者检查在上一次检查之后URI是否改变了。我们将借助一个名为expectedHash的全局变量来实现。

最后一部分是确定URI是否发生了改变，这种改变由选择框中的事件处理程序引起，或者是因为终端用户单击了后退按钮而造成。我们通过在选择框的事件处理程序中设置expectedHash来达到此目的。

<html>

<head>
<script language="JavaScript" type="text/JavaScript">
var expectedHash = "";

function makeHistory(newHash)
{
  window.location.hash = newHash;
  expectedHash = window.location.hash;
  return true;
}

function reportOptionValue()
{
  var myForm = document.make_history;
  var mySelect = myForm.change_year;
  return mySelect.options[mySelect.selectedIndex].value;
}

function setOptionValue(value)
{
  var myForm = document.make_history;
  var mySelect = myForm.change_year;
  mySelect.options[value-1].selected = true;
  return true;
}

function handleHistory()
{
  if ( window.location.hash != expectedHash )
  {
    expectedHash = window.location.hash;
    var newoption = expectedHash.substring(6);
    setOptionValue( newoption );
  }
  return true;
}

function pollHash() {
  handleHistory();
  window.setInterval("handleHistory()", 1000);
  return true;
}
</script>

</head>

<body language="JavaScript"
      onload="return pollHash()">
<form name=make_history>
  <select name=change_year 
    onchange="return makeHistory(reportOptionValue())">
    <option value="year_1">Year 1</option>
    <option value="year_2">Year 2</option>
  </select>
</form>
</body>

</html>

到此，我们的示例程序就完成了。在这个程序中，我们演示了如何在URI中记录状态，如何将URI添加到浏览器的历史记录堆栈中，如何从后退按钮检测地址变动，以及最终如何重新创建所需的状态。

这个示例程序还缺少以下功能：

  • 对使用隐藏帧的IE的支持
  • 更多的固定URI（这个示例程序只用于选择框选项少于10的情况）
  • 在构造时注册初始状态

以一种兼容所有浏览器的健壮方式实现对所有传统的Web可用功能的处理不是一件容易的事。一种替代方法是使用对这些功能提供了内置支持的Ajax工具包。

在下一节中，我们将描述Backbase Ajax引擎如何提供这些功能。我参考了Ajax forum on the Backbase DevNet上的实现。

案例分析：包含后退按钮和深链接的Ajax论坛

Backbase Ajax引擎是一个成熟的、功能丰富的Ajax软件包。对所有传统Web可用功能的支持是Backbase的优点之一。

Backbase DevNet包含了为开发人员提供的、与Backbase和Ajax有关的信息。而开发人员论坛是DevNet的一部分。

Backbase Web应用程序（包括DevNet及其讨论论坛）是使用Backbase构建的。为了演示该论坛功能丰富和易于到达的特点，我们将逐步遍历论坛的典型用例：

  • 开发人员浏览论坛，阅读不同的主题。
  • 开发人员复制这个主题的URI，将其粘贴到电子邮件中并发送给朋友。这个朋友从电子邮件中复制这个URI到一个浏览器中并打开同一论坛主题。
  • 开发人员单击后退按钮以阅读以前的主题。

进行几次用户交互后的论坛界面状态

我们来看看开发人员来到“BXML”论坛并选中名为“Issue with vertical and horizontal menus”的贴子之后，论坛界面的状态以及地址栏中的对应URI是什么样的情况。

论坛和贴子被选中，并被高亮显示。讨论的主题被显示出来以供阅读。在URI的碎片标识符中包含了所有的相关信息。在#后面，我们看到了为书签和深链 接而记录的完整状态：“forum”表示开发人员在浏览这个Web站点的论坛部分；“forum=2”表示当前选中的是BXML论坛，“thread= 211”记录了当前所选择的主题。最后，方括号中的“[5]”表示与书签结合的对多个后退和前进步骤的处理。

具有Ajax URI的论坛初始状态
图3.具有Ajax URI的论坛初始状态 （单击图片查看大图）

访问Backbase论坛，您就可以看到URI如何随着每次状态改变而更新，即使更新是在客户端进行处理的，或者牵涉到通过XMLHttpRequest对象进行部分页面更新。

在新的浏览器窗口内重新创建论坛界面的状态

现在让我们看看当开发人员将当前URI发送给朋友时会发生什么情况。这个朋友在浏览器窗口中打开了这个URI，期望能看到相同的界面状态。需要在新的浏览器中重新创建该状态。对于本文，我是从一个Firefox窗口中复制URI到一个新打开的IE窗口中。

在地址栏中输入URI首先会产生一个服务器端的请求。使用“#”前的部分，会加载Backbase.com，在这一过程中，Backbase Ajax引擎也就实现了初始化。活动的Backbase引擎会阅读URI中“#”后的部分。通过这些信息，Backbase引擎会转到“论坛 （forum）”部分，并选定BXML论坛（id=2）中的第211个主题，从而创建相应的状态。不需要页面的刷新，只需从服务器中加载附加的内容并在客 户端部分地更新界面，就可以实现了。

在后续的浏览器功能的处理中，新的URI被添加到浏览器历史记录中，这个新的URI既可以在地址栏中使用，也可以用来做深链接。“[0]”表示没有可返回（使用后退按钮）的先前状态。

在新的浏览器窗口中重新创建论坛状态
图4.在新的浏览器窗口中重新创建论坛状态（单击图片查看大图）

用户单击后退按钮后的论坛界面状态

第一步我们研究了URI如何随着由用户交互所触发的界面状态更改而更新。下面我们将看到相反的情况：用户请求新的URI，相应的状态被重新创建。

通过单击后退按钮，用户要求返回先前阅读的页面。浏览器通过从历史记录堆栈中找回先前的URI来响应后退按钮。Backbase Ajax引擎将监测这一变化，从历史记录中读取新的URI，并来到“论坛”部分选定BXML论坛（id=2）中的第192个主题，从而重新构建相应的状 态。新的URI将按照上述语义显示在地址栏中。

到这里，我们的案例分析也就结束了。

单击后退按钮后的论坛状态
图5.单击后退按钮后的论坛状态（单击图片查看大图）

Ajax程序确实需要后退按钮！

在过去的几年中，Web开发人员因为市场要求“易于到达”并愿意接受“功能丰富”方面的牺牲，所以选择构建Web界面。然而，当前Ajax受到的普 遍关注清楚地显示出这种情况实际上只是暂时的。市场现在强烈要求Web程序也能像桌面应用程序那样具有丰富的功能、交互性以及敏捷的响应能力。

但是，终端用户已经习惯了Web交互方式。使用常见模式与任何Web界面进行交互可以提高生产力。终端用户期望后退/前进按钮和刷新按钮能正常工作，可以创建书签和深链接，可以查看源文件，使用“查找”对页面进行搜索，而且搜索引擎可以对Ajax应用程序建立索引。

Ajax社区必须知道：正如本文所述，在Ajax应用程序中提供对后退/前进按钮以及其它传统浏览器功能的支持的技术是存在的。虽然实现起来并不容 易，而且会增加成本，但是Ajax社区的成功需要将传统的浏览器功能构建到Ajax应用程序中。因此，我强烈呼吁Ajax开发人员构建支持这些功能的 Ajax应用程序！

结束语

在本文中，我着重阐明了Ajax应用程序为什么需要遵从传统的Web交互方式并提供传统的Web可用功能。我确定可以通过创建在碎片标识符中包含客户端状态信息的“Ajax URI” ，从而将这些功能编程到Ajax应用程序中。

阅读相关代码，您会发现，由于状态处理代码通常非常重要，再加上不同浏览器之间常常不兼容，实现完整的通用解决方案是相当困难的。而Backbase Ajax引擎通过开箱即用地提供所需功能，为该问题提供了一种解决方案。

参考资料

原文出处:http://dev2dev.bea.com/pub/a/2006/01/ajax-back-button.html

 作者简介

Mark Schiefelbein自2005年2月以来一直担任Backbase的产品管理主管。Mark极大地推动了Backbase Rich Internet Application的全球推广。


Vincent Chen 2006-03-20 21:54 发表评论
]]>一个用于J2EE应用程序的Backbase Ajax前端http://www.blogjava.net/Vencent/articles/36446.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Mon, 20 Mar 2006 13:53:00 GMThttp://www.blogjava.net/Vencent/articles/36446.htmlhttp://www.blogjava.net/Vencent/comments/36446.htmlhttp://www.blogjava.net/Vencent/articles/36446.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/36446.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/36446.html 时间：2005-11-03
作者：Mark Schiefelbein
浏览次数：
本文关键字：Ajax, RIA, Rich Internet Application, backbase, Dev Toolbox,  Eclipse,  WebLogic
文章工具
推荐给朋友 推荐给朋友
打印文章 打印文章

　　动态HTML技术已经出现了多年。最近，Google的最新Web应用程序GMail、Google Suggests和Google Maps，在前端页面中重新引入了基于标准的DHTML开发模型。Google证明了，DHTML开发模型能够让开发人员创建具有可视化吸引力和高度交互 式的Rich Internet Application（丰富网络应用程序，RIA）。

　　Adaptive Path公司的Jesse James Garrett为这个基于标准的RIA开发模型创造了术语Ajax (Asynchronous JavaScript + XML)。与传统的基于页面的Web应用程序模型相比，Ajax有3点不同之处：

  • 有一个客户端引擎担任用户界面（UI）和服务器之间的中介。
  • 用户行为由客户端引擎处理，而不是生成发往服务器的页面请求。
  • XML数据在客户端引擎和服务器之间传输。

　　换言之，Ajax解决方案包括一个客户端引擎，它用于呈现用户界面，并使用XML格式与服务器通信。这个引擎由很多JavaScript函数组成，位于Web浏览器中，它不需要插件，也不需要用户安装。

　　基于Ajax的RIA正在迅速成为Web应用程序前端的基准，因为它可以同时提供二者的优点：丰富性和可达性。Ajax应用程序和桌面应用程序 一样丰富，响应高度灵敏，并且可以在一个页面上提供所有数据，无需刷新页面。它们还拥有基于标准的浏览器应用程序的可达性特点，这类应用程序可以在不具备 浏览器插件或客户端applet的情况下进行部署。

　　Backbase所提供的Ajax软件具有以下特点：基于标准、功能全面且易于使用。Backbase Presentation Client (BPC)基于Ajax技术，它使用称为Backbase XML (BXML)的附加标签扩展了DHTML。Backbase XML Server Edition for J2EE (BXS)包含了一些服务器端的组件，利用这些组件，J2EE开发人员可以快速开发J2EE应用程序的Ajax前端。

　　在本文中，我使用Backbase为Java Pet Store开发了一个基于Ajax的前端。该案例分析说明了如何使用Backbase技术作为J2EE应用程序的Ajax表示层。您可以查看文中所描述的应用程序的在线演示，网址是http://www.backbase.com/xmlserver。

Backbase Ajax表示层

　　Web开发人员应该能够轻松创建具有以下特点的Rich Internet Application (RIA)：完全基于HTML标准（W3C），不需要最终用户安装插件，速度超快，能够在所有浏览器上进行操作，并与J2EE运行时和开发环境完全集成。 RIA利用客户端（Web浏览器）资源创建和管理用户界面，从而为最终用户提供一个响应灵敏而且具有应用程序风格的用户界面。

　　这种方法最近被称为Ajax。Ajax这个术语的灵感来源于Gmail、Google Maps和Google Suggests这类应用程序，它把现有的浏览器技术提高到了一个新的水平上。RIA从根本上改进了在线应用程序的可用性和有效性。Ajax RIA只使用标准的浏览器技术（如JavaScript、XHTML和XMLHttpRequest对象）就做到了这一点。通过使用 XMLHttpRequest，在将数据异步加载到界面中时就无需刷新页面。

　　Backbase在J2EE架构中提供一个Ajax表示层，它结合了目前的J2EE服务器和先进的富客户端技术的优点。Backbase表示层 控制了富用户界面的每个方面：与最终用户的交互模型，与后端系统的集成，以及整个客户端-服务器通信。Backbase直接提供了用于聚合来自任意位置的 XML的下一个范型，将数据绑定到先进的富用户界面控件，并在一个统一的富用户界面中交付组合应用程序。

　　Backbase表示层由一个客户机和一个服务器组成。Backbase Presentation Client (BPC)是一个基于Ajax的GUI引擎，它允许开发人员以声明性的方式快速构建RIA。Backbase XML(BXML)是对XHTML的扩展。它为开发人员提供了交付富前端功能的附加标签(B tag)。Backbase XML Server (BXS)提供一种XML流水线架构，利用它可以从Web服务、数据库或Java对象获取数据，可以聚合和转换这些数据，并将其绑定到BPC中的UI元 素。BPC和BXS相结合，可以在Web浏览器和应用服务器之间搭建一座功能强大的桥梁，并提供一个分布在客户端和服务器上的完整的富Internet表 示层。

　　图1说明了在逻辑和物理应用程序架构中，Backbase所处的位置。应用程序由一个J2EE后端和一个基于Ajax的RIA前端组成。从逻辑 上说，Backbase提供了表示层，而J2EE提供了业务逻辑和数据层。从物理上说，表示层分布在客户端和服务器上。在客户端上，Backbase使用 BPC扩展了浏览器。在服务器上，Backbase使用BXS扩展了应用服务器。

图1. Backbase富Internet表示层

Pet Store案例分析

　　我们将使用Java Pet Store作为案例来分析如何为J2EE应用程序添加Backbase RIA前端。Java Pet Store Demo是Sun Microsystems提供的一个示例应用程序，其目的是为了演示如何使用Java 2 Platform, Enterprise Edition(J2EE)构建Web应用程序（详情请参见http://java.sun.com/developer/releases/petstore）。

　　Java Pet Store是业内一个著名的参考应用程序（pet store还有.NET和Flash版本）。由于以下两个原因，它成为为J2EE应用程序添加基于Ajax的RIA前端的完美案例：

  • Java Pet Store是一个完整的Web应用程序。

    • Sun设计Pet Store的目的是演示所有常见的Web应用程序功能。通过使用Pet Store作为案例，我可以说明为J2EE应用程序添加RIA层的所有方面。

    作为一个典型的在线商店，它包含以下功能：

    • 浏览产品类别。
    • 在购物车中添加和删除物品。
    • 填写订单表单。
    • 提交订单。
  • Java Pet Store有一个传统的HTML前端。

    • 使用RIA前端的目的是提供更简单和响应更灵敏的GUI，以及通常更为丰富的Web用户体验。我将说明，如何通过Backbase RIA技术极大地改进应用程序的前端，同时无需对后端和总体系统需求做任何修改。

    Pet Store的RIA前端将通过以下方式改善可用性：

  • 把前端变为一个单页面的界面（SPI）。
  • 提供更先进的UI控件（如模态弹出式菜单）。
  • 使用可视化效果（例如，把宠物放入购物车）。
  • 更加有效地利用电脑屏幕的操作区域。

RIA Pet Store前端

　　在这一节中，我将讨论经过改进的新Pet Store RIA前端。

　　下面的两个屏幕快照演示了前端的改进。要获得对Backbase RIA前端更直观的感受，请访问http://www.backbase.com/xmlserver上的在线演示，或者到http://www.backbase.com/download下载Backbase社区版本。

下面两个图对两个前端进行了可视化的比较。图2显示的是原来静态的多页面HTML前端。图3显示的是新的Backbase SPI前端：

图2. 原始HTML前端

图3. 新Backbase前端

　　Backbase为创建丰富的单页面Web界面提供了许多可能性。下面列出了一些Pet Store所使用的例子。

  • 选项卡式的单页面浏览

    • 在Web界面上，不同的动物种类（狗、猫等等）被表示为不同的选项卡。点击一个选项卡就会打开相应的类别，显示可供出售的宠物。

    在Backbase SPI中，无需刷新页面就可以打开选项卡。BPC只从服务器请求所需的数据，然后更新客户端的视图。SPI机制可以极大地缩短响应时间，让客户随心所欲地在类别之间来回穿梭。

  • 活动的多功能界面

    • 界面有三个主要功能——类别浏览、购物车和页面引导历史记录，它们在界面上都是一直可见的。因此，购物者总是能够查看购物车的当前内容或最近看过的宠物的记录。

    这些功能是高度同步的：浏览一个宠物时，历史记录将自动更新为在记录中显示该宠物。定购一个宠物时，它将被添加到购物车中。上述一切都发生在客户端的一个页面上（例如，无需重新加载页面就可以更新界面的各个部分）。

  • 界面变化的流畅可视化效果

    • 进行浏览时，客户将会看到不断变化的界面视图。例如，他可以按照价格和名称对宠物进行排序。界面需要根据新的排列顺序显示更新以后的宠物清单。

    在Backbase RIA前端中，以前的视图被使用可视化效果的新视图所代替，新视图向最终用户显示什么正在改变。图4说明了如何通过流畅的定位效果，把按名称排列的顺序转变为按价格排列的顺序：

    图4.类别视图的排列顺序转换

  • 用于提高转换速度的信息栏验证

　　为了执行购买，购买者必须在一份表单中填入个人详细信息。Backbase极大地简化了这个购买过程，通过客户端的信息栏验证提供即时的反馈，并在提供所有数据的过程中提供逐步的指南和概述。

　　图5显示了在填写表单的第一个步骤中，对于e-mail地址信息栏的验证。当购买者填写下一栏时，就会提供即时的反馈。

图5. 信息栏验证—e-mail栏

Backbase RIA Pet Store的架构

　　增强Pet Store（或其他任何Web应用程序）的前端时，我们将继续依赖于以下两条架构基本原则：

  • 最终用户仍然使用标准的Web浏览器访问Pet Store，无需添加任何插件。
  • 由J2EE业务逻辑和数据组成的整个后端保持不变。

　　现有的后端在开发期间是完全孤立的，而且不会改变，这个事实对于架构师和IT管理人员十分有利。通过一个规整的、模块化的架构，他们将能够控制风险和成本，同时显著提高Web应用程序的用户友好性。

　　Backbase的富表示层技术由两个模块组成，它们将被加入到架构中。在客户端，BPC管理着SPI，并通过异步响应事件来处理与最终用户之 间的交互。在服务器端，Backbase XML Server这个灵活的XML管道可以连接到任意服务器端的数据源，包括Web服务、文件、数据库或本地Java对象。图6说明了BPC和BXS如何共同 为RIA提供一个声明式的、基于XML的端到端表示层。

图6. 声明式的端到端表示层

Backbase表示客户端

　　BPC是一个基于Ajax的GUI引擎，它运行在标准的Web浏览器中。运行时，BPC被加载到浏览器中，然后它会接收BXML代码，构造对应的B树，并不断地把这种表示转换为浏览器所呈现的DOM树。图7说明了运行时转换过程。

图7. BPC运行时

Backbase XML

　　Backbase XML (BXML)是XHTML的扩展。开发人员通过创建BXML应用程序来开发富前端，包括BXML标签、标准的XHTML和CSS。BXML是一种声明性语言，它包含了XHTML中所没有的标签（B标签）

　　BXML包含用于下列用途的标签：

  • 定义屏幕分区(<b:panel>)
  • 交互式客户端控制(<b:menu>)
  • 处理标准的用户交互事件(onClick)
  • 处理高级的用户交互事件(拖放和调整大小)
  • 管理客户端状态
  • 处理可视化效果(使修改任意CSS属性的过程动画化)
  • 数据绑定
  • 使用XSLT的一个子集进行客户端转换

用于J2EE的Backbase XML Server

　　Backbase XML Server (BXS)是一个服务器端的引擎，用于把BPC链接到任意J2EE后端。和BPC一样，BXS是完全基于XML的，其编程是声明性的。它使用一种XML管道架构，提供功能强大的服务器端转换和聚合。

　　BXS附带一些用于访问最常用的数据源（包括Web服务、数据库、文件系统和本地Java对象）的开箱即用任务。我们使用Backbase标签对从这些源获得的数据进行聚合，然后使用XSLT进行转换。结果以无格式XML数据或BXML表示代码的形式返回给BPC。

　　BXS还提供一些应用服务，包括身份验证、授权、日志记录和用户跟踪。图8显示了BXS的总体架构。

图8. BXS架构

Eclipse开发工具

　　为了让J2EE开发人员可以只使用一种开发工具就能创建完整的Web应用程序，包括富前端，Backbase提供了一个Eclipse插件。如图9所示，该插件提供了在Eclipse中突出显示语法和Backbase标签代码自动完成的功能。

图9. Backbase Eclipse插件

　　注意：Eclipse的可视化拖放开发插件还处在开发阶段。

部署到BEA WebLogic

　　BXS是一个与标准兼容的J2EE应用程序，可以将其部署到任何J2EE应用服务器上。图10显示了如何使用WebLogic控制台把BXS部署到BEA WebLogic Server。

图10. 把BXS部署到BEA WebLogic

实现Backbase RIA Pet Store

　　下面的顺序图包括更多详细信息，可以帮助您更好地理解如何实现Backbase pet store。该顺序图显示了在应用程序的初始化加载期间BPC与BXS之间的交互，如图11所示，它包括以下4个步骤：

  • 初始化：用户在浏览器中输入宠物商店的URL；对BPC进行初始化。
  • 应用程序布局：触发正在构造的事件；BPC构建整体应用程序布局；宠物类别被加载并显示在选项卡中。
  • 默认数据：默认情况下加载狗的类别；最初显示8张狗的图片，并带有向前/向后和排序功能。

　　用户交互：用户点击Next按钮便可显示编号从9到16的狗图片。

图11.顺序图：富商店前端

  • 初始化

    • 从用户在浏览器中输入宠物商店的URL开始，这将导致从Web服务器请求一个索引页面。

    索引页面包含用于实例化BPC的代码。索引页面是XHTML和BXML标签的结合，包含负责启动富前端的初始化事件处理程序。

    BPC初始化代码：

    <...><body onload="bpc.boot('/Backbase/')">

    <...>

      <xmp b:backbase="true"

              style="display:none;height:100%;">

        <s:loading>

          <div style="position:absolute;width:20%;

                         top: 50px;left: 35%;">

            <center>Please wait while loading...

            </center>

          </div>

        </s:loading>

        <...>

        <!-- Include petshop specific behaviors -->

        <s:include b:url="petshop.xml"/>
  • 应用程序布局

    • 加载页面之后，BPC就会处理正在构造的事件，以便开始构建总体的应用程序布局。

    应用程序布局由几个面板组成，它们将屏幕划分为几个部分。顶行有一个固定高度的宠物商店徽标，接下来的主行是实际的商店，大小可以调整。主行分为两列，左边一列是产品类别，右边一列是购物车和历史记录。

    产品类别使用选项卡式的导航，每个宠物类别一个选项卡。这些选项卡是动态构造的，具体过程是通过BXS从一个XML文件加载类别，然后通过一个客户端模板把这些类别转换为选项卡，该转换模板的BPC代码如下： 
    <s:task b:action="transform"

        b:stylesheet="b:xml('categories')"

        b:xmldatasource="b:url('categories.xml')"

        b:destination="id('main-content')" 

        b:mode="aslastchild" />

    下面是用于从文件系统把类别加载为XML的BXS代码：

    <bsd:pipeline equals="categories.xml"

                                     access="public">

        <bsd:readxml input="file:/categories.xml"/>

    </bsd:pipeline>

    下面是用于创建选项卡式导航的BPC客户端模板：

    <b:tabrow>

      <s:for-each b:select="categories/category">

        <b:tab>

          <s:attribute b:name="b:followstate">

            id('<s:value-of b:select="name"/>')

          </s:attribute>

          <s:value-of b:select="name"/>

        </b:tab>

      </s:for-each>

    </b:tabrow>

    所有BPC代码（用蓝色表示）都在客户端执行，而所有BXS代码（用红色表示）都在服务器端执行。注意，在本例中，我选择了在客户端进行转换，因为 数据集很小。下面我会给出一个在服务器端转换的例子。两种转换都要用到XSLT语法。Backbase的一个强大功能就是，前端开发人员可以根据情况选择 在客户端还是服务器端处理表示逻辑。语法似乎允许轻松地把代码从客户端移到服务器端，或者反之。

    以上的代码示例应该可以使您了解到，借助于Backbase，Ajax编程变得多么轻松。结合了DHTML的声明性方法则更容易上手。使用附加的B 标签不仅可以使界面更加丰富，而且可以使开发人员的效率更高。诸如<b:tab>之类的单个标签可以代替多行HTML和JavaScript 代码，而且保证可以用于各种浏览器。

  • 默认数据

    • 显示商店前端时，默认情况下显示的是狗的类别。对于本案例，BXS负责此项操作。BXS从一个Web服务获得数据，将其放入缓存，然后生成BXML 表示代码，再把这些表示代码发回给BPC。服务器还通过一项配置设置确定一个页面上可以显示的动物数量，并根据需要加入了Next和Previous按 钮。最后，服务器还提供了按照名称或价格进行排序的功能。

    下面的代码片断演示了服务器功能。外部管道products-overview.xml首先调用catalog.xml子管道。该子管道要么返回缓 存中的宠物信息，要么调用另一个子管道catalog.ws。在缓存没有命中的情况下，内部管道catalog.ws会从Web服务获取宠物信息。

    外部管道获得宠物信息，然后进行XSLT转换，从而以4x2表格显示这些信息，并带有Next和Previouse按钮，然后把BXML格式的代码发回给BPC。BPC呈现它接收到的BXML。

    有3个嵌套的BXS管道分别用于从Web服务获取数据、将其放入缓存，以及通过XSLT转换创建BXML输出： 

    <bsd:pipeline equals="products-overview.xml"

                                  access="public"/>

      <bsd:callpipe pipe="catalog.xml"/>
    <bsd:pipeline equals="catalog.xml" access="private">

      <bsd:exist field="{global:petstore-catalog}">

        <bsd:readxml>{global:petstore-catalog}

        </bsd:readxml>

        <bsd:otherwise>

          <bsd:callpipe pipe="catalog.ws"/>
    <bsd:pipeline equals="catalog.ws"

                                   access="private">

      <bsd:try>

        <bsd:callws wsdl="PetstoreCatalog.wsdl"

                                   method="getAll"/>

        <bsd:callpipe pipe="strip-root-ns"/>

        <bsd:catch>

          <bsd:xslt xslt="error.xslt">

            <bsd:param name="errormsg">{error:message}

            </bsd:param>

            <bsd:param name="errorsrc">{error:source}

            </bsd:param>

          </bsd:xslt>

        </bsd:catch>

      </bsd:try>

    </bsd:pipeline>
          <bsd:writexml>{global:petstore-catalog}

          </bsd:writexml>

        </bsd:otherwise>

      </bsd:exist>

    </bsd:pipeline>
    <bsd:extractfilter xpath=

      "category[name/text()='{requestparam:category}']"/> 

      <bsd:xslt xslt="products/products-overview.xslt">

        <bsd:param name="category">

          {requestparam:category}

        </bsd:param>

        <bsd:param name="stepsize">

          {global:stepsize}

        </bsd:param>

        <bsd:param name="sortorder">

          {requestparam:sortorder}

        </bsd:param>

        <bsd:param name="sortfield">

          {requestparam:sortfield}

        </bsd:param>

      </bsd:xslt>

    </bsd:pipeline>

    代码示例再次清楚地说明了，借助于Backbase，以声明性的方式创建Ajax前端是多么容易的事情。例如，只要使用带有一个WSDL引用作为属性的<bsd:callws>标签，就可以调用一个Web服务。

  • 用户交互

    • 现在，最终用户可以与宠物商店类别进行交互。可以使用Next或Previous按钮或者排序功能在动物类别中进行浏览。或者，只要点击一下相应的选项卡，就可以转到另一个类别中。

    BPC和BXS对这种交互进行了无缝处理。显示已经在客户端上的数据时，无需与服务器进行任何通信。例如，购物者已经从狗类别转到了猫类别，然后再 回到狗类别。客户端仍然拥有狗类别的数据，所以可以马上显示出来，这使得购物体验变得更完美。其他的类别需要从BXS获取。BXS要么立即从其缓存返回它 们，要们访问Web服务来获得新数据。

　　为了详细说明Backbase Ajax宠物商店的实现，我把重点放在了初始化的步骤上。完整的宠物商店（可以从http://www.backbase.com/xmlserver下载）还包括以下功能：

    • 商店前端
      • 初始化。
      • 使用从文件加载的宠物类别创建选项卡。
      • 默认情况下从Web服务加载Dog选项卡。
      • 通过缓存浏览Dog并对其进行排序。
    • 宠物详细情况
      • 使用跟踪聚合来自缓存和数据库的宠物详细情况。
      • 创建可视化历史记录。
    • 购物车
      • 使用跟踪添加到购物车。
    • 登录
      • 登录和身份验证。
    • 退出
      • 退出和授权。
      • 确认。

结束语

　　最近有很多人都在研究Ajax。Ajax的优点已经在实践中得到了证明。定制Ajax的缺点在于它的复杂性和不兼容性。大量客户端 JavaScript的出现意味着开发人员很可能陷入到浏览器实现差别的泥潭中去。另外，JavaScript这种语言不适用于复杂的应用程序。

　　为了开发易于管理的、可伸缩的和适应未来变化的Ajax解决方案，开发人员所需使用的工具应该具有比定制部件开发更多的功能。Backbase Ajax软件提供了一个功能全面的客户端GUI管理引擎(Backbase Presentation Client)、一个灵活的服务器端XML管道(Backbase XML Server)和一种声明性的基于标签的UI语言，BXML(Backbase eXtensible Markup Language)。该方法具有几个优点。

　　首先，Backbae易于使用。它的声明性语言水平地扩展了DHTML；它完全对开发人员隐藏了浏览器兼容性的问题；而且它带有一套开发和调试工具。

　　其次，Backbase是一个功能全面的Ajax GUI管理系统。Backbase的先进性大大超过了其他Ajax框架，它完全把重点放在提供一个部件库或客户端－服务器通信（如DWR）上。在控件和客 户端－服务器通信的基础上，Backbase提供了用于如下用途的标签：提供电影效果，随需应变的数据加载，数据绑定和客户端的数据转换，对于Back和 Forward按钮的支持，完善的GUI状态管理，等等。所有这些功能对于目前的Ajax Web应用程序来说都是必需的。

　　最后，Backbase是以兼容的方式提供所有客户端和服务器端的功能。用户可以使用富Ajax前端扩展现有的应用程序，同时无需修改后端。对于整个表示层来说，它的架构是时新的、模块化的，而且它基于XML。

参考资料

原文出处

A Backbase Ajax Front-end for J2EE Applications

http://dev2dev.bea.com/pub/a/2005/08/backbase_ajax.html

 作者简介

Mark Schiefelbein自2005年2月以来一直担任Backbase的产品管理主管。Mark极大地推动了Backbase Rich Internet Application的全球推广。


Vincent Chen 2006-03-20 21:53 发表评论
]]>Ajax简介http://www.blogjava.net/Vencent/articles/36445.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Mon, 20 Mar 2006 13:51:00 GMThttp://www.blogjava.net/Vencent/articles/36445.htmlhttp://www.blogjava.net/Vencent/comments/36445.htmlhttp://www.blogjava.net/Vencent/articles/36445.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/36445.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/36445.html 时间：2005-11-01
作者：David Teare
浏览次数：
本文关键字：ajax, dhtml, dwr,  javascript
文章工具
推荐给朋友 推荐给朋友
打印文章 打印文章

　　作为J2EE开发人员，我们似乎经常关注“后端机制（backend mechanics）”。我们通常会忘记，J2EE的主要成功之处在Web应用程序方面；许多原因使得人们喜欢利用Web开发应用程序，但主要还是因为其 易于部署的特点允许站点以尽可能低的成本拥有上百万的用户。遗憾的是，在过去几年中，我们在后端投入了太多的时间，而在使我们的Web用户界面对用户自然 和响应灵敏方面却投入不足。

　　本文介绍一种方法，Ajax，使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、 DHTML和与服务器异步通信的组合。本文也演示了启用这种方法是多么简单：利用一个Ajax框架（指DWR）构造一个应用程序，它直接从浏览器与后端服 务进行通信。如果使用得当，这种强大的力量可以使应用程序更加自然和响应灵敏，从而提升用户的浏览体验。

　　该应用程序中所使用的示例代码已打包为单独的WAR文件，可供下载。

简介

　　术语Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前，Web站点强制用户进入提交/等待/重新显示范 例，用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在 用户单击按钮时，使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用 JavaScript和CSS来相应地更新UI，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应 的。

　　虽然Ajax所需的基础架构已经出现了一段时间，但直到最近异步请求的真正威力才得到利用。能够拥有一个响应极其灵敏的Web站点确实激动人 心，因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的（desktop-like）”可用性。

　　通常，在J2EE中，开发人员过于关注服务和持久性层的开发，以至于用户界面的可用性已经落后。在一个典型的J2EE开发周期中，常常会听到这样的话，“我们没有可投入UI的时间”或“不能用HTML实现”。但是，以下Web站点证明，这些理由再也站不住脚了：

　　所有这些Web站点都告诉我们，Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。一切似乎就在瞬间发生。简而言之，在涉及到用户界面的响应灵敏度时，基准设得更高了。

定义Ajax

　　Adaptive Path公司的Jesse James Garrett这样定义Ajax：

　　Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：

  • 基于XHTML和CSS标准的表示；
  • 使用Document Object Model进行动态显示和交互；
  • 使用XMLHttpRequest与服务器进行异步通信；
  • 使用JavaScript绑定一切。

　　这非常好，但为什么要以Ajax命名呢？其实术语Ajax是由Jesse James Garrett创造的，他说它是“Asynchronous JavaScript + XML的简写”。

Ajax的工作原理

　　Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不 阻塞用户。

　　在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：

  • 动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
  • 提升站点的性 能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载 32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
  • 消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
  • 直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

　　一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。

Ajax可用于那些场景？——一个例子：MSN Money页面

　　前几天，在浏览MSN Money页面的时候，有一篇关于房地产投资的文章引起了我的好奇心。我决定使用站点的“Rate this article”（评价本文）功能，鼓励其他的用户花一点时间来阅读这篇文章。在我单击vote按钮并等待了一会儿之后，整个页面被刷新，在原来投票问题所在的地方出现了一个漂亮的感谢画面。

　　而Ajax能够使用户的体验更加愉快，它可以提供响应更加灵敏的UI，并消除页面刷新所带来的闪烁。目前，由于要刷新整个页面，需要传送大量的 数据，因为必须重新发送整个页面。如果使用Ajax，服务器可以返回一个包含了感谢信息的500字节的消息，而不是发送26,813字节的消息来刷新整个 页面。即使使用的是高速Internet，传送26K和1/2K的差别也非常大。同样重要的是，只需要刷新与投票相关的一小节，而不是刷新整个屏幕。

　　让我们利用Ajax实现自己的基本投票系统。

原始的Ajax：直接使用XmlHttpRequest

　　如上所述，Ajax的核心是JavaScript对象XmlHttpRequest。下面的示例文章评价系统将带您熟悉Ajax的底层基本知识：http://tearesolutions.com/ajax-demo/raw-ajax.html。注：如果您已经在本地WebLogic容器中安装了ajax-demo.war，可以导航到http://localhost:7001/ajax-demo/raw-ajax.html，

　　浏览应用程序，参与投票，并亲眼看它如何运转。熟悉了该应用程序之后，继续阅读，进一步了解其工作原理细节。

　　首先，您拥有一些简单的定位点标记，它连接到一个JavaScriptcastVote(rank)函数。 
function castVote(rank) {
  var url = "/ajax-demo/static-article-ranking.html";
  var callback = processAjaxResponse;
  executeXhr(callback, url);
}

　　该函数为您想要与之通信的服务器资源创建一个URL并调用内部函数executeXhr，提供一个回调JavaScript函数，一旦服务器响 应可用，该函数就被执行。由于我希望它运行在一个简单的Apache环境中，“cast vote URL”只是一个简单的HTML页面。在实际情况中，被调用的URL将记录票数并动态地呈现包含投票总数的响应。

　　下一步是发出一个XmlHttpRequest请求： 
function executeXhr(callback, url) {
  // branch for native XMLHttpRequest object
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
    req.onreadystatechange = callback;
    req.open("GET", url, true);
    req.send(null);
  } // branch for IE/Windows ActiveX version
  else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    if (req) {
      req.onreadystatechange = callback;
      req.open("GET", url, true);
      req.send();
    }
  }
}

　　如您所见，执行一个XmlHttpRequest并不简单，但非常直观。和平常一样，在JavaScript领域，大部分的工作量都花在确保浏 览器兼容方面。在这种情况下，首先要确定XmlHttpRequest是否可用。如果不能用，很可能要使用Internet Explorer，这样就要使用所提供的ActiveX实现。

executeXhr()方法中最关键的部分是这两行： 

req.onreadystatechange = callback;
req.open("GET", url, true);

　　第一行定义了JavaScript回调函数，您希望一旦响应就绪它就自动执行，而req.open()方法中所指定的“true”标志说明您想要异步执行该请求。

　　一旦服务器处理完XmlHttpRequest并返回给浏览器，使用req.onreadystatechange指派所设置的回调方法将被自动调用。 
function processAjaxResponse() {
  // only if req shows "loaded"
  if (req.readyState == 4) {
    // only if "OK"
    if (req.status == 200) {
      502 502'votes').innerHTML = req.responseText;
    } else {
      alert("There was a problem retrieving the XML data:
" +
      req.statusText);
    }
  }
}

　　该代码相当简洁，并且使用了几个幻数，这使得难以一下子看出发生了什么。为了弄清楚这一点，下面的表格（引用自http://developer.apple.com/internet/webcontent/xmlhttpreq.html）列举了常用的XmlHttpRequest对象属性。

属性

描述

onreadystatechange

每次状态改变所触发事件的事件处理程序

readyState

对象状态值：

  • 0 = 未初始化（uninitialized）
  • 1 = 正在加载（loading）
  • 2 = 加载完毕（loaded）
  • 3 = 交互（interactive）
  • 4 = 完成（complete）

responseText

从服务器进程返回的数据的字符串形式

responseXML

从服务器进程返回的DOM兼容的文档数据对象

status

从服务器返回的数字代码，比如404（未找到）或200（就绪）

statusText

伴随状态码的字符串信息

　　现在processVoteResponse()函数开始显示出其意义了。它首先检查XmlHttpRequest的整体状态以保证它已经完成 （readyStatus == 4），然后根据服务器的设定询问请求状态。如果一切正常（status == 200）,就使用innerHTML属性重写DOM的“votes”节点的内容。

　　既然您亲眼看到了XmlHttpRequest对象是如何工作的，就让我们利用一个旨在简化JavaScript与Java应用程序之间的异步通信的框架来对具体的细节进行抽象。

Ajax: DWR方式

　　按照与文章评价系统相同的流程，我们将使用Direct Web Remoting（DWR）框架实现同样的功能。

　　假定文章和投票结果存储在一个数据库中，使用某种对象/关系映射技术来完成抽取工作。为了部署起来尽可能地简单，我们不会使用数据库进行持久性 存储。此外，为使应用程序尽可能通用，也不使用Web框架。相反，应用程序将从一个静态HTML文件开始，可以认为它由服务器动态地呈现。除了这些简化措 施，应用程序还应该使用Spring Framework关联一切，以便轻松看出如何在一个“真实的”应用程序中使用DWR。

　　现在应该下载示例应用程序并熟悉它。该应用程序被压缩为标准的WAR文件，因此您可以把它放置到任何一个Web容器中——无需进行配置。部署完毕之后，就可以导航到http://localhost:7001/ajax_demo/dwr-ajax.html来运行程序。

　　可以查看HTML 源代码，了解它如何工作。给人印象最深的是，代码如此简单——所有与服务器的交互都隐藏在JavaScript对象ajaxSampleSvc的后面。更加令人惊讶的是，ajaxSampleSvc服务不是由手工编写而是完全自动生成的！让我们继续，看看这是如何做到的。

引入DWR

　　如同在“原始的Ajax”一节所演示的那样，直接使用XmlHttpRequest创建异步请求非常麻烦。不仅JavaScript代码冗长，而且必须考虑服务器端为定位Ajax请求到适当的服务所需做的工作，并将结果封送到浏览器。

　　设计DWR的目的是要处理将Web页面安装到后端服务上所需的所有信息管道。它是一个Java框架，可以很轻松地将它插入到Web应用程序中， 以便JavaScript代码可以调用服务器上的服务。它甚至直接与Spring Framework集成，从而允许用户直接向Web客户机公开bean。

　　DWR真正的巧妙之处是，在用户配置了要向客户机公开的服务之后，它使用反射来生成JavaScript对象，以便Web页面能够使用这些对象 来访问该服务。然后Web页面只需接合到生成的JavaScript对象，就像它们是直接使用服务一样；DWR无缝地处理所有有关Ajax和请求定位的琐 碎细节。

　　让我们仔细分析一下示例代码，弄清它是如何工作的。

应用程序细节：DWR分析

　　关于应用程序，首先要注意的是，它是一个标准的Java应用程序，使用分层架构（Layered Architecture）设计模式。使用DWR通过JavaScript公开一些服务并不影响您的设计。

　　下面是一个简单的Java服务，我们将使用DWR框架直接将其向JavaScript代码公开：

package com.tearesolutions.service;

public interface AjaxSampleSvc { 
  Article castVote(int rank);
}

　　这是一个被简化到几乎不可能的程度的例子，其中只有一篇文章可以投票。该服务由Spring管理，它使用的bean名是ajaxSampleSvc，它的持久性需求则依赖于ArticleDao。详情请参见applicationContext.xml。

　　为了把该服务公开为JavaScript对象，需要配置DWR，添加dwr.xml文件到WEB-INF目录下： 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
 "-//GetAhead Limited//DTD Direct Web Remoting 0.4//EN"
 "http://www.getahead.ltd.uk/dwr/dwr.dtd">

<dwr>
 <allow>
  <create creator="spring" javascript="ajaxSampleSvc">
   <param name="beanName" value="ajaxSampleSvc" />
  </create>
  <convert converter="bean" match="com.tearesolutions.model.Article"/>
  <exclude method="toString"/>
  <exclude method="setArticleDao"/>
 </allow>
</dwr>

　　dwr.xml文件告诉DWR哪些服务是要直接向JavaScript代码公开的。注意，已经要求公开Spring bean ajaxSampleSvc。DWR将自动找到由应用程序设置的SpringApplicationContext。为此，必须使用标准的servlet 过滤器ContextLoaderListener来初始化Spring ApplicationContext。

　　DWR被设置为一个servlet，所以把它的定义添加到web.xml： 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD 
 Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>
 <display-name>Ajax Examples</display-name>

 <listener>
  <listener-class>
      org.springframework.web.context.ContextLoaderListener
  </listener-class>
 </listener>

 <servlet>
  <servlet-name>ajax_sample</servlet-name>
  <servlet-class>com.tearesolutions.web.AjaxSampleServlet</servlet-class>
  <load-on-startup>1</load-on-startup>
 </servlet>

 <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>ajax_sample</servlet-name>
  <url-pattern>/ajax_sample</url-pattern>
 </servlet-mapping>

 <servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
 </servlet-mapping>
</web-app>

　　做完这些之后，可以加载http://localhost:7001/ajax-demo/dwr，看看哪些服务可用。结果如下：

图3. 可用的服务

　　单击ajaxSampleSvc链接，查看有关如何在HTML页面内直接使用服务的示例实现。其中包含的两个JavaScript文件完成了大部分的功能： 
<script type='text/javascript' 
   src='/ajax-demo/dwr/interface/ajaxSampleSvc.js'></script>
<script type='text/javascript' 
   src='/ajax-demo/dwr/engine.js'></script>

ajaxSampleSvc.js是动态生成的：

function ajaxSampleSvc() { }

ajaxSampleSvc.castVote = function(callback, p0)
{ 
  DWREngine._execute(callback, '/ajax-demo/dwr', 
 'ajaxSampleSvc', 'castVote', p0);
}

　　现在可以使用JavaScript对象ajaxSampleSvc替换所有的XmlHttpRequest代码，从而重构raw-ajax.html文件。可以在dwr-ajax.html文件中看到改动的结果；下面是新的JavaScript函数：

function castVote(rank) {
  ajaxSampleSvc.castVote(processResponse, rank);
}
function processResponse(data) {
 var voteText = "
Thanks for Voting!
"
    + "
Current ranking: " + data.voteAverage 
    + " out of 5
" 
    + "
Number of votes placed: " 
    + data.numberOfVotes + "
";
 502 502'votes').innerHTML = voteText;       
}

　　惊人地简单，不是吗？由ajaxSampleSvc对象返回的Article域对象序列化为一个JavaScript对象，允许在它上面调用诸 如numberOfVotes()和voteAverage()之类的方法。在动态生成并插入到DIV元素“votes”中的HTML代码内使用这些数 据。

下一步工作

　　　在后续文章中，我将继续有关Ajax的话题，涉及下面这些方面：

  • Ajax最佳实践

　　像许多技术一样，Ajax是一把双刃剑。对于一些用例，其应用程序其实没有必要使用Ajax，使用了反而有损可用性。我将介绍一些不适合使用的模式，突出说明Ajax的一些消极方面，并展示一些有助于缓和这些消极方面的机制。例如，对Netflix电影浏览器来说，Ajax是合适的解决方案吗？或者，如何提示用户确实出了一些问题，而再次单击按钮也无济于事？

  • 管理跨请求的状态

　　在使用Ajax时，最初的文档DOM会发生一些变化，并且有大量的页面状态信息存储在客户端变量中。当用户跟踪一个链接到应用程序中的另一个页面时，状态就丢失了。当用户按照惯例单击Back按钮时，呈现给他们的是缓存中的初始页面。这会使用户感到非常迷惑！

  • 调试技巧

　　使用JavaScript在客户端执行更多的工作时，如果事情不按预期方式进行，就需要一些调试工具来帮助弄清出现了什么问题。

结束语

　　本文介绍了Ajax方法，并展示了如何使用它来创建一个动态且响应灵敏的Web应用程序。通过使用DWR框架，可以轻松地把Ajax融合到站点中，而无需担心所有必须执行的实际管道工作。

　　特别感谢Getahead IT咨询公司的Joe Walker和他的团队开发出DWR这样神奇的工具。感谢你们与世界共享它！

下载

　　本文中演示的应用程序源代码可供下载：ajax-demo.war（1.52 MB）。

参考资料

原文出处

An Introduction To Ajax

http://dev2dev.bea.com/pub/a/2005/08/ajax_introduction.html



Vincent Chen 2006-03-20 21:51 发表评论
]]>prototype.js开发笔记http://www.blogjava.net/Vencent/articles/36443.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Mon, 20 Mar 2006 13:47:00 GMThttp://www.blogjava.net/Vencent/articles/36443.htmlhttp://www.blogjava.net/Vencent/comments/36443.htmlhttp://www.blogjava.net/Vencent/articles/36443.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/36443.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/36443.html阅读全文

Vincent Chen 2006-03-20 21:47 发表评论
]]>prototype.js 源码解读v1.3.1版本http://www.blogjava.net/Vencent/articles/36442.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Mon, 20 Mar 2006 13:45:00 GMThttp://www.blogjava.net/Vencent/articles/36442.htmlhttp://www.blogjava.net/Vencent/comments/36442.htmlhttp://www.blogjava.net/Vencent/articles/36442.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/36442.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/36442.html阅读全文

Vincent Chen 2006-03-20 21:45 发表评论
]]>面向 Java 开发人员的 Ajax: 结合 Direct Web Remoting 使用 Ajax::数据序列化不可能比这更简单了！http://www.blogjava.net/Vencent/articles/36075.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sun, 19 Mar 2006 08:04:00 GMThttp://www.blogjava.net/Vencent/articles/36075.htmlhttp://www.blogjava.net/Vencent/comments/36075.htmlhttp://www.blogjava.net/Vencent/articles/36075.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/36075.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/36075.html级别: 中级

Philip McCarthy, 软件开发顾问, Independent Consultant

2005 年 12 月 27 日

虽然令人兴奋，但是把 Ajax 功能添加到应用程序可能意味着大量的艰苦工作。在面向 Java® 开发人员的 Ajax 系列的第 3 篇文章中，Philip McCarthy 介绍了如何使用Direct Web Remoting（DWR）直接把 JavaBean 的方法公开给 JavaScript 代码并自动进行 Ajax 的繁重工作。

理解 Ajax 编程的基本知识 是重要的，但是如果正在构建复杂的用户界面，那么能够在更高层次的抽象上工作也很重要。在面向 Java 开发人员的 Ajax 系列的第 3 篇文章中，我在上个月的 Ajax 的数据序列化技术 基础之上，介绍一种可以避免繁琐的 Java 对象序列化细节的技术。

在 上一篇文章 中，我介绍了如何用 JavaScript 对象标注（JSON）以一种在客户机上容易转化成 JavaScript 对象的格式对数据进行序列化。有了这个设置，就可以用 JavaScript 代码调用远程服务，并在响应中接收 JavaScript 对象图，但是又不像远程过程调用。这一次，将学习如何更进一步，使用一个框架，把从 JavaScript 客户代码对服务器端 Java 对象进行远程调用的能力正式化。

DWR 是一个开放源码的使用 Apache 许可协议的解决方案，它包含服务器端 Java 库、一个 DWR servlet 以及 JavaScript 库。虽然 DWR 不是 Java 平台上唯一可用的 Ajax-RPC 工具包，但是它是最成熟的，而且提供了许多有用的功能。请参阅 参考资料，在继续学习之前下载 DWR。

DWR 是什么？

从最简单的角度来说，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 之前，我要介绍一个简单的示例场景。像在前一篇文章中一样，我将采用一个基于在线商店的最小模型，这次包含一个基本的产品表示、一个可以包含产品商品的用户购物车以及一个从数据存储查询产品的数据访问对象（DAO）。Item 类与前一篇文章中使用的一样，但是不再实现任何手工序列化方法。图 1 说明了这个简单的设置：


图 1. 说明 Cart、CatalogDAO 和 Item 类的类图

在这个场景中，我将演示两个非常简单的用例。第一，用户可以在目录中执行文本搜索并查看匹配的商品。第二，用户可以添加商品到购物车中并查看购物车中商品的总价。


回页首


实现目录

DWR 应用程序的起点是编写服务器端对象模型。在这个示例中，我从编写 DAO 开始，用它提供对产品目录数据存储的搜索功能。CatalogDAO.java 是一个简单的无状态的类，有一个无参数的构造函数。清单 1 显示了我想要公开给 Ajax 客户的 Java 方法的签名：


清单 1. 通过 DWR 公开的 CatalogDAO 方法 
												
														

														
/**
 * Returns a list of items in the catalog that have 
 *  names or descriptions matching the search expression
 * @param expression Text to search for in item names 
 *  and descriptions 
 * @return list of all matching items
 */
public List<Item> findItems(String expression);

/**
 * Returns the Item corresponding to a given Item ID
 * @param id The ID code of the item
 * @return the matching Item
 */
public Item getItem(String id);

接下来，我需要配置 DWR，告诉它 Ajax 客户应当能够构建 CatalogDAO 并调用这些方法。我在清单 2 所示的 dwr.xml 配置文件中做这些事：


清单 2. 公开 CatalogDAO 方法的配置 
												
														

														
<!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="catalog">
      <param name="class" 
        value="developerworks.ajax.store.CatalogDAO"/>
      <include method="getItem"/> 
      <include method="findItems"/> 
    </create> 
    <convert converter="bean" 
      match="developerworks.ajax.store.Item">
      <param name="include" 
        value="id,name,description,formattedPrice"/>
    </convert>
  </allow>
</dwr>

dwr.xml 文档的根元素是 dwr。在这个元素内是 allow 元素，它指定 DWR 进行远程的类。allow 的两个子元素是 create 和 convert。

create 元素

create 元素告诉 DWR 应当公开给 Ajax 请求的服务器端类，并定义 DWR 应当如何获得要进行远程的类的实例。这里的 creator 属性被设置为值 new， 这意味着 DWR 应当调用类的默认构造函数来获得实例。其他的可能有：通过代码段用 Bean 脚本框架（Bean Scripting Framework，BSF）创建实例，或者通过与 IOC 容器 Spring 进行集成来获得实例。默认情况下，到 DWR 的 Ajax 请求会调用 creator，实例化的对象处于页面范围内，因此请求完成之后就不再可用。在无状态的 CatalogDAO 情况下，这样很好。

create 的 javascript 属性指定从 JavaScript 代码访问对象时使用的名称。嵌套在 create 元素内的 param 元素指定 creator 要创建的 Java 类。最后，include 元素指定应当公开的方法的名称。显式地说明要公开的方法是避免偶然间允许访问有害功能的良好实践 —— 如果漏了这个元素，类的所有方法都会公开给远程调用。反过来，可以用 exclude 元素指定那些想防止被访问的方法。

convert 元素

creator 负责公开用于 Web 远程的类和类的方法，convertor 则负责这些方法的参数和返回类型。convert 元素的作用是告诉 DWR 在服务器端 Java 对象表示和序列化的 JavaScript 之间如何转换数据类型。

DWR 自动地在 Java 和 JavaScript 表示之间调整简单数据类型。这些类型包括 Java 原生类型和它们各自的类表示，还有 String、Date、数组和集合类型。DWR 也能把 JavaBean 转换成 JavaScript 表示，但是出于安全性的原因，做这件事要求显式的配置。

清单 2 中的 convert 元素告诉 DWR 用自己基于反射的 bean 转换器处理 CatalogDAO 的公开方法返回的 Item，并指定序列化中应当包含 Item 的哪个成员。成员的指定采用 JavaBean 命名规范，所以 DWR 会调用对应的 get 方法。在这个示例中，我去掉了数字的 price 字段，而是包含了 formattedPrice 字段，它采用货币格式进行显示。

现在，我准备把 dwr.xml 部署到 Web 应用程序的 WEB-INF 目录，在那里 DWR servlet 会读取它。但是，在继续之前，确保每件事都按照希望的那样运行是个好主意。


回页首


测试部署

如果 DWRServlet 的 web.xml 定义把 init-param debug 设置为 true，那么就启用了 DWR 非常有帮助的测试模式。导航到 /{your-web-app}/dwr/ 会把 DWR 配置的要进行远程的类列表显示出来。在其中点击，会进入指定类的状态屏幕。CatalogDAO 的 DWR 测试页如图 2 所示。除了提供粘贴到 Web 页面的 script 标记（指向 DWR 为类生成的 JavaScript）之外，这个屏幕还提供了类的方法列表。这个列表包括从类的超类继承的方法，但是只有在 dwr.xml 中显式地指定为远程的才标记为可访问。


图 2. CatalogDAO 的 DWR 测试页
DWR 为 CatalogDAO 生成的诊断和测试页

可以在可访问的方法旁边的文本框中输入参数值并点击 Execute 按钮调用方法。服务器的响应将在警告框中用 JSON 标注显示出来，如果是简单值，就会内联在方法旁边直接显示。这个测试页非常有用。它们不仅允许检查公开了哪个类和方法用于远程，还可以测试每个方法是否像预期的那样工作。

如果对远程方法的工作感到满意，就可以用 DWR 生成的 JavaScript 存根从客户端代码调用服务器端对象。


回页首


调用远程对象

远程 Java 对象方法和对应的 JavaScript 存根函数之间的映射很简单。通用的形式是 JavaScriptName.methodName(methodParams ..., callBack)，其中 JavaScriptName 是 creator 的 javascript 属性指定的名称，methodParams 代表 Java 方法的 n 个参数，callback 是要用 Java 方法的返回值调用的 JavaScript 函数。如果熟悉 Ajax，可以看出这个回调机制是 XMLHttpRequest 异步性的常用方式。

在示例场景中，我用清单 3 中的 JavaScript 函数执行搜索，并用搜索结果更新用户界面。这个清单还使用来自 DWR 的 util.js 的便捷函数。要特别说明的是名为 $() 的 JavaScript 函数，可以把它当作 document.getElementById() 的加速版。录入它当然更容易。如果您使用过 JavaScript 原型库，应当熟悉这个函数。


清单 3. 从客户机调用远程的 findItems() 
												
														

														
/*
 * Handles submission of the search form
 */
function searchFormSubmitHandler() {

  // Obtain the search expression from the search field
  var searchexp = $("searchbox").value;

  // Call remoted DAO method, and specify callback function
  catalog.findItems(searchexp, displayItems);

  // Return false to suppress form submission
  return false;
}

/*
 * Displays a list of catalog items
 */
function displayItems(items) {

  // Remove the currently displayed search results
  DWRUtil.removeAllRows("items");

  if (items.length == 0) {
    alert("No matching products found");
    $("catalog").style.visibility = "hidden";
  } else {

    DWRUtil.addRows("items",items,cellFunctions);
    $("catalog").style.visibility = "visible";
  }
}

在上面的 searchFormSubmitHandler() 函数中，我们感兴趣的代码当然是 catalog.findItems(searchexp, displayItems);。这一行代码就是通过网络向 DWR servlet 发送 XMLHttpRequest 并用远程对象的响应调用 displayItems() 函数所需要的全部内容。

displayItems() 回调本身是由一个 Item 数组表示调用的。这个数组传递给 DWRUtil.addRows() 便捷函数，同时还有要填充的表的 ID 和一个函数数组。表中每行有多少单元格，这个数组中就有多少个函数。按照顺序使用来自数组的 Item 逐个调用每个函数，并用返回的内容填充对应的单元格。

在这个示例中，我想让商品表中的每一行都显示商品的名称、说明和价格，并在最后一列显示商品的 Add to Cart 按钮。清单 4 显示了实现这一功能的单元格函数数组：


清单 4. 填充商品表的单元格函数数组 
												
														

														
/*
 * Array of functions to populate a row of the items table
 * using DWRUtil's addRows function
 */
var cellFunctions = [
  function(item) { return item.name; },
  function(item) { return item.description; },
  function(item) { return item.formattedPrice; },
  function(item) {
    var btn = document.createElement("button");
    btn.innerHTML = "Add to cart";
    btn.itemId = item.id;
    btn.onclick = addToCartButtonHandler;
    return btn;
  }
];

前三个函数只是返回 dwr.xml 中 Item 的 convertor 包含的字段内容。最后一个函数创建一个按钮，把 Item 的 ID 赋给它，并指定在点击按钮时应当调用名为 addToCartButtonHandler 的函数。这个函数是第二个用例的入口点：向购物车中添加 Item。


回页首


实现购物车

DWR 的安全性

DWR 设计时就考虑了安全性。使用 dwr.xml 明确地列出那些想做远程处理的类和方法，可以避免意外地把那些可能被恶意利用的功能公开出去。除此之外，使用调试测试模式，可以容易地审计所有公开到 Web 上的类和方法。

DWR 也支持基于角色的安全性。通过 bean 的 creator 配置，可以指定用户访问特定 bean 所必须属于的 J2EE 角色。通过部署多个 URL 受保护的 DWRServlet 实例，每个实例都有自己的 dwr.xml 配置文件，也可以提供拥有不同远程功能的用户集。

用户购物车的 Java 表示基于 Map。当 Item 添加到购物车中时，Item 本身作为键被插入 Map。 Map 中对应的值是一个 Integer，代表购物车中指定 Item 的数量。所以 Cart.java 有一个字段 contents，声明为 Map<Item,Integer>。

使用复杂类型作为哈希键给 DWR 带来一个问题 —— 在 JavaScript 中，数组的键必须是标量的。所以，DWR 无法转换 contents Map。但是，对于购物车用户界面来说，用户需要查看的只是每个商品的名称和数量。所以我向 Cart 添加了一个名为 getSimpleContents() 的方法，它接受 contents Map 并根据它构建一个简化的 Map<String,Integer>，只代表每个 Item 的名称和数量。这个用字符串作为键的 map 表示可以由 DWR 的转换器转换成 JavaScript。

客户对 Cart 感兴趣的其他字段是 totalPrice，它代表购物车中所有商品的金额汇总。使用 Item，我还提供了一个合成的成员叫作 formattedTotalPrice，它是金额汇总的格式化好的 String 表示。

转换购物车

为了不让客户代码对 Cart 做两个调用（一个获得内容，一个获得总价），我想把这些数据一次全都发给客户。为了做到这一点，我添加了一个看起来有点儿怪的方法，如清单 5 所示：


清单 5. Cart.getCart() 方法 
												
														

														
/**
 * Returns the cart itself - for DWR
 * @return the cart
 */ 
public Cart getCart() {
  return this;
}

虽然这个方法在普通的 Java 代码中可能完全是多余的（因为在调用这个方法时，已经有对 Cart 的引用），但它允许 DWR 客户让 Cart 把自己序列化成 JavaScript。

除了 getCart()，需要远程化的另一个方法是 addItemToCart()。这个方法接受目录 Item 的 ID 的 String 表示，把这个商品添加到 Cart 中并更新总价。方法还返回 Cart，这样客户代码在一个操作中就能更新 Cart 的内容并接收购物车的新状态。

清单 6 是扩展的 dwr.xml 配置文件，包含 Cart 类进行远程所需要的额外配置：


清单 6. 修改过的 dwr.xml 包含了 Cart 类 
												
														

														
<!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="catalog">
      </param name="class" 
        value="developerworks.ajax.store.CatalogDAO"/>
      </include method="getItem"/>
      </include method="findItems"/>
    <//create>
    </convert converter="bean" 
      match="developerworks.ajax.store.Item">
      </param name="include" 
        value="id,name,description,formattedPrice"/>
    <//convert>
    </create creator="new" scope="session" javascript="Cart">
      </param name="class" 
        value="developerworks.ajax.store.Cart"/>
      </include method="addItemToCart"/>
      </include method="getCart"/>
    <//create>
    </convert converter="bean" 
      match="developerworks.ajax.store.Cart">
      </param name="include" 
        value="simpleContents,formattedTotalPrice"/>
    <//convert>
  <//allow>
</dwr>

在这个版本的 dwr.xml 中，我添加了 Cart 的 creator 和 convertor。create 元素指定应当把 addItemToCart() 和 getCart() 方法远程化，而且重要的是，生成的 Cart 实例应当放在用户的会话中。所以，购物车的内容在用户的请求之间会保留。

Cart 的 convert 元素是必需的，因为远程的 Cart 方法返回的是 Cart 本身。在这里我指定在 Cart 的序列化 JavaScript 形式中应当存在的成员是 simpleContents 这个图和 formattedTotalPrice 这个字符串。

如果对这觉得有点儿不明白，那么只要记住 create 元素指定的是 DWR 客户可以调用的 Cart 服务器端方法，而 convert 元素指定在 Cart 的 JavaScript 序列化形式中包含的成员。

现在可以实现调用 Cart 的远程方法的客户端代码了。


回页首


调用远程的 Cart 方法

首先，当商店的 Web 页首次装入时，我想检查保存在会话中的 Cart 的状态，看是否已经有一个购物车了。这是必需的，因为用户可能已经向 Cart 中添加了商品，然后刷新了页面或者导航到其他地方之后又返回来。在这些情况下，重新载入的页面需要用会话中的 Cart 数据对自己进行同步。我可以在页面的 onload 函数中用一个调用做到这一点，就像这样：Cart.getCart(displayCart)。请注意 displayCart() 是一个回调函数，由服务器返回的 Cart 响应数据调用。

如果 Cart 已经在会话中，那么creator 会检索它并调用它的 getCart() 方法。如果会话中没有 Cart，那么 creator 会实例化一个新的，把它放在会话中，并调用 getCart() 方法。

清单 7 显示了 addToCartButtonHandler() 函数的实现，当点击商品的 Add to Cart 按钮时会调用这个函数：


清单 7. addToCartButtonHandler() 实现 
												
														

														
/*
 * Handles a click on an Item's "Add to Cart" button
 */
function addToCartButtonHandler() {

  // 'this' is the button that was clicked.
  // Obtain the item ID that was set on it, and
  // add to the cart.
  Cart.addItemToCart(this.itemId,displayCart);
}

由 DWR 负责所有通信，所以客户上的添加到购物车行为就是一个函数。清单 8 显示了这个示例的最后一部分 —— displayCart() 回调的实现，它用 Cart 的状态更新用户界面：


清单 8. displayCart() 实现 
												
														

														
/*
 * Displays the contents of the user's shopping cart
 */
function displayCart(cart) {

  // Clear existing content of cart UI
  var contentsUL = $("contents");
  contentsUL.innerHTML="";

  // Loop over cart items
  for (var item in cart.simpleContents) {

    // Add a list element with the name and quantity of item
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(
                    cart.simpleContents[item] + " x " + item
                  ));
    contentsUL.appendChild(li);
  }

  // Update cart total
  var totalSpan = $("totalprice");
  totalSpan.innerHTML = cart.formattedTotalPrice;
}

在这里重要的是要记住，simpleContents 是一个把 String 映射到数字的 JavaScript 数组。每个字符串都是一个商品的名称，关联数组中的对应数字就是购物车中该商品的数量。所以表达式 cart.simpleContents[item] + " x " + item 可能就会计算出 “2 x Oolong 128MB CF Card” 这样的结果。

DWR 商店应用程序

图 3 显示了这个基于 DWR 的 Ajax 应用程序的使用情况：显示了通过搜索检索到的商品，并在右侧显示用户的购物车：


图 3. 基于 DWR 的 Ajax 商店应用程序的使用情况
示例场景的截屏，带有搜索结果和购物车




回页首


DWR 的利弊

调用批处理

在 DWR 中，可以在一个 HTTP 请求中向服务器发送多个远程调用。调用 DWREngine.beginBatch() 告诉 DWR 不要直接分派后续的远程调用，而是把它们组合到一个批请求中。DWREngine.endBatch() 调用则把批请求发送到服务器。远程调用在服务器端顺序执行，然后调用每个 JavaScript 回调。

批处理在两方面有助于降低延迟：第一，避免了为每个调用创建 XMLHttpRequest 对象并建立相关的 HTTP 连接的开销。第二，在生产环境中，Web 服务器不必处理过多的并发 HTTP 请求，改进了响应时间。

现在可以看出用 DWR 实现由 Java 支持的 Ajax 应用程序有多么容易了。虽然示例场景很简单，我实现用例的手段也尽可能少，但是不应因此而低估 DWR 引擎相对于自己设计 Ajax 应用程序可以节约的工作量。在前一篇文章中，我介绍了手工设计 Ajax 请求和响应、把 Java 对象图转化成 JSON 表示的全部步骤，在这篇文章中，DWR 替我做了所有这些工作。我只编写了不到 50 行 JavaScript 就实现了客户机，而在服务器端，我需要做的所有工作就是给常规的 JavaBean 加上一些额外方法。

当然，每种技术都有它的不足。同任何 RPC 机制一样，在 DWR 中，可能很容易忘记对于远程对象进行的每个调用都要比本地函数调用昂贵得多。DWR 在隐藏 Ajax 的机械性方面做得很好，但是重要的是要记住网络并不是透明的 —— 进行 DWR 调用会有延迟，所以应用程序的架构应当让远程方法的粒度比较粗。正是为了这个目的，addItemToCart() 才返回 Cart 本身。虽然让 addItemToCart() 作为一个 void 方法可能更自然，但是这样的话对它的每个 DWR 调用后面都必须跟着一个 getCart() 调用以检索修改后的 Cart 状态。

对于延迟，DWR 在调用的批处理中有自己的解决方案（请参阅侧栏的 调用批处理）。如果不能为应用程序提供适当粗粒度的 Ajax 接口，那么只要有可能把多个远程调用组合到一个 HTTP 请求中，就请使用调用批处理。

分离的问题

从实质上看，DWR 在客户端和服务器端代码间形成了紧密的耦合，这有许多含义：首先，远程方法 API 的变化需要在 DWR 存根调用的 JavaScript 上反映出来。第二（也是最明显的），这种耦合会造成对客户端的考虑会渗入服务器端代码。例如，因为不是所有 Java 类型都能转化成 JavaScript，所以有时有必要给 Java 对象添加额外方法，好让它能够更容易地远程化。在示例场景中，我通过把 getSimpleContents() 方法添加到 Cart 来解决这个问题。我还添加了 getCart() 方法，它在 DWR 场景中是有用的，但在其他场景中则完全是多余的。由于远程对象粗粒度 API 的需要以及把某些 Java 类型转化成 JavaScript 的问题，所以可以看到远程 JavaBean 会被那些只对 Ajax 客户有用的方法“污染”。

为了克服这个问题，可以使用包装器类把额外的特定于 DWR 的方法添加到普通 JavaBean。这意味着 JavaBean 类的 Java 客户可能看不到与远程相关联的额外的毛病，而且也允许给远程方法提供更友好的名称 —— 例如用 getPrice() 代替 getFormattedPrice()。图 4 显示的 RemoteCart 类对 Cart 进行了包装，添加了额外的 DWR 功能：


图 4. RemoteCart 为远程功能对 Cart 做了包装
RemoteCart 包装器类的类图

最后，需要记住：DWR Ajax 调用是异步的，所以不要期望它们会按照分派的顺序返回。在示例代码中我忽略了这个小问题，但是在这个系列的第一篇文章中，我演示了如何为响应加时间戳，以此作为保证数据到达顺序的一种简单手段。


回页首


结束语

正如所看到的，DWR 提供了许多东西 —— 它允许迅速而简单地创建到服务器端域对象的 Ajax 接口，而不需要编写任何 servlet 代码、对象序列化代码或客户端 XMLHttpRequest 代码。使用 DWR 部署到 Web 应用程序极为简单，而且 DWR 的安全性特性可以与 J2EE 基于角色的验证系统集成。但是 DWR 并不是对于任何一种应用程序架构都适合，所以在设计域对象的 API 时需要做些考虑。

如果想学习用 DWR 进行 Ajax 的利弊的更多内容，最好的方式就是下载并开始实践。DWR 有许多我没有介绍的特性， 文章源代码 是把 DWR 投入使用的一个良好起点。请参阅 参考资料，学习关于 Ajax、DWR 和相关技术的更多内容。

这个系列中要指出的最重要的一点是：对于 Ajax 应用程序，没有包治百病的解决方案。Ajax 是一个快速发展的领域，不断有新技术涌现。在这个系列的三篇文章中，我的重点在于带您开始在 Ajax 应用程序的 Web 层中利用 Java 技术 —— 不管是选择基于 XMLHttpRequest 的带有对象序列化框架的技术，还是选择 DWR 这样的更高级抽象。请在后续几个月中留意面向 Java 开发人员介绍 Ajax 的文章。


回页首


下载

描述 名字 大小 下载方法
DWR source code j-ajax3dwr.zip 301 KB  FTP
关于下载方法的信息 Get Adobe® Reader®




回页首


参考资料

学习

获得产品和技术

讨论




回页首


关于作者


Philip McCarthy 是一位软件开发顾问，专攻 Java 和 Web 技术。他目前在位于 Bristol 的 HP 试验室从事 Hewlett Packard 数字媒体平台的工作 。在最近几年中，Phil 开发了多个采用异步服务器通信和 DOM 脚本的富 Web 客户端。他很高兴我们现在有了一个针对它们的名称。可以通过 Phil 的电子邮件 philmccarthy@gmail.com 与他联系。



Vincent Chen 2006-03-19 16:04 发表评论
]]>面向 Java 开发人员的 Ajax: Ajax 的 Java 对象序列化::在 Ajax 应用程序中序列化数据的五种途径http://www.blogjava.net/Vencent/articles/36074.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sun, 19 Mar 2006 08:03:00 GMThttp://www.blogjava.net/Vencent/articles/36074.htmlhttp://www.blogjava.net/Vencent/comments/36074.htmlhttp://www.blogjava.net/Vencent/articles/36074.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/36074.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/36074.html级别: 中级

Philip McCarthy, 软件开发顾问, 独立顾问

2005 年 10 月 24 日

如果您正在使用异步 JavaScript 和 XML（Ajax）进行 Java™ Web 开发，那么您最关心的问题可能就是把数据从服务器传递给客户机。在 面向 Java 开发人员的 Ajax 系列的第二篇文章中，Philip McCarthy 介绍了 Java 对象序列化的五种方式，并提供了选择最适合应用程序的数据格式和技术所需要的全部信息。

在这个系列的 第一篇文章 中，我介绍了 Ajax 的构造块：

  • 如何用 JavaScript XMLHttpRequest 对象从 Web 页面向服务器发送异步请求。
  • 如何用 Java servlet 处理和响应请求（向客户机返回 XML 文档）。
  • 如何在客户端用响应文档更新页面视图。

这一次，我将继续讨论 Ajax 开发的基础知识，但是将侧重于许多 Java Web 开发人员最关心的问题：为客户机生成数据。

多 数 Java 开发人员已经把模型-视图-控制器（MVC）模式应用在他们的 Web 应用程序上。在传统的 Web 应用程序中，视图组件由 JSP 或者其他表示技术（例如 Velocity 模板）构成。这些表示组件动态地生成全新的 HTML 页面，替代用户以前正在查看的页面，从而更新用户界面。但是，在 Java Web 应用程序使用 Ajax UI 的情况下，基于从 XMLHttpRequest 的响应接收到的数据，JavaScript 客户端代码对于更新用户看到的内容负有最终责任。从服务器的角度来看，视图成为它响应客户机请求而发送的数据表示。

这 篇文章侧重于可以用来生成 Java 对象以数据为中心的视图的技术。我将演示可以把 JavaBeans 变成 XML 文档的各种方法，并且讨论每种方法的优劣。您将看到为什么 XML 并不总是最好的途径：对于简单的 Ajax 请求来说，传输纯文本更好。最后，我将介绍 JavaScript 对象标注（JSON）。JSON 允许数据以序列化的 JavaScript 对象图的形式传输，在客户端代码中处理序列化的 JavaScript 对象图极为容易。

关于示例

我将使用一个示例应用程序和几个用例来演示这里讨论的技术特性和技术。图 1 显示的极为简单的数据模型可以表示示例用例。这个模型代表在线商店中的顾客帐户。顾客拥有以前订单的集合，每个订单包含几个商品。


图 1. 简单的对象模型
代表顾客帐户的对象模型

虽然 XMLHttpRequest 对于发送数据使用的格式没有做任何限制，但是对于多数目的来说，只发送传统的表单数据是适合的，所以我的讨论集中在服务器的响应上。响应也可以有基于文本的格式，但是正如它的名字表示的，XMLHttpRequest 具有内置的处理 XML 响应数据的能力。这使 XML 成为 Ajax 响应的默认选择，所以我们从 XML 格式开始讨论。


回页首


从 Java 类产生 XML

把 Ajax 响应作为 XML 来传递有许多原因：每个支持 Ajax 的浏览器都有导航 XML 文档的方法，也有许多服务器端技术可以处理 XML 数据。通过制定一个方案，描述要交换的文档类型，在 Ajax 客户端和服务器端之间很容易定义合约，而且如果服务器端架构采用面向服务的方式，那么使用 XML 也可以允许非 Ajax 客户机使用您提供的数据。

我将考虑从 Java 对象产生 XML 数据的三种方法，并讨论每种方法的优劣。


回页首


自行进行序列化

首先，可以从对象图以编程的方式生成 XML。这种方式可以简单到只是在每个 JavaBean 类中实现 toXml() 方法即可。然后就可以选择合适的 XML API，让每个 bean 提供表示自己状态的元素，并递归地对自己的成员调用对象图。显然，这种方式无法扩展到大量的类，因为每个类都需要专门编写自己的 XML 生成代码。从好的方面来看，这是一个实现起来简单的方式，没有额外的配置支出或者更复杂的构建过程支出，任何 JavaBean 图都可以只用几个调用就变成 XML 文档。

在本系列 前一篇文章 的示例代码中，我把 XML 标记字符串连接在一起，实现了 toXml() 方法。上次我就提到过，这是个糟糕的方法，因为它把确保标记配对、实体编码等工作的负担放在每个 toXml() 方法的代码中。在 Java 平台上有几个 XML API 可以替您做这些工作，这样您就可以把精力集中在 XML 的内容上。清单 1 用 JDOM API 实现了在线商店示例中表示订单的类中的 toXml()（请参阅 图 1）。


清单 1. Order 类的 toXml() 的 JDOM 实现 
												
														

														
public Element toXml() {

  Element elOrder = new Element("order");
  elOrder.setAttribute("id",id);

  elOrder.setAttribute("cost",getFormattedCost());

  Element elDate = new Element("date").addContent(date);
  elOrder.addContent(elDate);

  Element elItems = new Element("items");
  for (Iterator<Item> iter = 
   items.iterator() ; iter.hasNext() ; ) {
    elItems.addContent(iter.next().toXml());
  }
  elOrder.addContent(elItems);

  return elOrder;
}

在这里可以看到用 JDOM 创建元素、使用属性和添加元素内容有多么简单。递归地调用复合 JavaBean 的 toXml() 方法是为了取得它们子图的 Element 表示。例如，items 元素的内容是通过调用 Order 聚合的每个 Item 对象上的 toXml() 得到的。

一旦所有的 JavaBean 都实现了 toXml() 方法，那么把任意对象图序列化成 XML 文档并返回给 Ajax 客户机就简单了，如清单 2 所示。


清单 2. 从 JDOM 元素生成 XML 响应 
												
														

														
public void doGet(HttpServletRequest req, HttpServletResponse res)
  throws java.io.IOException, ServletException {

    String custId = req.getParameter("username");
    Customer customer = getCustomer(custId);

    Element responseElem = customer.toXml();
    Document responseDoc = new Document(responseElem);

    res.setContentType("application/xml");
    new XMLOutputter().output(responseDoc,res.getWriter());
}

JDOM 再次把工作变得非常简单。只需要在对象图返回的 XML 元素外面包装一个 Document，然后用 XMLOutputter 把文档写入 servlet 响应即可。清单 3 显示了用这种方式生成的 XML 示例，用 JDOM Format.getPrettyFormat() 对 XMLOutputter 进行初始化，格式化得非常好。在这个示例中，顾客只做了一个订单，包含两个商品。


清单 3. 代表顾客的 XML 文档 
												
														

														
<?xml version="1.0" encoding="UTF-8"?>
<customer username="jimmy66">
  <realname>James Hyrax</realname>
  <orders>
    <order id="o-11123" cost="$349.98">
      <date>08-26-2005</date>
      <items>
        <item id="i-55768">
          <name>Oolong 512MB CF Card</name>
          <description>512 Megabyte Type 1 CompactFlash card. 
          Manufactured by Oolong Industries</description>
          <price>$49.99</price>
        </item>
        <item id="i-74491">
          <name>Fujak Superpix72 Camera</name>
          <description>7.2 Megapixel digital camera featuring six 
          shooting modes and 3x optical zoom. Silver.</description>
          <price>$299.99</price>
        </item>
      </items>
    </order>
  </orders>
</customer>

自行序列化的不足

有趣的是，清单 3 中的代码展示了让 JavaBean 把自己序列化为 XML 的一个主要不足。假设要用这个文档表示顾客的订单历史视图。在这种情况下，不太可能要显示每个历史订单中每个商品的完整说明，或者告诉顾客他或她自己的姓名。但是如果应用程序有一个 ProductSearch 类，它就是以 Item bean 列表的形式返回搜索结果，那么在 Item 的 XML 表示中包含说明可能会有帮助。而且，Item 类上代表当前库存水平的额外字段，在产品搜索视图中可能就是需要显示的有用信息。但是，不管当前的库存水平是否与当前情况相关（比如对顾客的订单历史来说），这个字段都会从包含 Item 的任何对象图中序列化出来。

从 设计的角度来看，这是数据模型与视图生成耦合的经典问题。每个 bean 只能用一种途径序列化自己，一成不变的方式意味着 Ajax 交互最终要交换它们不需要交换的数据，因此造成客户端代码要从文档中找到需要的信息更加困难，而且也会增加带宽消耗和客户端的 XML 解析时间。这种耦合的另一个后果就是 XML 的语法不能脱离 Java 类独立变化。例如，对顾客文档的方案做修改，可能会影响多个 Java 类，造成它们也不得不做修改和重新编译。

我稍后会解决这些问题，但是首先来看一个对自行序列化方式的可伸缩性问题的解决方案：XML 绑定框架。


回页首


XML 绑定框架

近 些年来，已经开发了多个 Java API 来简化 XML 文档到 Java 对象图的绑定过程。多数都提供了 XML 编排和拆解；也就是说，它们可以在 Java 对象图和 XML 之间执行双向会话。这些框架封装了 XML 处理的全部工作，这意味着应用程序代码只需要处理普通的 Java 类。它们还希望提供有用的辅助功能，例如文档验证。笼统来说，这些框架采用了两种不同的方式：代码生成和对象到 XML 映射。我将分别解释这两种方式。

代码生成方式

使 用代码生成的框架包括 XMLBeans、JAXB、Zeus 和 JBind。Castor 也能使用这项技术。这类框架的起点是描述文档数据类型的 XML 方案。使用框架提供的工具，就可以生成代表这些方案定义类型的 Java 类。最后，用这些生成的类编写应用程序，表示自己的模型数据，并通过框架提供的一些辅助机制把数据序列化成 XML。

如果应用程 序要使用大型 XML 语法，那么代码生成方式是个很好的方法。在数十个类上编写定制 XML 序列化代码的可伸缩性问题由此消除。另一方面，也不再需要定义自己的 JavaBean。框架生成的 Java 类通常非常符合 XML 的结构，所以对它们进行编码很难。而且，生成的类变成哑数据容器，因为一般不能向它们添加行为。一般来说，在应用程序代码中要做些妥协，才能很好地处理方 案生成的类型。另一个缺陷是如果修改方案，会造成生成的类也要修改，所以也就会对围绕它们编写的代码带来相应的影响。

这种类型的 XML 绑定框架在数据拆解时最有用（例如，使用 XML 文档并把它们转化成 Java 对象）。除非拥有大型数据模型而且有可能从生成的类中获益，否则基于代码生成的框架对于 Ajax 应用程序来说可能有很大的杀伤力。

映射方式

采 用映射方式的框架包括 Castor 和 Apache Commons Betwixt。映射通常是比代码生成更灵活和更轻量的解决方案。首先，可以像通常一样编写 JavaBean，包括任何行为以及任何自己喜欢的方便的方法。然后，在运行时，调用框架中基于内省的编排器，并根据对象成员的类型、名称和值生成 XML 文档。通过定义类的映射文件，可以覆盖默认的绑定策略，并就类在 XML 中的表示方式对编排器提出建议。

这种方法是在 可伸缩性与灵活性之间的良好折中。可以按照自己喜欢的方式编写 Java 类，编排器负责处理 XML。虽然映射定义文件编写起来简单，可伸缩性也足够好，但是映射规则最多只能改变标准的绑定行为，而且在对象结构和它们的 XML 表示之间总要残留一些耦合。最终，可能不得不在 Java 表示或 XML 格式之间任选一个做些折中，才能让映射方法起作用。

数据绑定总结

Dennis Sosnoski 就 XML 数据绑定 API 的主题，在代码生成和代码映射两个方面写了深入的文章。如果想进一步研究这个领域，我推荐他在 Castor 和代码生成框架方面的精彩文章（请参阅 参考资料 中的链接）。

总之，代码生成方式损失了过多的灵活性和方便性，对于典型的 Ajax 应用程序用处不大。另一方面，基于映射的框架可能工作得很好，但是要恰到好处地调整它们的映射策略，以便从对象生成需要的 XML。

所 有的 XML 绑定 API 都具有手工序列化技术的一个主要不足：模型和视图的耦合。被限制为一个类型一个 XML 表示，就意味着在网络上总要有冗余数据传输。更严重的问题是，在情况要求客户端代码使用专门视图时，客户端代码却无法得到它，所以可能要费力地处理给定对 象图的一成不变的视图。

在传统的 Web 应用程序开发中，采用页面模板系统把视图生成与控制器逻辑和模型数据干净地分离。这种方法在 Ajax 场景中也会有帮助。


回页首


页面模板系统

任何通用目的的页面模板技术都可以用来生成 XML，从而使 Ajax 应用程序根据自己的数据模型生成任何 XML 响应文档。额外收获是：模板可以用简单的、表现力强的标记语言编写，而不是用一行行的 Java 代码编写。清单 5 是一个 JSP 页面，采用了 Customer bean 并表示出定制的 XML 视图，适合客户端代码生成订单历史组件。


清单 4. 生成订单历史文档的 JSP 
												
														

														
<?xml version="1.0"?>
<%@ page contentType="application/xml" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="cust" value="${requestScope.customer}"/>

<orderhistory username="${cust.username}">
<c:forEach var="order" items="${cust.orders}">
  <order id="${order.id}" cost="${order.formattedCost}">
    <date>${order.date}</date>
    <items>
    <c:forEach var="item" items="${order.items}">
      <item id="${item.id}">
        <name><c:out value="${item.name}" escapeXml="true"/></name>
        <price>${item.formattedPrice}</price>
      </item>
    </c:forEach>
    </items>
  </order>
</c:forEach>
</orderhistory>

这个简洁的模板只输出订单历史视图需要的数据，不输出不相关的资料（例如商品说明）。创建产品搜索视图的定制 XML 应当同样简单，这个视图包含每个商品的完整说明和库存水平。

模板的问题

另 一方面，现在我需要为每个不同视图创建一个新 JSP，而不能仅仅把需要的对象图组织起来并序列化它。从设计的角度来说，许多人可能会有争议，认为这无论如何是件好事，因为这意味着正式地考虑服务器要 生成的文档类型。而且，因为我现在要处理通用的模板环境，而不是特定于 XML 的 API，所以确保标记匹配、元素和属性的顺序正确以及 XML 实体（例如 < 或 &）正确转义就成了我的责任。JSP 的核心 out 标记使后面这项工作变得很容易，但是不是所有的模板技术都提供了这样的机制。最后，没有方便的途径可以在服务器端根据方案检验生成的 XML 文档的正确性，但这毕竟不是要在生产环境中做的事，可以方便地在开发期间处理它。


回页首


不用 XML 的响应数据

迄 今为止，我介绍的所有技术都用 XML 文档的形式生成服务器响应。但是，XML 有一些问题。其中一个就是延迟。浏览器不能立即解析 XML 文档并生成 DOM 模型，所以这会降低某些 Ajax 组件需要的“迅捷”感，特别是在较慢的机器上解析大型文档的时候更是如此。“现场搜索”就是一个示例，在这种搜索中，当用户输入搜索术语时，就会从服务器 提取搜索结果并显示给用户。对于现场搜索组件来说，迅速地响应输入是非常重要的，但是同时它还需要迅速而持续地解析服务器的响应。

延迟是一个重要的考虑因素，但是避免使用 XML 的最大原因是差劲的客户端 DOM API。清单 5 显示了使用跨浏览器兼容的方式通过 DOM 得到某个值的时候，通常不得不面对的困难。


清单 5. 在 JavaScript 中导航 XML 响应文档 
												
														

														
// Find name of first item in customer's last order
var orderHistoryDoc = req.responseXML;

var orders = orderHistoryDoc.getElementsByTagName("order");
var lastOrder = orders[orders.length - 1];

var firstItem = lastOrder.getElementsByTagName("item")[0];
var itemNameElement = firstItem.firstChild;

var itemNameText = itemNameElement.firstChild.data;

当元素中间存在空白时，情况就变得更加复杂，因为每个元素的 firstChild 经常是个空白文本节点。现在有 JavaScript 库可以缓解处理 XML 文档的麻烦。这些库包括 Sarissa （请参阅 参考资料）和 Google-ajaXSLT，这两个库都把 XPath 功能添加到了大多数浏览器中。

但是，想想替代方案还是值得的。除了 responseXML 之外，XMLHttpRequest 对象还提供了名为 responseText 的属性，这个属性只是以字符串的方式提供服务器的响应体。

responseText 属性

当服务器需要向客户机发送非常简单的值时，responseText 特别方便，它可以避免 XML 导致的带宽支出和处理支出。例如，简单的 true/false 响应可以由服务器以纯文本方式返回，可以是逗号分隔的简单的名称或数字列表。但是，一般来说，最好不要在同一个应用程序中把 XML 响应和纯文本响应混合使用；保持单一数据格式可以让代码抽象和重用更加简单。

responseText 与 XML 响应数据结合时也会有用。在只需要从响应文档中提取单一值的场景中，“欺骗性”地把 XML 当作文本字符串，而不把它当作结构化的文档对待，会更方便。例如，清单 6 显示了如何用正则表达式从顾客的订单历史中提取第一笔订单的日期。不过，这实际是种花招，一般不应当依赖 XML 文档的词汇表达。


清单 6. 用正则表达式处理 XMLHttpRequest 的 responseText 对象 
												
														

														
var orderHistoryText = req.responseText;
var matches = orderHistoryText.match(/<date>(.*?)<\/date>/);

var date = matches[1];

在某些情况下，采用即时方式使用 responseText 会比较方便。但是，理想情况下，应当有种途径，可以用一种能够让 JavaScript 轻松导航、却没有 XML 处理支出的格式表示复杂的结构化数据。幸运的是，确实存在这样一种格式。


回页首


JavaScript 对象标注

实 际上，JavaScript 对象的大部分都由联合数组、数字索引数组、字符串、数字或者这些类型的嵌套组合而成。因为所有类型都可以用 JavaScript 直接声明，所以可以在一条语句中静态地定义对象图。清单 7 使用 JSON 语法声明了一个对象，并演示了如何访问这个对象。大括号表示联合数组（即对象），它的键 -值组合由逗号分隔。方括号表示数字索引数组。


清单 7. 用 JSON 在 JavaScript 中直接声明一个简单对象 
												
														

														
var band = {
  name: "The Beatles",
  members: [
    {
      name: "John",
      instruments: ["Vocals","Guitar","Piano"]
    },
    {
      name: "Paul",
      instruments: ["Vocals","Bass","Piano","Guitar"]
    },
    {
      name: "George",
      instruments: ["Guitar","Vocals"]
    },
    {
      name: "Ringo",
      instruments: ["Drums","Vocals"]
    }
  ]
};

// Interrogate the band object
var musician = band.members[3];
alert( musician.name
        + " played " + musician.instruments[0] 
        + " with " + band.name );

既然 JSON 是一个有趣的语言特性，那么它对 Ajax 有什么意义呢？妙处在于可以用 JSON 在 Ajax 服务器响应中通过网络发送 JavaScript 对象图。这意味着在客户端可以避免使用笨拙的 DOM API 对 XML 进行导航 —— 只需要分析 JSON 响应，就会立即得到可以访问的 JavaScript 对象图。但是，首先需要把 JavaBean 变成 JSON。

从 Java 类产生 JSON

不同 XML 生成技术所具有的优缺点也适用于 JSON 的产生。而且可以证明，存在需要再次使用表示模板技术的情况。但是，使用 JSON 在理念上更接近于在应用层之间传递序列化的对象，而不是创建应用程序状态的视图。我将介绍如何用 org.json 这个 Java API 在 Java 类上创建 toJSONObject() 方法。然后，就可以把 JSONObject 简单地序列化成 JSON。清单 8 反映了 清单 1 讨论的 XML，显示了 Order 类的 toJSONObject() 实现。


清单 8. Order 类的 toJSONObject() 方法实现 
												
														

														
public JSONObject toJSONObject() {

  JSONObject json = new JSONObject();
  json.put("id",id);
  json.put("cost",getFormattedCost());
  json.put("date",date);

  JSONArray jsonItems = new JSONArray();
  for (Iterator<Item> iter = 
   items.iterator() ; iter.hasNext() ; ) {
    jsonItems.put(iter.next().toJSONObject());
  }
  json.put("items",jsonItems);

  return json;
}

可以看到，org.json API 非常简单。 JSONObject 代表 JavaScript 对象（即联合数组），有不同的 put() 方法，方法接受的 String 键和值是原生类型、String 类型或其他 JSON 类型。JSONArray 代表索引数组，所以它的 put() 方法只接受一个值。请注意在清单 8 中，创建 jsonItems 数组，然后再用 put() 把它附加到 json 对象上；可以用另外一种方法做这项工作，就是对每个项目调用 json.accumulate("items",iter.next().toJSONObject());。accumulate() 方法与 put() 类似，区别在于它把值添加到按照键进行识别的索引数组。

清单 9 显示了如何序列化 JSONObject 并把它写入 servlet 响应。


清单 9. 从 JSONObject 生成序列化的 JSON 响应 
												
														

														
public void doGet(HttpServletRequest req, HttpServletResponse res) 
  throws java.io.IOException, ServletException {

	String custId = req.getParameter("username");
	Customer customer = getCustomer(custId);

	res.setContentType("application/x-json");
	res.getWriter().print(customer.toJSONObject());
}

可以看到，它实际上什么也没有做。在这里隐式调用的 JSONObject 的 toString() 方法做了所有工作。请注意，application/x-json 内容类型还有一点不确定 —— 在编写这篇文章的时候，关于 JSON 应当属于什么 MIME 类型还没有定论。但是，目前 application/x-json 是合理的选择。清单 10 显示了这个 servlet 代码的示例响应。


清单 10. Customer bean 的 JSON 表示 
												
														

														
{
  "orders": [
    {
      "items": [
        {
          "price": "$49.99",
          "description": "512 Megabyte Type 1 CompactFlash card. 
                              Manufactured by Oolong Industries",
          "name": "Oolong 512MB CF Card",
          "id": "i-55768"
        },
        {
          "price": "$299.99",
          "description": "7.2 Megapixel digital camera featuring six 
            shooting modes and 3x optical zoom. Silver.",
          "name": "Fujak Superpix72 Camera",
          "id": "i-74491"
        }
      ],
      "date": "08-26-2005",
      "cost": "$349.98",
      "id": "o-11123"
    }
  ],
  "realname": "James Hyrax",
  "username": "jimmy66"
}

在客户端使用 JSON

处理的最后一步是把在客户端把 JSON 数据变成 JavaScript 对象。这可以通过对 eval() 的简单调用实现，这个函数可以即时地解释包含 JavaScript 表达式的字符串。清单 11 把 JSON 响应转变成 JavaScript 对象图，然后执行清单 5 的任务，从顾客的最后一次订单中得到第一个商品的名称。


清单 11. 评估 JSON 响应 
												
														

														
var jsonExpression = "(" + req.responseText + ")";
var customer = eval(jsonExpression);

// Find name of first item in customer's last order
var lastOrder = customer.orders[customer.orders.length-1];
var name = lastOrder.items[0].name;

比较清单 11 和 清单 5 可以发现使用 JSON 的客户端的优势。如果在 Ajax 项目中要在客户端对许多复杂的服务器响应进行导航，那么 JSON 可能适合您的需要。JSON 和 XMLHttpRequest 结合还会让 Ajax 交互看起来更像 RPC 调用而不是 SOA 请求，这对应用程序的设计可能会有意义。在下一篇文章中，我要研究的框架，就是明确地为了让 JavaScript 代码对服务器端对象进行远程方法调用而设计的。

JSON 的不足

JSON 也有它的不足。使用这里介绍的 JSON 方式，就没有办法针对每个请求对对象的序列化进行裁剪，所以不需要的字段可能经常会在网络上发送。另外，添加 toJSONObject() 方法到每个 JavaBean，可伸缩性不太好，虽然用内省和标注编写一个通用的 JavaBean 到 JSON 的序列化器可能很简单。最后，如果服务器端代码是面向服务的，没有单独针对处理 Ajax 客户请求调整过，那么由于对 XML 一致的支持，XML 会是更好的选择。


回页首


比较序列化技术

现 在已经看到了把 Java 状态传输到 Ajax 客户端的五种不同技术。我讨论了自行手工编码 XML 序列化、通过代码生成的 XML 绑定、通过映射机制的 XML 绑定、基于模板的 XML 生成以及手工编码到 JSON 的序列化。每种技术都有自己的优势和不足，分别适用于不同的应用程序架构。

为了总结每种方式的优势与不足，表 1 从六个方面进行了粗略的评分：

可伸缩性
描述技术适应大量数据类型的容易程度。对于每个附加类型，编码和配置工作量是否会增长？
易于集成
评估把技术集成到项目的简单程度。是否需要更加复杂的构建过程？是否增加了部署的复杂性？
Java 类 API
描述以指定方式处理服务器端 Java 对象的容易程度。是可以编写普通的 bean，还是不得不处理笨拙的文档表示？
对输出的控制
描述对类的序列化表示控制的精确程度。
视图灵活性
评估从同一组对象是否可以创建不同的、定制的数据序列化。
客户端数据访问
描述 JavaScript 代码处理服务器响应数据的难易程度。

表 1. 数据生成技术的相对价值

自行编写 XML 通过代码生成的 XML 绑定 通过映射的 XML 绑定 页面模板 XML 手工编码的 JSON 序列化
可伸缩性 差 好 一般 一般 差
易于集成 好 差 一般 一般 好
Java 类 API 好 差 好 好 好
对输出的控制 好 好 一般 好 好
视图灵活性 差 差 差 好 差
客户端数据访问 差 差 差 一般 好




回页首


结束语

表 1 中的数据并不表明某项序列化技术比其他的技术好。毕竟，六种标准的相对重要性取决于项目的具体情况。例如，如果要处理数百种数据类型，这时想要的是可伸缩 性，那么代码生成可能就是最好的选择。如果需要为同一数据模型生成多个不同视图，那么就应当使用页面模板。如果处理的是小规模项目，想降低需要编写的 JavaScript 代码数量，那么请考虑 JSON。

希望这篇文章为您提供了选择适合自己应用程序的序列化技术所需要的信息。请参阅 参考资料 一节，学习关于这里讨论的技术的更多内容。您还应当继续关注这个系列的下一篇文章，在下一篇文章中，我将介绍如何用直接 Web 远程（DWR）编写 Java Ajax 应用程序。DWR 框架支持从 JavaScript 代码中直接调用 Java 类上的方法。换句话说，它替您负责数据序列化的工作，所以您可以在更高的抽象层次上使用 Ajax。


回页首


参考资料

学习

获得产品和技术
  • Sarissa：一个支持 XPath 的跨浏览器的 JavaScript 库。

  • Jakarta Commons Betwixt：一个灵活的基于映射的 XML 绑定库。

  • JSON：用于 Java 和其他语言的 JavaScript 对象标注 API。


讨论




回页首


关于作者


Philip McCarthy 是一位软件开发顾问，专攻 Java 和 Web 技术。他目前在位于 Bristol 的 HP 实验室从事 Hewlett Packard 数字媒体平台的工作 。在最近几年中，Phil 开发了多个采用异步服务器通信和 DOM 脚本的富 Web 客户端。他很高兴我们现在有了一个针对它们的名称。可以通过 Phil 的电子邮件 philmccarthy@gmail.com 与他联系。


Vincent Chen 2006-03-19 16:03 发表评论
]]>使用 AJAX 调用 SOAP Web 服务，第 1 部分: 构建 Web 服务客户机http://www.blogjava.net/Vencent/articles/36073.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sun, 19 Mar 2006 08:00:00 GMThttp://www.blogjava.net/Vencent/articles/36073.htmlhttp://www.blogjava.net/Vencent/comments/36073.htmlhttp://www.blogjava.net/Vencent/articles/36073.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/36073.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/36073.html级别: 中级

James Snell, 软件工程师, IBM

2006 年 1 月 16 日

本文介绍如何使用异步 JavaScript 和 XML (Asynchronous JavaScript and XML, AJAX) 设计模式来实现基于 Web 浏览器的 SOAP Web 服务客户机。

本文是一篇短的系列文章的第 1 部分，演示了如何使用针对 Web 应用程序的 AJAX 设计模式来实现跨平台的基于 JavaScript 的 SOAP Web 服务客户机。

AJAX 已普遍用于许多知名的 Web 应用程序服务，例如 GMail、Google Maps、Flickr 和 Odeo.com。通过使用异步 XML 消息传递，AJAX 为 Web 开发人员提供了一种扩展其 Web 应用程序价值和功能的途径。这里介绍的 Web Services JavaScript Library 扩展了该基础机制，其通过引入对调用基于 SOAP 的 Web 服务的支持来增强 AJAX 设计模式。

从浏览器中调用 Web 服务

从 Web 浏览器中调用 SOAP Web 服务可能会比较麻烦，这是因为大多数流行的 Web 浏览器在生成和处理 XML 方面都略有不同。所有浏览器都一致实现且用于 XML 处理的标准 API 或功能少之又少。

浏 览器实现人员一致支持的机制之一是 XMLHttpRequest API，它是 AJAX 设计模式的核心。developerWorks 网站最近发布的另一篇由 Philip McCarthy 撰写的的文章详细介绍了该 API。XMLHttpRequest 是一个用于执行异步 HTTP 请求的 JavaScript 对象。Philip McCarthy 在其文章中描述了一个顺序图（请参见图 1），此图对于理解 XMLHttpRequest 对象如何支持 AJAX 设计非常有帮助（请参阅参考资料，以获得指向全文的链接）。


图 1. Philip McCarthy 的 AJAX 顺序图
Philip McCarthy 的 AJAX 顺序图

从 此图中，您可以清楚地看到 XMLHttpRequest 对象是如何工作的。一些运行在 Web 浏览器内的 JavaScript 创建了一个 XMLHttpRequest 实例和一个用于异步回调的函数。然后，该脚本使用 XMLHttpRequest 对象对服务器执行 HTTP 操作。在接收到响应后，调用回调函数。在该回调函数内，可能处理返回的数据。如果返回的数据碰巧是 XML，则 XMLHttpRequest 对象将自动使用浏览器中内置的 XML 处理机制来解析该数据。

遗憾的是，使用 AJAX 方法的主要难题在于 XMLHttpRequest 对象自动解析 XML 的详细过程。例如，假设我正在请求的数据是一个 SOAP 信封，其包含来自许多不同 XML 命名空间的元素，并且我希望提取 yetAnotherElement 中属性 attr 的值。（请参见清单 1）


清单 1. 一个包含多个命名空间的 SOAP 信封 
												
														

														
<s:Envelope 
  xmlns:s="http://schemas.xmlsoap.org/soap/envelope/" 
  xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <s:Header/>
  <s:Body>
    <m:someElement xmlns:m="http://example">
      <n:someOtherElement 
        xmlns:n="http://example" 
        xmlns:m="urn:example">
        <m:yetAnotherElement 
          n:attr="abc" 
          xmlns:n="urn:foo"/>
      </n:someOtherElement>
    </m:someElement>
  </s:Body>
</s:Envelope>

在 Mozilla 浏览器和 Firefox 浏览器中，提取 attr 属性值非常简单，如清单 2所示。


清单 2. 在 Mozilla 和 Firefox 中检索 attr 属性值的方法不能运用在 Internet Explorer 中 
												
														

														
var m = el.getElementsByTagNameNS(
  'urn:example',
  'yetAnotherElement')[0].
    getAttributeNS(
      'urn:foo',
      'attr');
alert(m); // displays 'abc'

关于安全性

由 于涉及许多实际安全问题，因此在缺省情况下，大多数 Web 浏览器中的 XMLHttpRequest 对象都限制为只能与用户正在查看的 Web 页所在的域中承载的资源和服务进行交互。例如，如果我正在访问一个位于 http://example.com/myapp/ 的页面，则 XMLHttpRequest 将只允许访问位于 example.com 域中的资源。对于阻止恶意应用程序代码潜在地对其不应该访问的信息进行不适当的访问，这种预防措施非常必要。因为这里介绍的 Web 服务客户机基于 XMLHttpRequest，所以这种限制同样适用于您将会调用的 Web 服务。

如果您需要能够访问位于另一个域中的 Web 服务，您可以使用以下两种合理的解决方案：

  • 对 JavaScript 进行数字签名。通过对 JavaScript 脚本进行数字签名，您就告诉了 Web 浏览器可以信任该脚本不会执行任何恶意的活动，并且对 XMLHttpRequest 可以访问的数据的限制也应该取消。
  • 使用代理。一 个简单的解决方案是，通过位于加载的页面所在的域中的代理资源来传递所有来自 XMLHttpRequest 的请求。该代理将 XMLHttpRequest 的请求转发到远程位置，并将结果返回给浏览器。从 XMLHttpRequest 对象的角度来看，这种交互发生在现有的安全配置之内。

遗 憾的是，以上代码无法在 Internet Explorer Version 6 中运行，因为该浏览器不仅没有实现 getElementsByTagNameNS 功能，而且事实上还使用了一种很糟糕的方法——将 XML 命名空间的前缀作为其元素和属性名称的一部分来对待。

Internet Explorer 缺少对 XML 命名空间的支持，这使得它很难处理命名空间密集的 XML 格式，例如采用独立于浏览器的方式的 SOAP。即使要执行一些像提取结果中的属性值这样简单的操作，您也必须编写能够在多个浏览器中实现一致预期行为的特殊代码。幸运的是，这种特殊代码可以 封装并重用。

为了从 Web 浏览器中调用 Web 服务，并可靠地处理 SOAP 消息，您需要首先了解一些安全问题（请参见侧栏“关于安全性”）。此外，您还需要编写一个 JavaScript 脚本库（图 2），以便将底层浏览器 XML 实现中的不一致情况抽象出来，从而使您能够直接处理 Web 服务数据。


图 2. 在使用 Web Services JavaScript Library 的 Web 浏览器中通过 Javascript 调用 Web 服务
在 Web 浏览器中通过 Javascript 调用 Web 服务

图 2 中的 Web Services JavaScript Library (ws.js) 是一组 JavaScript 对象和实用功能，它们为基于 SOAP 1.1 的 Web 服务提供了基本的支持。Ws.js 定义了下列对象：

  • WS.Call：一个包装了 XMLHttpRequest 的 Web 服务客户机
  • WS.QName：XML 限定名实现
  • WS.Binder：自定义 XML 序列化器/反序列化器的基础
  • WS.Handler：请求/响应处理程序的基础
  • SOAP.Element：包装了 XML DOM 的基本 SOAP 元素
  • SOAP.Envelope：SOAP Envelope 对象扩展了 SOAP.Element
  • SOAP.Header：SOAP Header 对象扩展了 SOAP.Element
  • SOAP.Body：SOAP Body 对象扩展了 SOAP.Element
  • XML：用于处理 XML 的跨平台实用方法

ws.js 的核心是 WS.Call 对象，该对象提供了调用 Web 服务的方法。WS.Call 主要负责与 XMLHttpRequest 对象进行交互，并处理 SOAP 响应。

WS.Call 对象公开了以下三个方法：

  • add_handler。向处理链添加请求/响应处理程序。处理程序对象在调用 Web 服务的前后被调用，以支持可扩展的预调用处理和后调用处理。
  • invoke。将指定的 SOAP.Envelope 对象发送给 Web 服务，然后在接收到响应后调用回调函数。当调用使用文本 XML 编码的文档样式的 Web 服务时，请使用此方法。
  • invoke_rpc。创建一个封装 RPC 样式请求的 SOAP.Envelope，并将其发送到 Web 服务。当接收到响应时，调用回调函数。

在 通常情况下，WS.Call 对象只不过是位于 XMLHttpRequest 对象顶层的瘦包装器 (thin wrapper)，该包装器能够执行许多简化处理的操作。这些操作包括设置 SOAP 1.1 规范要求的 SOAPAction HTTP Header。


回页首


使用 ws.js

Web services JavaScript Library 提供的 API 非常简单。

SOAP.* 对象（SOAP.Element、SOAP.Envelope、SOAP.Header 和 SOAP.Body）提供了构建和读取 SOAP 信封的方法，如清单 3 所示，因而处理 XML 文档对象模型的底层细节就顺利地抽象出来。


清单 3. 构建一个 SOAP 信封 
												
														

														
var envelope = new SOAP.Envelope();
var body = envelope.create_body();
var el = body.create_child(new WS.QName('method','urn:foo'));
el.create_child(new WS.QName('param','urn:foo')).set_value('bar');

清单 4 显示了由 清单 3 中的代码生成的 SOAP 信封。


清单 4. 构建一个 SOAP 信封 
												
														

														
<Envelope xmlns="http://schemas.xmlsoap.org">
  <Body>
    <method xmlns="urn:foo">
      <param>bar</param>
    </method>
  </Body>
</Envelope>

如果您正在创建的 SOAP 信封代表一个 RPC 样式的请求，则 SOAP.Body 元素提供了一个简便方法 set_rpc（如清单 5 所示），该方法能够构造一个完整的 RPC 请求——包含一个指定的操作名称、一个指定的输入参数数组和一个 SOAP 编码样式的 URI。


清单 5. 构建一个 RPC 请求信封 
												
														

														
var envelope = new SOAP.Envelope();
var body = envelope.create_body();
body.set_rpc(
  new WS.QName('param','urn:foo'),
  new Array(
    {name:'param',value:'bar'}
  ), SOAP.NOENCODING
);

每个参数都作为一个 JavaScript 对象结构进行传递，且可能带有以下属性：

  • name。一个指定参数名称的字符串或 WS.QName 对象。必需。
  • value。参数的值。如果该值不是一个简单数据类型（例如，字符串、整数或其他），则应该指定一个能将该值序列化为适当的 XML 结构的 WS.Binder。必需。
  • xsitype：标识参数的 XML 模式实例类型的 WS.QName（例如，xsi:type="int" 对应 xsitype:new WS.QName('int','http://www.w3.org/2000/10/XMLSchema')）。可选。
  • encodingstyle：标识参数所使用的 SOAP 编码样式的 URI。可选。
  • binder：能够将参数序列化为 XML 的 WS.Binder 实现。可选。

例如，如果要指定的参数名为“abc”、XML 命名空间为“urn:foo”、xsi:type 为“int”且值为“3”，则我会使用以下代码：new Array({name:new WS.QName('abc','urn:foo'), value:3, xsitype:new WS.QName('int','http://www.w3.org/2000/10/XMLSchema')})。

一旦我为服务请求构建了 SOAP.Envelope，我就会将该 SOAP.Envelope 传递到 WS.Call 对象的 invoke 方法，以便调用该信封内编码的方法： (new WS.Call(service_uri)).invoke(envelope, callback)

另一种可选方案是手动构建 SOAP.Envelope。我会将参数 WS.QName、参数数组和编码样式传递到 WS.Call 对象的 invoke_rpc 方法，如清单 6 所示。


清单 6. 使用 WS.Call 对象调用 Web 服务 
												
														

														
var call = new WS.Call(serviceURI); 
var nsuri = 'urn:foo';
var qn_op = new WS.QName('method',nsuri);
var qn_op_resp = new WS.QName('methodResponse',nsuri);  
  call.invoke_rpc(
    qn_op,
    new Array(
      {name:'param',value:'bar'}
    ),SOAP.NOENCODING,
    function(call,envelope) {
      // envelope is the response SOAP.Envelope
      // the XML Text of the response is in arguments[2]
    }
  );

在调用 invoke 方法或 invoke_rpc 方法时，WS.Call 对象会创建一个基本的 XMLHttpRequest 对象，用包含 SOAP 信封的 XML 元素进行传递，并接收和解析响应，然后调用提供的回调函数。

为了能够扩展 SOAP 消息的预处理和后处理，WS.Call 对象允许您注册一组 WS.Handler 对象，如清单 7 所示。对于调用周期内的每个请求、每个响应和每个错误，都将调用这些对象。可以通过扩展 WS.Handler JavaScript 对象来实现新的处理程序。


清单 7. 创建和注册响应/响应处理程序 
												
														

														
var MyHandler = Class.create();
MyHandler.prototype = (new WS.Handler()).extend({
  on_request : function(envelope) {
     // pre-request processing
  },
  on_response : function(call,envelope) {
     // post-response, pre-callback processing
  },
  on_error : function(call,envelope) {
  }
});

var call = new WS.Call(...);
call.add_handler(new MyHandler());

处理程序对插入或提取正在传递的 SOAP 信封中的信息最有用。例如，您可以设想一个处理程序自动向 SOAP Envelope 的 Header 插入适当的 Web 服务寻址 (Web Services Addressing) 元素，如清单 8 中的示例所示。


清单 8. 一个将 Web 服务寻址操作 Header 添加到请求中的处理程序示例 
												
														

														
var WSAddressingHandler = Class.create();
WSAddressingHandler.prototype = (new WS.Handler()).extend({
  on_request : function(call,envelope) {  		
    envelope.create_header().create_child(
        new WS.QName('Action','http://ws-addressing','wsa')
      ).set_value('http://www.example.com');
  }
});

WS.Binder 对象（清单 9）执行 SOAP.Element 对象的自定义序列化和反序列化。WS.Binder 的实现必须提供以下两个方法：

  • to_soap_element。将 JavaScript 对象序列化为 SOAP.Element。传入的第一个参数是要序列化的值。第二个参数是 SOAP.Element，必须将要序列化的值序列化为 SOAP.Element。该方法不返回任何值。
  • to_value_object。将 SOAP.Element 反序列化为 JavaScript 对象。该方法必须返回反序列化的值对象。

清单 9. WS.Binding 实现示例 
												
														

														
var MyBinding = Class.create();
MyBinding.prototype = (new WS.Binding()).extend({
  to_soap_element : function(value,element) {  		
    ...
  },
  to_value_object : function(element) {
    ...
  }
});





回页首


一个简单示例

我已经提供了一个示例项目来阐释 Web Services JavaScript Library 的基本功能。该演示所使用的 Web 服务（如清单 10 所示）已经在 WebSphere Application Server 中进行了实现，并提供了简单的 Hello World 功能。


清单 10. 一个简单的基于 Java 的“Hello World”Web 服务 
												
														

														
package example;

public class HelloWorld {
  public String sayHello(String name) {
    return "Hello " + name;
  }
}

在实现了该服务并将其部署到 WebSphere Application Server 后，该服务（清单 11）的 WSDL 描述定义了您需要传递的 SOAP 消息（用于调用 Hello World 服务）。


清单 11. HelloWorld.wsdl 的代码片段 
												
														

														
<wsdl:portType name="HelloWorld">
  <wsdl:operation name="sayHello">
    <wsdl:input 
      message="impl:sayHelloRequest" 
      name="sayHelloRequest"/>
    <wsdl:output 
      message="impl:sayHelloResponse" 
      name="sayHelloResponse"/>
  </wsdl:operation>
</wsdl:portType>

通过使用 Web Services JavaScript Library，您可以实现一个调用 Hello World 服务的方法，如清单 12所示。


清单 12. 使用 WS.Call 调用 HelloWorld 服务 
												
														

														
<html>
<head>
...
<script 
  type="text/javascript" 
  src="scripts/prototype.js"></script>
<script 
  type="text/javascript" 
  src="scripts/ws.js"></script>
<script type="text/javascript">
function sayHello(name, container) {
  var call = new WS.Call('/AjaxWS/services/HelloWorld'); 
  var nsuri = 'http://example';
  var qn_op = new WS.QName('sayHello',nsuri);
  var qn_op_resp = new WS.QName('sayHelloResponse',nsuri);  
  call.invoke_rpc(
    qn_op,
    new Array(
      {name:'name',value:name}
    ),null,
    function(call,envelope) {
      var ret = 
        envelope.get_body().get_all_children()[0].
          get_all_children()[0].get_value();
      container.innerHTML = ret;
      $('soap').innerHTML = arguments[2].escapeHTML();
    }
  );
}
</script>
</head>
...

然后，您可以在我们的 Web 应用程序中的任意位置通过调用 sayHello 函数来调用 Hello World 服务。请参见清单 13。


清单 13. 调用 sayHello 函数 
												
														

														
<body>
<input name="name" id="name" />
<input value="Invoke the Web Service"
       type="button" 
       onclick="sayHello($('name').value,$('result'))" />
<div id="container">Result:
<div id="result">
</div>
<div id="soap">
</div>
</div>
</body>

调用成功后的结果如图 3 所示。在 Mozilla、Firefox 和 Internet Explorer 中运行该示例应该会得到相同的结果。


图 3. Firefox 中的 Hello World 示例
Firefox 中的 Hello World 示例




回页首


后续部分

使 用 Web Services JavaScript Library，可以采用简单的独立于浏览器的方式将基本的 SOAP Web 服务合并到 Web 应用程序中。在本系列的下一个部分中，您不仅可以探讨如何使用该库来调用更多基于 Web 服务资源框架 (WS-Resource Framework ) 系列规范的高级 Web 服务，而且还可以了解扩展该 Web 服务功能并将其集成到 Web 应用程序中的方法。


回页首


下载

描述 名字 大小 下载方法
Sample project ws-wsajaxcode.zip 19 KB  FTP
关于下载方法的信息 Get Adobe® Reader®




回页首


参考资料

学习

获得产品和技术

讨论




回页首


关于作者

James M Snell 的照片

James Snell 是 IBM Emerging Technologies Toolkit 团队的成员。在过去几年里，他一直致力于新兴 Web 服务技术和标准的研究，并且还参与了 Atom 1.0 规范的制定。他现在维护着一个专注于新兴技术的博客 http://www.ibm.com/developerworks/blogs/dw_blog.jspa?blog=351。


Vincent Chen 2006-03-19 16:00 发表评论
]]>XML 问题: 超越 DOM::轻松使用 DOM 的技巧和诀窍http://www.blogjava.net/Vencent/articles/35990.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 13:33:00 GMThttp://www.blogjava.net/Vencent/articles/35990.htmlhttp://www.blogjava.net/Vencent/comments/35990.htmlhttp://www.blogjava.net/Vencent/articles/35990.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35990.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35990.html级别: 中级

Dethe Elza, 高级技术架构师, Blast Radius

2005 年 6 月 16 日

文 档对象模型（Document Object Model，DOM）是用于操纵 XML 和 HTML 数据的最常用工具之一，然而它的潜力却很少被充分挖掘出来。通过利用 DOM 的优势，并使它更加易用，您将获得一款应用于 XML 应用程序（包括动态 Web 应用程序）的强大工具。

本期文章介绍了 一位客串的专栏作家，同时也是我的朋友和同事 Dethe Elza。Dethe 在利用 XML 进行 Web 应用程序开发方面经验丰富，在此，我要感谢他对我在介绍使用 DOM 和 ECMAScript 进行 XML 编程这一方面的帮助。请密切关注本专栏，以了解 Dethe 的更多专栏文章。 —— David Mertz

DOM 是处理 XML 和 HTML 的标准 API 之一。由于它占用内存大、速度慢，并且冗长，所以经常受到人们的指责。尽管如此，对于很多应用程序来说，它仍然是最佳选择，而且比 XML 的另一个主要 API —— SAX 无疑要简单得多。DOM 正逐渐出现在一些工具中，比如 Web 浏览器、SVG 浏览器、OpenOffice，等等。

DOM 很好，因为它是一种标准，并且被广泛地实现，同时也内置到其他标准中。作为标准，它对数据的处理与编程语言无关（这可能是优点，也可能是缺点，但至少使我 们处理数据的方式变得一致）。DOM 现在不仅内置于 Web 浏览器，而且也成为许多基于 XML 的规范的一部分。既然它已经成为您的工具的一部分，并且或许您偶尔还会使用它，我想现在应该充分利用它给我们带来的功能了。

在使用 DOM 一段时间后，您会看到形成了一些模式 —— 您想要反复做的事情。快捷方式可以帮助您处理冗长的 DOM，并创建自解释的、优雅的代码。这里收集了一些我经常使用的技巧和诀窍，还有一些 JavaScript 示例。

insertAfter 和 prependChild

第一个诀窍就是“没有诀窍”。DOM 有两种方法将孩子节点添加到容器节点（常常是一个 Element，也可能是一个 Document 或 DocumentFragment）：appendChild(node) 和 insertBefore(node, referenceNode)。看起来似乎缺少了什么。假如我想在一个参考节点后面插入或者由前新增（prepend）一个子节点（使新节点位于列表中的第一位），我该怎么做呢？很多年以来，我的解决方法是编写下列函数：


清单 1. 插入和由前新增的错误方法 
												
														
function insertAfter(parent, node, referenceNode) {
    if(referenceNode.nextSibling) {
        parent.insertBefore(node, referenceNode.nextSibling);
    } else {
        parent.appendChild(node);
    }
}
function prependChild(parent, node) {
    if (parent.firstChild) {
        parent.insertBefore(node, parent.firstChild);
    } else {
        parent.appendChild(node);
    }
}

实际上，像清单 1 一样，insertBefore() 函数已经被定义为，在参考节点为空时返回到 appendChild()。因此，您可以不使用上面的方法，而使用 清单 2 中的方法，或者跳过它们仅使用内置函数：


清单 2. 插入和由前新增的正确方法 
												
														
function insertAfter(parent, node, referenceNode) {
    parent.insertBefore(node, referenceNode.nextSibling);
}
function prependChild(parent, node) {
    parent.insertBefore(node, parent.firstChild);
}

如果您刚刚接触 DOM 编程，有必要指出的是，虽然您可以使多个指针指向一个节点，但该节点只能存在于 DOM 树中的一个位置。因此，如果您想将它插入到树中，没必要先将它从树中移除，因为它会自动被移除。当重新将节点排序时，这种机制很方便，仅需将节点插入到新 位置即可。

根据这种机制，若想交换两个相邻节点（称为 node1 和 node2）的位置，可以使用下列方案之一：

												node1.parentNode.insertBefore(node2, node1);

或

												node1.parentNode.insertBefore(node1.nextSibling, node1);





回页首


还可以使用 DOM 做什么？

Web 页面中大量应用了 DOM。若访问 bookmarklets 站点（参阅 参考资料），您会发现很多有创意的简短脚本，它们可以重新编排页面，提取链接，隐藏图片或 Flash 广告，等等。

但是，因为 Internet Explorer 没有定义 Node 接口常量（可以用于识别节点类型），所以您必须确保在遗漏接口常量时，首先为 Web 在 DOM 脚本中定义接口常量。


清单 3. 确保节点被定义 
												
														
if (!window['Node']) {
    window.Node = new Object();
    Node.ELEMENT_NODE = 1;
    Node.ATTRIBUTE_NODE = 2;
    Node.TEXT_NODE = 3;
    Node.CDATA_SECTION_NODE = 4;
    Node.ENTITY_REFERENCE_NODE = 5;
    Node.ENTITY_NODE = 6;
    Node.PROCESSING_INSTRUCTION_NODE = 7;
    Node.COMMENT_NODE = 8;
    Node.DOCUMENT_NODE = 9;
    Node.DOCUMENT_TYPE_NODE = 10;
    Node.DOCUMENT_FRAGMENT_NODE = 11;
    Node.NOTATION_NODE = 12;
}

清单 4 展示如何提取包含在节点中的所有文本节点：


清单 4. 内部文本 
												
														
function innerText(node) {
    // is this a text or CDATA node?
    if (node.nodeType == 3 || node.nodeType == 4) {
        return node.data;
    }
    var i;
    var returnValue = [];
    for (i = 0; i < node.childNodes.length; i++) {
        returnValue.push(innerText(node.childNodes[i]));
    }
    return returnValue.join('');
}





回页首


快捷方式

人们常常抱怨 DOM 太过冗长，并且简单的功能也需要编写大量代码。例如，如果您想创建一个包含文本并响应点击按钮的 <div> 元素，代码可能类似于：


清单 5. 创建 <div> 的“漫长之路” 
												
														
function handle_button() {
    var parent = document.getElementById('myContainer');
    var div = document.createElement('div');
    div.className = 'myDivCSSClass';
    div.id = 'myDivId';
    div.style.position = 'absolute';
    div.style.left = '300px';
    div.style.top = '200px';
    var text = "This is the first text of the rest of this code";
    var textNode = document.createTextNode(text);
    div.appendChild(textNode);
    parent.appendChild(div);
}

若频繁按照这种方式创建节点，键入所有这些代码会使您很快疲惫不堪。必须有更好的解决方案 —— 确实有这样的解决方案！下面这个实用工具可以帮助您创建元素、设置元素属性和风格，并添加文本子节点。除了 name 参数，其他参数都是可选的。


清单 6. 函数 elem() 快捷方式 
												
														
function elem(name, attrs, style, text) {
    var e = document.createElement(name);
    if (attrs) {
        for (key in attrs) {
            if (key == 'class') {
                e.className = attrs[key];
            } else if (key == 'id') {
                e.id = attrs[key];
            } else {
                e.setAttribute(key, attrs[key]);
            }
        }
    }
    if (style) {
        for (key in style) {
            e.style[key] = style[key];
        }
    }
    if (text) {
        e.appendChild(document.createTextNode(text));
    }
    return e;
}

使用该快捷方式，您能够以更加简洁的方法创建 清单 5 中的 <div> 元素。注意，attrs 和 style 参数是使用 JavaScript 文本对象而给出的。


清单 7. 创建 <div> 的简便方法 
												
														
function handle_button() {
    var parent = document.getElementById('myContainer');
    parent.appendChild(elem('div',
      {class: 'myDivCSSClass', id: 'myDivId'}
      {position: 'absolute', left: '300px', top: '200px'},
      'This is the first text of the rest of this code'));
}

在您想要快速创建大量复杂的 DHTML 对象时，这种实用工具可以节省您大量的时间。模式在这里就是指，如果您有一种需要频繁创建的特定的 DOM 结构，则使用实用工具来创建它们。这不但减少了您编写的代码量，而且也减少了重复的剪切、粘贴代码（错误的罪魁祸首），并且在阅读代码时思路更加清晰。


回页首


接下来是什么？

DOM 通常很难告诉您，按照文档的顺序，下一个节点是什么。下面有一些实用工具，可以帮助您在节点间前后移动：


清单 8. nextNode 和 prevNode 
												
														
// return next node in document order
function nextNode(node) {
    if (!node) return null;
    if (node.firstChild){
        return node.firstChild;
    } else {
        return nextWide(node);
    }
}
// helper function for nextNode()
function nextWide(node) {
    if (!node) return null;
    if (node.nextSibling) {
        return node.nextSibling;
    } else {
        return nextWide(node.parentNode);
    }
}
// return previous node in document order
function prevNode(node) {
    if (!node) return null;
    if (node.previousSibling) {
      return previousDeep(node.previousSibling);
    }
    return node.parentNode;
}
// helper function for prevNode()
function previousDeep(node) {
    if (!node) return null;
    while (node.childNodes.length) {
        node = node.lastChild;
    }
    return node;
}





回页首


轻松使用 DOM

有 时候，您可能想要遍历 DOM，在每个节点调用函数或从每个节点返回一个值。实际上，由于这些想法非常具有普遍性，所以 DOM Level 2 已经包含了一个称为 DOM Traversal and Range 的扩展（为迭代 DOM 所有节点定义了对象和 API），它用来为 DOM 中的所有节点应用函数和在 DOM 中选择一个范围。因为这些函数没有在 Internet Explorer 中定义（至少目前是这样），所以您可以使用 nextNode() 来做一些类似的事情。

在这里，我们的想法是创建一些简单、普通的工具，然后以不同的方式组装它们来达到预期的效果。如果您很熟悉函数式编程，这看起来会很亲切。Beyond JS 库（参阅 参考资料）将此理念发扬光大。


清单 9. 函数式 DOM 实用工具 
												
														
// return an Array of all nodes, starting at startNode and
// continuing through the rest of the DOM tree
function listNodes(startNode) {
    var list = new Array();
    var node = startNode;
    while(node) {
        list.push(node);
        node = nextNode(node);
    }
    return list;
}
// The same as listNodes(), but works backwards from startNode.
// Note that this is not the same as running listNodes() and
// reversing the list.
function listNodesReversed(startNode) {
    var list = new Array();
    var node = startNode;
    while(node) {
        list.push(node);
        node = prevNode(node);
    }
    return list;
}
// apply func to each node in nodeList, return new list of results
function map(list, func) {
    var result_list = new Array();
    for (var i = 0; i < list.length; i++) {
        result_list.push(func(list[i]));
    }
    return result_list;
}
// apply test to each node, return a new list of nodes for which
// test(node) returns true
function filter(list, test) {
    var result_list = new Array();
    for (var i = 0; i < list.length; i++) {
        if (test(list[i])) result_list.push(list[i]);
    }
    return result_list;
}

清单 9 包含了 4 个基本工具。listNodes() 和 listNodesReversed() 函数可以扩展到一个可选的长度，这与 Array 的 slice() 方法效果类似，我把这个作为留给您的练习。另一个需要注意的是，map() 和 filter() 函数是完全通用的，用于处理任何 列表（不只是节点列表）。现在，我向您展示它们的几种组合方式。


清单 10. 使用函数式实用工具 
												
														
// A list of all the element names in document order
function isElement(node) {
    return node.nodeType == Node.ELEMENT_NODE;
}
function nodeName(node) {
    return node.nodeName;
}
var elementNames = map(filter(listNodes(document),isElement), nodeName);
// All the text from the document (ignores CDATA)
function isText(node) {
    return node.nodeType == Node.TEXT_NODE;
}
function nodeValue(node) {
    return node.nodeValue;
}
var allText = map(filter(listNodes(document), isText), nodeValue);

您可以使用这些实用工具来提取 ID、修改样式、找到某种节点并移除，等等。一旦 DOM Traversal and Range API 被广泛实现，您无需首先构建列表，就可以用它们修改 DOM 树。它们不但功能强大，并且工作方式也与我在上面所强调的方式类似。

DOM 的危险地带

注 意，核心 DOM API 并不能使您将 XML 数据解析到 DOM，或者将 DOM 序列化为 XML。这些功能都定义在 DOM Level 3 的扩展部分“Load and Save”，但它们还没有被完全实现，因此现在不要考虑这些。每个平台（浏览器或其他专业 DOM 应用程序）有自己在 DOM 和 XML 间转换的方法，但跨平台转换不在本文讨论范围之内。

DOM 并不是十分安全的工具 —— 特别是使用 DOM API 创建不能作为 XML 序列化的树时。绝对不要在同一个程序中混合使用 DOM1 非名称空间 API 和 DOM2 名称空间感知的 API（例如，createElement 和 createElementNS）。如果您使用名称空间，请尽量在根元素位置声明所有名称空间，并且不要覆盖名称空间前缀，否则情况会非常混乱。一般来说，只要按照惯例，就不会触发使您陷入麻烦的临界情况。

如果您一直使用 Internet Explorer 的 innerText 和 innerHTML 进行解析，那么您可以试试使用 elem() 函数。通过构建类似的一些实用工具，您会得到更多便利，并且继承了跨平台代码的优越性。将这两种方法混合使用是非常糟糕的。

某 些 Unicode 字符并没有包含在 XML 中。DOM 的实现使您可以添加它们，但后果是无法序列化。这些字符包括大多数的控制字符和 Unicode 代理对（surrogate pair）中的单个字符。只有您试图在文档中包含二进制数据时才会遇到这种情况，但这是另一种转向（gotcha）情况。


回页首


结束语

我已经介绍了 DOM 能做的很多事情，但是 DOM（和 JavaScript）可以做的事情远不止这些。仔细研究、揣摩这些例子，看看是如何使用它们来解决可能需要客户端脚本、模板或专用 API 的问题。

DOM 有自己的局限性和缺点，但同时也拥有众多优点：它内置于很多应用程序中；无论使用 Java 技术、Python 或 JavaScript，它都以相同方式工作；它非常便于使用 SAX；使用上述的模板，它使用起来既简洁又强大。越来越多的应用程序开始支持 DOM，这包括基于 Mozilla 的应用程序、OpenOffice 和 Blast Radius 的 XMetaL。越来越多的规范需要 DOM，并对它加以扩展（例如，SVG），因此 DOM 时时刻刻就在您的身边。使用这种被广泛部署的工具，绝对是您的明智之举。


回页首


参考资料

  • 您可以参阅本文在 developerWorks 全球站点上的 英文原文。

  • 下载 JavaScript 库，它包含了上面的脚本和一个用于测试这些脚本的简单 测试页面。

  • 直接访问 DOM 发源地 —— W3C 的 DOM 资源页面 ，其中包含到所有与文档对象模型相关的标准的链接。

  • 查看 Jesse Ruderman 的 bookmarklets。虽然 Ruderman 没有创造术语“bookmarkets”，但他收集了很多一流的、简短的、书签似的 JavaScript，使用它们开发 DOM 的巨大潜力，使您的浏览器可以为您带来更多帮助。

  • 访问 Sjoerd Visscher 的 Beyond JS 库，它提供了远远超过我在这里提及的用于函数式编程的工具。如果您可以将事物抽象为函数，那么 JavaScript 将会成为您得心应手的工具。

  • DOM API 的标准参考在 W3C。这里是 DOM2 到 JavaScript （ECMAScript）映射 的网址。

  • 了解 AJAX 为什么已经引起了这么大的反响。它使用了异步调用来使服务器实时升级 Web 应用程序。您可以使用上述的许多技术，并阅读 异步通信工具。

  • 了解一下 XML 编辑器和工具的 XMetaL 系列，它们都支持 DOM API。它们由作者所在的公司 Blast Radius 开发。

  • 在 developerWorks 的 Developer Bookstore 了解更多 XMl 相关的书籍，其中包括 David Mertz 的 Text Processing in Python 一书。

  • 了解如何才能成为 IBM 认证的 XML 及相关技术的开发人员。


回页首


关于作者


Dethe Elza 现在最喜爱的头衔是“首席疯狂科学家（Chief Mad Scientist）”。可以通过电子邮件 delza@livingcode.org 与他联系。他在 http://livingcode.blogspot.com/ 上主要记录着关于 Python 和 Mac OS X 方面的 blog。欢迎对本专栏提出意见和建议。


Vincent Chen 2006-03-18 21:33 发表评论
]]>XML 事件简介::用较少的脚本编写动态文档http://www.blogjava.net/Vencent/articles/35988.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 13:28:00 GMThttp://www.blogjava.net/Vencent/articles/35988.htmlhttp://www.blogjava.net/Vencent/comments/35988.htmlhttp://www.blogjava.net/Vencent/articles/35988.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35988.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35988.html级别: 初级

Micah Dubinko, 首席顾问, Brain Attic, L.L.C.

2004 年 12 月 01 日

一 些标记技术涉及到为文档的某些部分附加上行为。XML Events 是 W3C 推荐的一种标准，它允许通过声明为特定的元素附加行为，这种行为可以是 XML 中预先定义的一组动作，也可以是更一般的脚本语言调用。本文将简要地介绍 XML Events 的由来、用途以及其工作方式。

现代的网站是高度交互的：动态的导航菜单、图像切换、表单，甚至还支持拖拉操作。这类网站的一个共同因素是通过某种技术将行为与文档的特定部分联系起来。不幸的是，当前的实践因为严重依赖脚本而造成了混乱，特别是那些需要适应多种浏览器的代码。

两种类型的事件

清单 1 列出了一些可能的变体。它定义了两个事件处理程序，一个用于 load 事件，另一个用于 unload 事件。一个处理程序是用 VBScript 编写的，通过一种不常见的技术附加到元素上，并用到了 script 元素的额外属性。另一个则是用 ECMAscript（请参阅 参考资料）编写的。


清单 1. 两种类型的事件 
												
														
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Intrinsic Events</title>
    <script event="onload" for="window" language="vbscript">
<!--
alert "hello"
-->
    </script>
  </head>
  <body onunload="alert('goodbye')">
  </body>
</html>

如果使用 Microsoft Internet Explorer 或者其他支持 VBScript 的浏览器查看，在加载文档的时候，就会出现一个显示“hello”的警告框。基本上所有的浏览器在关闭窗口或者导航到其他页面时都会显示 “goodbye”。要完整地描述这到底是怎么发生的，就需要了解 DOM Events，该标准目前由 Document Object Model (DOM) Level 2 Events Specification（请参阅 参考资料）授权的 W3C 文档指定。





回页首


事件的工作原理

事件到底是什么呢？对于本文而言，最好不要从“事件”一词的传统含义上思考，而应将其看作一种数据结构，包含变化的某些事物的详细信息。比方说，在 mouseover 事件中，我们所关心的事件对象的信息是鼠标指针的坐标、按下了哪个键、当前是否按下了修饰键如“shift”等等。单个事件对象的存活期非常短，在其消失之前刚够时间进行即时处理。

每个事件都有一个 目标，XML 或 HTML 元素和事件的关系最密切。事件 处理程序是对应特定事件的一段可执行代码或者标记。某些事件和其他处理程序不同，比如单击一个超链接，会引发称为 默认动作的活动。 清单 1 中 unload 事件的目标是 body 元素，事件处理程序 onunload 属性中为数不多的那一点脚本。

事件流

最简单、最常用的技术是直接将事件处理程序附加到目标上，过去，浏览器只支持这种技术。但是，这样做常常行不通，比如清单 2 中的例子：


清单 2. 论证是否需要事件观测者 
												
														
<p>You want to capture all clicks on this paragraph,
even if the text has <em>special markup</em>.</p>

清单 2 中，假设对目标为 p 元素的 click 事件有一个处理程序。如果用户恰好单击“special markup”这两个词，则会创建目标为 em 元素的一个事件。因为目标不是段落，单击事件处理程序就不会被触发。解决这个问题的方法是在 p 元素上放一个 observer 事件，它能够对以该元素自身或者 它的所有子元素为目标的事件作出响应。

DOM Level 2 Events 描述了如何连接事件处理程序，以解决 清单 2 中所示的问题，尽管由于浏览器的历史原因，这种方法可能有点过于复杂（Internet Explorer 和 Netscape 的早期版本各有自己的特点，其中一些要比正式的 DOM 规范早得多）。事件按照文档的树状结构进行假想的旅行，这个过程称为 传播。实际上它的旅行有两次：第一次旅行称为 捕获，从文档根开始，前进到目标元素。进行常规的目标处理后，第二次旅行称为 冒泡（bubbling），从目标元素开始，再回到文档根。每个阶段中，路径中的任何元素都可以注册为事件观测者，从而能够触发事件处理程序。然后事件将停止传播，避免后面的观测者再检测到发生的事件。图 1 说明了传播的过程。

事件和可访问性

无论何时考虑事件，都需要判断您到底需要哪种事件。比方说，确实关心按钮是否被鼠标单击吗？如果用其他某种方式激活又怎么样？一些 Web 用户没有鼠标，甚至都没有这样的图形用户界面。更好的办法是尽量使用设备无关的事件，比如用 DOMActivate 代替按钮的 click 事件。

W3C 发布的一些文档（请参阅 参考资料）描述了增强 Web 内容访问性的技术。


图 1. 事件的传播
一个树状结构，包括根、 <html>、<body>、<p> 和 <em>。标记为“capture”的箭头从根开始直到 <em>，后者标记为“target”。从目标回溯到根的箭头标记为“bubble”。<p> 元素标记为“observer”。

如果需要设置事件观测者，应该使用捕获阶段还是冒泡阶段呢？下面是一些指导原则：

  • 如果处理单个观测点 —— 这也是最常见的情况，使用哪个阶段都行，两者没有实际区别。只有需要从文档树中的多个位置观测一个事件时才会造成区别。
  • 某些事件（如 focus）不参与冒泡阶段，因此只能在捕获阶段观测，或者直接在目标上观测。
  • 当存在多个观测者时，如果希望首先触发最近的观测者则使用冒泡阶段。比如，假设在 图 1 中， body 和 p 上都有观测者。捕获的时候 body 上的观测者将首先被触发，然后再激活 p 上的观测者。而冒泡阶段，将首先激活 p 上的观测者，然后才是 body 上的观测者。
  • 要记住，对于 清单 1 中 onunload 所用的 HTML 4.0 风格的语法，观测者被注册到冒泡阶段。
  • 无论使用冒泡阶段还是捕获阶段，默认动作总是在所有的传播完成后执行。停止事件传播本身不会禁止默认动作的执行。一个单独的 API 特性允许取消默认动作，无论传播过程中发生什么事。

DOM Events 规范定义了从脚本中附加事件观测者的方法，如清单 3 所示。


清单 3. 附加事件观测者 
												
														
var el = document.getElementById('observer_element_id');
el.addEventListener("mouseover", highlight_func, true);
el.addEventListener("mouseout", normal_func, true);

addEventListener 调用中的第一个参数是事件名，第二个参数是要执行的函数引用，第三个参数是 true（表示在捕获阶段）或者 false（表示在冒泡阶段）。DOM Events 规范定义了一些核心事件，以及停止事件传播和取消关联的默认动作的 API 方法。

需要注意的是，这些 API 的不同浏览器的实现有很大的不同。具体地说，Internet Explorer 直到 6.0 版还不支持 addEventListener，但它使用了名为 attachEvent 的一个类似函数。





回页首


从事件到 XML Events

到目前为止，所有和事件有关的一切都和过程性脚本联系在一起。XML Events 规范在 DOM Level 2 Events 的基础上，增加了连接事件观测者的声明性方法。W3C XForms 规范（请参阅 参考资料）是率先定义兼容 XML Events 的元素库的标准之一，该元素库可以通过声明完成一般性的任务。清单 4 给出了 XForms 中的一个例子。（关于其中使用的完整名称空间声明，请参考 清单 5 中的完整例子。）


清单 4. 声明性事件处理程序 
												
														
<xf:trigger>
  <xf:label>Reset the form</xf:label>
  <xf:reset ev:event="DOMActivate" model="mymodel" />
</xf:trigger>

XML Events 被定义成一些属性。 清单 4 中的 ev:event 属性规定了要监听的特定事件，处理程序是 xf:reset 元素，观测者被默认为父元素 xf:trigger。注意，该清单中根本没有脚本。

XML Events 规范主要由可以放置在现有元素中的属性定义组成，还有一个 listener 元素用来容纳这些属性。每个属性都映射为 DOM Level 2 事件的一个特性。表 1 列出了所有的 XML Events 属性。

表 1. XML Events 属性

属性 功能
event 如 清单 4 所示，这个必需的属性用于命名触发监听者的事件
observer 该属性指向作为观测者的元素的惟一 ID
handler 该属性指向执行某种动作或处理的元素的 URI，该元素可能在不同的文档中
phase capture 或 default，该属性规定使用捕获阶段
propagate stop 或 continue（默认值），该属性规定事件是否继续传播
defaultAction cancel 或 perform（默认值），该属性规定传播后是否激活默认动作
target 该属性要求监听者 仅 对指向特定目标的事件作出响应，并且仅在特殊情况下使用
id 该属性为 listener 元素赋予文档中惟一的标识符

简便的默认值

清单 4 说明了用最少的属性使用 XML Events 的便捷方法：XML Events 属性直接附加到处理程序元素上。如果省略 ev:handler 属性，拥有 XML Events 属性的元素就被看作是处理程序。观测者可以通过 ev:observer 属性指定，或者默认为父元素。在 清单 4 中，观测者为 xf:trigger。

另一种类型的默认允许将 XML Events 属性附加到观测者元素上，这种情况下没有 ev:observer 属性，但是出现了 ev:handler 属性。

清单 5 重新创建了 清单 1 中的行为，显示了这两种默认技术，并使用了脚本和声明性动作。


清单 5. 使用 XML Events 的两种方法 
												
														
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
         xmlns:ev="http://www.w3.org/2001/xml-events"
         xmlns:xf="http://www.w3.org/2002/xforms">
  <head>
    <title>XML Events</title>
    <script type="text/javascript" ev:event="load" ev:observer="bod_id">
alert("hello");
    </script>
    <xf:message level="modal" id="hndl_id">goodbye</xf:message>
  </head>
  <body id="bod_id" ev:event="unload" ev:handler="#hndl_id">
  </body>
</html>

这里的 script 元素是一个处理程序，被附加到 bod_id 上的一个观测者（ body 元素）。 xf:message 元素本身什么也不做，但观测者元素（还是 body）又指向了它，注册了事件处理程序。





回页首


结束语

脚 本显然在很多方面都很有用。尽管如此，它仍然难以通过脚本完成某些任务。XML Events 为通过声明将脚本附加到文档中提供了统一的语法，甚至能够定义不依赖于脚本解释器的行为。现在有越来越多的标记技术开始采用 XML Events，其中包括 XForms、XHTML、SVG 等。在以后的文章中，我将详细探讨如何使用和实现 XML Events。


回页首


参考资料





回页首


关于作者

Micah Dubinko 的照片

Micah Dubinko 是 Brain Attic, L.L.C. 的顾问和缔造者之一，这是一家专门应对信息过载的软件供应商和咨询公司。他为 O'Reilly Media 撰写了 XForms Essentials 一书，并参加了开发 XForms 1.0 的工作组。他在亚利桑那州菲尼克斯定居和工作，您可以通过 micah@brainattic.info 与他联系。



Vincent Chen 2006-03-18 21:28 发表评论
]]>XML 标准概览: 第 2 部分::XML 处理标准http://www.blogjava.net/Vencent/articles/35985.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 13:27:00 GMThttp://www.blogjava.net/Vencent/articles/35985.htmlhttp://www.blogjava.net/Vencent/comments/35985.htmlhttp://www.blogjava.net/Vencent/articles/35985.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35985.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35985.html级别: 中级

Uche Ogbuji, 首席顾问, Fourthought,Inc.

2004 年 2 月 01 日

XML 世界非常庞大，而且还在不断成长，存在大量不同的标准和技术，它们以复杂的方式互相影响。新手很难确定哪些是 XML 最重要的方面，用户也难以跟踪这个领域出现的新生事物和变化。在这一系列的文章中，Uche Ogbuji 提供了 XML 标准的指南，并为进一步的学习推荐了广泛的资料。Uche Ogbuji 继续关于 XML 的论述，这次主要讨论 XML 处理技术。

XML 变得越来越强大，得到了迅速的发展。它已经证明自己是一种非常有价值的技术，但可能也是一种令人害怕的技术，如果考虑到挂在“XML”一词下面不断变化的 各个部分。在这一系列的文章中，我将简述我认为最重要的 XML 技术，讨论它们如何在 XML 世界中更大范围内的彼此融合。为了进一步评估和学习使用各种技术，我还推荐了一些教程和其他有用的参考资料。

这里介绍的所有技术都是 标准，尽管这个词本身就有点捉摸不定。标准有各种各样的形式，而且在同一个领域中常常有多种标准互相竞争。我按照实践的方法把标准定义为：被不同的供应商大量采用的或者有影响、独立于供应商的组织推荐的规范。

在 第一篇文章中，我主要讨论了核心 XML 技术。（关于各种标准开发团体和规范分类的概述，请参阅 文章的侧栏。）本文中我将讨论和开发人员处理 XML 有关的标准。下一篇文章中将介绍选择的一些最重要的 XML 应用（即词汇表）。

XSLT

Extensible Stylesheet Language Transformations (XSLT) 1.0 [W3C 推荐标准]是一种转换语言，描述从输入 XML 文档到输出树的转换。比如，输出树可以是 HTML 文档的形式也可以是另一种 XML 格式。因此，XSLT 可以作为把 XML 呈现为遗留浏览器显示格式的语言，也可以保持格式不变作为对 XML 文件操作的语言。转换本身使用一种专门的词汇表定义为 XML 文档。使用XPath（ 前文 已述）访问原文档和生成表达处理。专门的指令建立处理规则（XSLT 是一种声明性语言）并控制输出树的创建。 XSLT 1.0 是一种非常成功的语言，涵盖了多数常用的 XML 处理任务。如果熟悉 XML，学习 XSLT 的基础并不难，但精通这门语言还是需要很大的努力。它有一种设计很好的扩展机制。它的声明性处理模型使代码很容易维护和重用。把 XML 文档链接到它的 XSLT 样式表文档的标准方式在 Associating Style Sheets with XML documents, Version 1.0[W3C 推荐标准]中定义。XSLT 规范被 翻译成了各种不同的语言。

如前所述，XSLT 有一种很好的扩展机制，允许您使用自己选择的语言定义另外的功能。但更好的是，您甚至不必去编写扩展，因为别人已经替您做了。 EXSLT[社区规范]是这类扩展的一个标准集，采用了隐藏实现的定义方式。EXSLT 试图囊括通常需要的多数扩展，比如日期处理、正则表达式和数学操作。许多 XSLT 实现都实现了一个或多个 EXSLT 模块。

XSLT 2.0 [开发中]根据收集的 XSLT 1.0 使用经验提供了一些重要的改进，但缺点是对 XPath 2.0 的密切依赖，我认为后者存在根本上的缺陷（请参阅 第 1 部分）。

推荐的入门参考和教程

参考资料和其他资源

  • ZVON 提供了一个 XSLT Reference。
  • Dave Pawson 的 XSL FAQ谈到了 XSLT 和 XPath 以及 XSL-FO（本系列文章后面将述及）。
  • TopXML 分类提供了 100 多个 XSLT 样式表的例子。
  • Jeni Tennison 以其对 XSLT 奥秘清晰而深刻的阐述而知名，她的 XSLT 页面是常见 XSLT 问题非常棒的参考。




回页首


SAX

Simple API for XML (SAX) [社区规范]是一种事件驱动的 API。XML 标记的不同部分（如起始和结束标签、文本、实体）触发特殊的事件，开发人员为这些事件注册处理程序代码。然后，解析器根据输入的 XML 发出事件流，处理程序代码依次处理这些事件。

SAX 的创立基本上是一个马拉松式的过程，从 1997 年后期由 XML-DEV 邮件列表 发起，长期以来这个邮件列表一直是 XML 专家的主要据点。David Megginson 领导了这个讨论组，造就了最成功的 XML 研究项目之一，没有任何大公司或标准团体的资助。在 SAX 之前，每种解析器都通过自己私有的 API 在 XML 结构与处理程序代码之间通信，SAX 提供了重要的统一性。通常提供 SAX 驱动程序的解析器都把底层的解析器事件转化成 SAX 标准事件，以支持代码的移植。SAX 最初的想法是用 Java 语言开发，但已经普及到多种语言和环境，尽管有时候它的以 Java 为中心的特点增加了移植的复杂性。SAX 目前处在第二代，包括 XML 名称空间处理和相对于文档结构可以选择的某些事件报告。

在主流语言中，基于事件的接口通常使用 回调函数实现，这是一种在 GUI 之类的编程中常见的方式。在面向对象语言中，回调函数通常是对象的注册方法，使用多态匹配方法名和处理程序代码，并在两次回调之间通过封装在处理程序中管理状态。基于事件编程的整个模型被称为 推式模型，背着多数程序员都难以掌握的名声。但是，多数被认为容易编程的模型都需要对文档进行随机访问，从而造成效率低下，因此 SAX 享有处理 XML 最有效的标准方式的美誉，如果不是最容易的方式的话。

推荐的入门参考和教程

参考资料和其他资源

  • XML.org 的 SAX 专栏提供了很有用的资源链接。
XML 的编程语言

从一开始，XML 就受到了程序员的广泛关注。这里对使用各种语言处理 XML 的程序员列出了一些有用的资源：

Java 技术： IBM alphaworksXML 页面 ； Apache XML 页面； Sun 的 Java 技术和 XML 社区

C/C++：“ C/C++ 开发人员：充实您的 XML 工具箱” （ developerWorks，2001 年 9 月）

Python: Special Interest Group for XML Processing in Python； XML.com 上的“ Python & XML”专栏； “ The State of the Python-XML Art, 2003”；“ Uche Ogbuji 关于在 Python 中处理 XML 的 Akara 网站”

Perl: “ Perl 开发人员：充实您的 XML 工具箱” ( developerWorks，2001 年 6 月）； Perl-XML Project；XML.com 上的“ Perl & XML”； XMLperl.com

其他： PHPXML Classes ； < rubyXML/> ； XML 与 Scheme




回页首


DOM

Document Object Model (DOM) [W3C 推荐标准]是一种 XML 文档对象模型，可用于直接访问 XML 文档的各个部分。在 DOM 中，文档被模型化为一棵树，其中每个 XML 语法成分（如元素和文本内容）都用一个节点表示。DOM 是一种 API，允许您在这种树中导航，从父节点移动到子节点或者在兄弟节点之间移动，并利用特定节点类型的特性（比如，元素可以有属性，而文本节点有文本数 据）。DOM 被设计成语言中立的。使用了 Object Management Group（对象管理组，OMG）的 CORBA Interface Definition Language （接口定义语言，IDL）[ISO 国际标准，编号 14750]表示 DOM 节点和支持接口。

DOM 作为一种对象模型，最初实际上是用于在 Web 浏览器中标准化 HTML 和 XML 对象的脚本操作。作为独立的编程 API 使用时，有时候这种转换非常笨拙。DOM 的演进经过了几个级别，每个版本都在上一级别的基础上增加了新的功能。Level 1 包括了基本的功能，Level 2 增加了对名称空间的支持、一个 UI 事件模型、迭代器等等。Level 3 增加了用于从 XML 文档文件中加载和保存的 API，集成了 XPath，增加了对验证的支持等等。

DOM 一般比 SAX 更容易掌握，因为它没有涉及到回调和复杂的状态管理，但是 DOM 实现通常在内存中保存所有的 XML 节点，对于较大的文档效率可能非常低。尽管许多语言都有 DOM 实现，DOM 还是努力保持语言的中立性。特定语言的拥护者常常抱怨 DOM 难以使用，不能利用任何语言的特长。结果涌现了许多针对特定语言的树处理 API。

推荐的入门参考和教程

参考资料和其他资源





回页首


XAPI

XML Database API (XAPI) [开 发中]是一种用于 XML 数据库的独立于供应商和语言（尽管是面向对象的）的 API。XML:DB 是致力于 XML 数据库管理工具的开发人员兴趣小组。XAPI 涵盖了 XML 数据库中数据的存储、检索、修改和查询，以及对事务管理的支持。它类似于 ODBC 和 JDBC。和 DOM 一样，XAPI 也指定使用 OMG IDL，并按照功能级别组织。Level 0 是基本的 API，Level 1 增加了 XPath 支持（XPathQueryService）。XAPI 在原生 XML 数据库管理工具中得到了广泛的实现，尤其是开源工具如 Apache XIndice 和 SleepyCat Berkeley XML DB。尽管如此，除了 XML:DB 规范本身外，这方面的 Web 资源还很少。 API Use Cases提供了一些在 Java 语言中使用这种 API 的很粗略的例子。





回页首


XUpdate

XUpdate [开 发中]定义了修改 XML 文档中的数据的更新工具。尽管 XUpdate 是由 XML:DB 小组定义的，但 XUpdate 被设计成能够处理常规的 XML 文档和存储在数据库中的 XML，甚至虚拟的 XML 数据模型。XUpdate 是一种类似 XSLT 的 XML 词汇表，但是比 XSLT 简单得多，总体上是一种很容易理解的词汇表。和 XSLT 相似，它也使用 XPath 访问修改的文档，并使用专门的元素定义输出操作。XUpdate 也有广泛的实现，特别是在开源工具中，如 XML DBMS 和 XML 比较和修补工具。 XUpdate Use Cases草案也是很好的 XUpdate 入门参考。

推荐的入门参考和教程





回页首


XQuery

XQuery 1.0: An XML Query Language [开 发中]是一种用于查询 XML 数据源——文档和数据库——的规范。XQuery 是一种非常复杂的编程语言，组成了 XPath 的一个超集。XQuery 是与 XPath 2.0 一起开发的，同样因为其复杂性而备受争议，其实许多争论是不必要的。XQuery 1.0/XPath 2.0 系统包括令人生畏的一大批规范定义，包括语义、语法以及核心函数库：

推荐的入门参考和教程

  • Howard Katz 撰写的“ XQuery 简介”介绍了 XQuery，并提供了一些例子，根据最近的工作草案作了更新（ developerWorks，2003 年 9 月）。
  • Nicholas Chase 的“ 使用XML Query 处理XML”讲授 XQuery 并考察了 XPath 2.0 中的变化。它讨论的是较早版本的工作草案，但是因为此后的变化很小，我还是推荐这个教程（ developerWorks，2002 年 9 月）。
  • Per Bothner 撰写的文章“ What is XQuery?”，最近的 修订论及最新的草案。

参考资料和其他资源

  • xquery.com是一个很好的 XQuery 资源集散站，还包括一个 Wiki，这是一种协作式的资源索引和讨论网页。




回页首


SQL/XML

SQL/XML [ISO 国际标准 ISO/IEC 9075-14:2003]是 SQL 标准的一个新的分支，包括大量和 XML 有关的对 SQL 的扩展。SQL/XML 最初是由“SQLX Informal Group of Companies（非正式企业组织）”开发的，其中包括 IBM，后来交给了美国国家标准局（ANSI——维护 SQL 的标准组织）中的委员会。SQL/XML 所涉及到的范围包括（引自 Andrew Eisenberg 与 Jim Melton）：

  • SQL 数据（具体而言就是行和表，以及视图和查询结果）以 XML 形式表示（或者相反）的规范。
  • 与 SQL 架构和 XML 架构之间的映射有关的规范，可能包括实现任何已有 XML 架构和 SQL 架构之间的映射。
  • SQL 架构在 XML 中表示的规范。
  • SQL 动作（插入、更新、删除）表示的规范。
  • 和 SQL 一起使用时 XML 的消息规范。

SQL/XML 与 XQuery 很少交叉，两个标准中同时涉及的部分一般能一起工作。

参考资料和其他资源





回页首


CSS

Cascading Style Sheets (CSS) [W3C 推荐标准]是一种将表示样式应用于标记的系统。最知名的是在样式化 HTML Web 页中的应用，但尤其是从 CSS Level 2 发布以来，它也非常适合在 Web 或者其他媒介上表示 XML 文档。把 XML 文档映射到输出结构通过使用 display 属性完成。XML 文档链接到它的 CSS 样式表文档的标准方式在 Associating Style Sheets with XML documents Version 1.0[W3C 推荐规范]中定义。

推荐的入门参考和教程





回页首


XForms

XForms 1.0 [W3C 推荐标准]，不要与名称相同的 XWindows GUI 库混淆，这是用于 XML 数据处理的 Web 表单规范，可通过不同的媒介用于不同的平台。XForms 希望把表单的用途和表示分开。它把表单做什么与表单看起来怎么样分离开。它是一种 XML 词汇表，可用于开发表单 UI 以操纵 XML 内容。XForms 最初是 XHTML 家族的一部分，但已经完全独立出来了。尽管其复杂程度超出了需要，但看来是一种能够把混乱的 Web 表单世界带入正轨的技术。

推荐的入门参考和教程

  • Micah Dubinko 写的“ What Are XForms?”对这种技术作了一般性的介绍。
  • Joel Rivera 和 Len Taing 撰写的“ 准备使用 XForms”，通过几个详细的例子介绍了 XForms（ developerWorks，2002 年 9 月）。
  • Nicholas Chase 的“ 理解 XForms”更深入地分析了一系列的例子（ developerWorks，2002 年 12 月）。




回页首


SOAP

SOAP [W3C 推荐标准]（尽管使用大写，但已经成为正式的名词而不再是缩写词了）是一种协议，在使用底层 Internet 协议连接的系统之间使用 XML 通信。一些用户认为 SOAP 是 XML Web 服务的 基础，这是一组技术的统称，用于管理和组织使用 XML 数据格式和 Internet 通信协议连接的系统之间交互的一组技术。SOAP 最初是在数量不多、临时拼凑的个人之间开发的，这些人来自各种不同的公司，其中包括 IBM。之所以能够得到迅速普及，是因为它提供了与早期对 XML 消息的研究成果相似的功能，并且有更牢固的体系结构基础和更多的商业支持。SOAP 的开发交给了 W3C，W3C 开发了 SOAP 1.2，在体系结构上作了许多改进，但是也对许多争议作了折衷。SOAP 定义了一种 XML 信封格式，可以包含伪 XML 载荷（SOAP 消息的实际有效载荷不能使用 XML 的所有功能，这是引起激烈争论的一个焦点）。

Web 服务不一定必须使用 SAOP，许多人鼓吹直接在 HTTP 上交换原始 XML 文档的观点，这是松散地聚在“ REpresentational State Transfer (REST)” 大旗下的人吹捧的一种方法。REST 本身是它的架构师之一，Roy Fielding，为一种 Web 体系结构方式所取的名字。REST 风格 Web 服务的鼓吹者抱怨 SOAP 太复杂、XML 有效载荷像是杂耍，而且没有充分利用 Web 的基本能力。在 SOAP 的提倡者中，最近的重点已经从 SOAP 的 RPC 源头转移到了所谓的 实文档方式的 SOAP。在 RPC 方式中，传输的数据使用专门的 XML 符合格式（称为 SOAP 编码）编组成离散的数据类型。在实文档方式中，XML 负荷由更自然的 XML 格式组成，通常更具有描述性，更便于人类阅读。

SOAP 大厦

建立在 SOAP 基础上的大批标准——许多已经超出了本文中所能讨论的范围。关于这些标准的信息有一些很好的资源：

至今仍然广泛使用的一种 SOAP 先驱是 XML Remote Procedure Calls (XML-RPC)[社 区规范]。XML-RPC 定义了使用 XML 编码通过 HTTP 通信的过程调用。之所以流行至今是因为它的简单性（整个规范打印出来不超过 10 页），而且现在的多数语言和许多应用程序框架，都有标准的或者容易应用的 XML-RPC 实现。它确实有一些很突出的不足，包括非常原始的数据类型化以及缺乏对字符编码的支持（对于使用 XML 而言，这真是一个令人吃惊的瑕疵）

推荐的入门参考和教程





回页首


WSDL

根据正式的定义， Web Services Description Language (WSDL) Version 1.2[开 发中]是“一种描述网络服务的 XML 格式，它把网络服务描述为对消息的一组端点操作，消息可以包含面向文档的信息或者面向过程的信息。”它在一系列抽象层次上定义了 Web 服务中端到端通信的组件。WSDL 最初是作为 IBM 和 Microsoft 的合作项目发起的，但在 WSDL 1.2 的开发是已经交给了 W3C。WSDL 通常伴随着 SOAP 作为 Web 服务核心技术，但也可用于描述 SOAP 之外的其他协议。

推荐的入门参考和教程

  • IBM developerWorks上的一篇文章讨论了旧版本的 WSDL，即 Bilal Siddiqui 撰写的“ 使用 WSDL 部署 Web 服务”（2001 年 11 月）。




回页首


后续内容

本文综述了和应用程序开发有关的最重要的 XML 标准。下一篇文章中，我将分析最重要的通用 XML 词汇表。


回页首


参考资料





回页首


关于作者

Author photo

Uche Ogbuji 是 Fourthought Inc.的顾问和共同创始人，该公司是专为企业知识管理提供 XML 解决方案的软件供应商和咨询公司。 Fourthought 开发了 4Suite，这是一个用于 XML、RDF 和知识管理应用程序的开放源代码平台。Ogbuji 先生是 VersaRDF 查询语言的首席开发人员。他是一位出生于尼日利亚的计算机工程师和作家，在美国科罗拉多的博耳德生活和工作。可以通过 uche.ogbuji@fourthought.com和 Ogbuji 先生联系。



Vincent Chen 2006-03-18 21:27 发表评论
]]>XML 标准概览: 第 1 部分::核心标准——XML 大世界的基石http://www.blogjava.net/Vencent/articles/35987.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 13:27:00 GMThttp://www.blogjava.net/Vencent/articles/35987.htmlhttp://www.blogjava.net/Vencent/comments/35987.htmlhttp://www.blogjava.net/Vencent/articles/35987.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35987.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35987.html级别: 初级

Uche Ogbuji, 首席顾问, Fourthought, Inc.

2004 年 2 月 01 日

XML 世界非常庞大，而且还在不断成长，存在大量不同的标准和技术，它们以复杂的方式互相影响。新手很难确定哪些是 XML 最重要的方面，用户也难以跟踪这个领域出现的新生事物和变化。在这一系列的文章中，Uche Ogbuji 提供了 XML 标准的指南，并为进一步的学习推荐了广泛的资料。

XML 变得越来越强大，得到了迅速的发展。它已经证明自己是一种非常有价值的技术，但可能也是一种令人害怕的技术，如果考虑到挂在“XML”一词下面不断变化的各个部分。在这一系列的文章中，我将简述我认为最重要的 XML 技术，讨论它们如何在 XML 世界中更大范围内的彼此融合。为了进一步评估和学习使用各种技术，我还推荐了一些教程和其他有用的参考资料。

这里介绍的所有技术都是 标准，尽管这个词本身就有点捉摸不定。标准有各种各样的形式，而且在同一个领域中常常有多种标准互相竞争。我按照实践的方法把标准定义为：被不同的供应商大量采用的或者有影响的、独立于供应商的组织推荐的规范。

在第一篇文章中，我主要讨论我认为是核心的 XML 技术。这些技术构成了 XML 文档中所表达的内容的基础。在以后的文章中，我将讨论和开发人员处理 XML 有关的标准，和选择一些最重要的 XML 应用（即词汇表）。

XML

XML 1.0 （第 2 版） [W3C 推荐标准]当然是衍生出 XML 技术大树的主干。它在 Unicode [Unicode Consortium 技术报告和 ISO 标准]的基础上定义了文本格式的严格规则，以及 Document Type Definition （文档类型定义，DTD）验证语言。该规范的当前版本（第 2 版）包含了规范的历次修订。它被 翻译 成多种语言，尽管英语版本是唯一的 规范版本，就是说只有这个版本被认为具有标准的效力。

XML 1.1 [开发中]是改变了 结构良好的 XML 文档的定义的第一个修订版。主要的变化是修订了 XML 规范中对字符的处理，使其更自然地适应 Unicode 规范的变化，并通过引用 Character Model for the World Wide Web（万维网字符模型）1.0 [开发中]，提供了不同 Unicode 版本字符的规范化。XML 1.1 还增加了行结束字符列表，新增加的 NEL 用于在 IBM 大型机系统中表示行结束（EOL）。这种变化存在争议，有人认为对大型机用户带来的有限好处不值得做这种基础性的改变。还有一些其他的争论，因为一些评论者发现所有的修改都太稳妥了，在 XML 版本变换中不会造成各种可能的互操作性问题。

XML 是基于 Standard Generalized Markup Language（标准通用标记语言，SGML）的，后者由 ISO 8879:1986 [ISO 标准]定义。它在很大程度上简化了 SGML，包括一些调整使其更适合于 Web 环境。

推荐的入门参考和教程

  • 以 Doug Tidwell 的文章“ XML 入门” （ developerWorks, 2002 年 8 月）作为起点。
  • ZVON 的 XML 教程和 DTD 教程有多种语言的版本。
  • Ken Sall 所著的 XML Family of Specifications: A Practical Guide中的 Excerpts一章提供了简单的介绍。
  • W3Schools 和 W3C 没有任何从属关系，提供了包罗万象的 XML 教程。
  • Mike Brown 的“ skew.org XML 教程”是对 XML 的重新介绍，强调了编码的问题，突出了其他文献中经常掩盖的一些主题。

参考资料和其他资源





回页首


Catalogs

XML Catalogs [OASIS 委员会规范]定义了一种格式，指导 XML 处理程序把 XML 实体标识符解析成实际的文档。比如，给定一个 DTD 的系统标识符和公共标识符， 实体目录可用于规定 XML 处理程序从哪里加载 DTD。 系统标识符通常使用 Uniform Resource Identifiers（统一资源标识符，URI）给出，后者受 RFC 2396: Uniform Resource Identifiers [IETF RFC]的控制。URI 仅仅是对 Web 浏览器或者类似工具中所用的一般 URL 的扩展。所有的 URL 都是 URI，但是 URI 还包括 URN，URN 由 RFC 2141: Uniform Resource Names [IETF RFC]控制，这是使用名称而不是位置标志 Web 资源的一种方式（请参阅“ The URN Charter”）。 公共标志符通常用 SGML 中定义的 Formal Public Identifiers（正式公共标志符，FPI）指定。目录可能在这样的情况下使用：所用的计算机不能访问 URL 所指定的网络资源，或者企业希望用当地版本代替外部资源。

XML 目录本身是一个 XML 文档，不过是一种用于 SGML 的较老的格式，而 XML 使用更简单文本定义了一种目录格式： Entity Management, OASIS Technical Resolution 9401:1997 [OASIS 标准]。这种格式经常被称为 OASIS Open Catalog。

推荐的入门参考和教程

目录处理通常作为 XML 解析器完整的一部分提供，但是有一些介绍性的资料专门讨论使用目录解析实体：

多种风格的标准

有几种组织和非正式的团体参与了为 XML 用户指定标准的过程。在 参考资料中提供了大多数链接，但这里我要解释一下在本文中用于修饰标准的一些词汇

W3C 正式发布的 推荐标准，在技术上讲仅仅是关于进一步标准化的建议，但是由于该组织自身的权威性往往成为 事实上的标准。首先是 工作草案，然后成为 候选推荐标准（提出来供开发人员通过实现进行测试的最终形式），接下来是 提议的推荐标准（准备进行推荐标准的待定 W3C 投票），最后规范进入推荐标准状态。

国际标准化组织（ISO） 可能是世界上最权威的标准体。它的许多标准在相关行业中都具有法律效力。

结构化信息标准推进组织（OASIS） 大约从 SGML 的时代开始在结构上就发生了变化，但工作的成果是类似的。过去 OASIS 所称的 Technical Resolutions（技术解决方案）现在变成了 Committee Specifications（委员会规范），目的和 W3C 推荐标准是类似的。

Internet 工程任务组（IETF） 是一种依靠基层力量发达昌盛的组织模型，同时也尝试引入正式组织的一些节制手段。差不多能够访问 Internet 的任何人都可以提交 Internet 草案，并建议作为一种可能的标准。一个指导小组对草案进行了评估，并可能推荐作为 Request for Comment（请求注释，RFC）发布。RFC 可以标记为 Standards Track RFC（标准跟踪 RFC）或者直接成为 Standard RFC（标准 RFC），但是成为 RFC 的多数文档都经过详细的考察，并且经常已经很好地实现过。

最后还要向 XML 社区致意，他们创建非正式的但是重要的标准的努力填补了大型组织留下的空白。SAX、RDDL 和 EXSLT 是一些非常著名的例子。OASIS 通过努力已经成为吸引这类标准争鸣的阵地，但是愿意通过邮件列表打造一种事实标准的仍然不乏其人。





回页首


XML Namespaces

Namespaces in XML 1.0 [W3C 推荐标准]提供了一种统一命名 XML 文档中的元素和属性的机制。一些这些简单的例子可以解释 XML NameSpace 幕后的动机：假设您有一个 XML 词汇表，其中名为“head”和“body”的元素作为解剖学描述的标记，但是您希望在文档中嵌入 XHTML （参见后述）片段。XHTML 也定义了“head”和“body”元素。如何从同名的宿主词汇表元素中区分 XHTML 元素呢？使用 XML Namespaces 就可以为每种词汇表指定一个标记。在 XML 名称空间中，每种词汇表被称为一个名称空间，有专门的语法表示词汇表标记。每个元素或属性名都和一个名称空间联系，这样就能把解剖学上的“head”和 XHTML “head”区分开来。在 XML 专家中，对 XML 名称空间曾经存在争议，因为对 XML 处理模型增加了一点复杂性，一些人认为这样做带来的好处不能抵消引起的问题。无论如何，XML 名称空间已经在 XML 用户中得到了广泛的认可，差不多所有的 XML 处理技术都能处理 XML 名称空间。

Namespaces in XML 1.1 [开发中]是一次更新，结合了勘误表与补充，其中包括对国际化 URI 的支持。

经常提出的和 XML 名称空间有关的一个问题是，应该标识哪一类资源的名称空间 URI。Jonathan Borden 和 Tim BrayOne 领导的 XML 专家组提出了 Resource Directory Description Language （资源目录描述语言，RDDL）作为在名称空间中打包信息的一种标准。RDDL 使用 XHTML 提供词汇表的简单描述，用内嵌的 XLink（将在本文中讨论）提供到重要资源的指针，帮助理解和处理这种名称空间。 RDDL 2.0[开发中]是一个升级版本，寻求通过两种选择代替 XLink： Resource Description Framework（资源描述框架，RDF）（后面讨论）以及在邮件列表上为 W3C Technical Architecture Group（技术体系结构组，TAG）开发的替代 XML 链接建议。

推荐的入门参考和教程

上面提到的一些 XML 1.0 教程涉及到了 XML 名称空间。此外还有：

参考资料和其他资源





回页首


XML Base

XML Base [W3C 推荐标准]提供了一种联系 XML 元素和 URI 方法，以便更精确地规定在相关的 XML 处理活动中如何解析相对 URI。比方说，如果一个 XML 元素包含使用相对 URL 的链接，要链接的绝对 URL 就要通过参考该元素的基 URL 来决定。多数 XML 处理程序都对组成文档的每个 XML 实体假定一个基 URL，可以使用 XML Base 替换这种默认设置。

推荐的入门参考和教程





回页首


XInclude

XML Inclusions (XInclude) 1.0 [开发中]提供了一种合并 XML 文档的系统。XInclude 通常用于希望将 XML 文档分成多个可管理的段的情况。可以根据需要分割文档，然后再使用 XInclude 把文档合并回去。 外部已解析实体是一种 XML 1.0 结构，允许从单独的文件中加载文档的一部分，可以完成类似的功能，从某种程度上说 XInclude 是一种不必要的规范。XInclude 提供了一些特殊的便利之处，比如在包含文档时可以选择包含文档的哪些部分。

推荐的入门参考和教程





回页首


XML Infoset

XML Information Set [W3C 推荐标准]也称为 XML Infoset，定义了一种抽象的方式把 XML 文档描述为一系列带有特定属性的对象，即 信息项。这种抽象数据集结合了在 XML 1.0、XML Namespaces 和 XML Base 中定义的 XML 文档的各个方面。XML Infoset 被用作其他几种规范的基础，这些规范试图把 XML 文档分解成一些组成对象的集合。

推荐的入门参考和教程





回页首


Canonical XML ("c14n")

Canonical XML Version 1.0 [W3C 推荐规范]是一种生成 XML 文档物理表示的标准方法，称为规范化形式，用于统一 XML 语法中不影响语义的几种变体。比如，在 XML 中属性的顺序并不重要，因此如果一个文档中所有的属性都按照字母顺序排列，而另一个相同的文档以不同的方式保存属性，尽管其物理表示不同，但对于 XML 1.0 而言两个文档是等价的。这有时候会造成应用中的问题。比如，如果希望用数字加密的签名保护文档不被篡改，改变属性的顺序会破坏签名，尽管对 XML 1.0 来讲文档实际上并没有改变。解决的办法是在签名、文本比较或者其他此类操作之前把文档转化成规范的形式（这个过程称为“规范化（c14n）”）。这样就可以保证正确地接纳 XML 1.0 中认为不重要的变动。

有时候需要比较或者签署的 XML 实际上是一个更大的文档的一部分。即便如此，c14n 通常也需要解决这种问题以便处理名称空间声明这样的细节。如果需要把 c14n 严格限制在一个文档子集中，就必须使用相关的算法 Exclusive XML Canonicalization Version 1.0[W3C 推荐标准]。





回页首


XPath

XML Path Language (XPath) 1.0 [W3C 推荐标准]是处理 XML 文档部分的一种语法和处理模型。它包括一些通用表达式语言的特性，被设计成一种小型的语言，以便在 XML 系统中进行应用程序中立的处理。比如，可以使用 XPath 定位文档中所有的节标题元素。

除了 XML 1.0 本身，XPath 可能是最成功的 XML 技术。它是 XSLT（本系列文章中间加以论述）的核心，后者是一种非常成功的 XML 转换语言，差不多所有的平台上都提供它处理 XML。 XPath 2.0[开发中]增加了新的特性，包括对 W3C XML Schema（后面将讨论）的支持和许多新的核心功能。这是一个饱受争议的规范，因为它的庞大增加了复杂性；许多用户和实现者（包括我自己）都说除非 XPath 2.0 得到很大的简化，否则就避免使用它。

推荐的入门参考和教程

基本上所有关于 XSLT 的介绍都同时涉及到 XPath。这里列出专门讨论 XPath 的教程：





回页首


XPointer

XPointer Framework [W3C 推荐标准]定义了一种语言，可用语音用 XML 文档中的片段。对于使用带有井号（#）的 URL 链接到 XML 文档中的特定片段，您可能已经非常熟悉了。在链接和引用 XML 文档时，XPointer 带来了类似但是更广泛的能力。这种框架可以和 xpointer() scheme[开发中]、 element() scheme[W3C 推荐标准]以及 xmlns() scheme[W3C 推荐标准]一起使用，这些标准定义了在 XPointer 框架中表达所关心的文档片段的具体要求。

XPointer 经历了一段艰难的历程，饱受非议。XPointer 工作组本身的成员开发了一种相反的建议， FIXptr [社区标准]。几种替代的 XPointer 方案包括 the xpath1() scheme[IETF Internet 草案]。

推荐的入门参考和教程

在成为推荐标准之前，XPointer 进行了非常大的修改，所以要注意有许多教程所讨论的是旧版本。





回页首


XLink

XML Linking Language (XLink) 1.0 [W3C 推荐标准]提供了一种在 XML 文档中表示链接的通用框架。需要链接的超文本是 Web 的基础，加入完善的链接能力一直被认为是 XML 的基石。事实上，XLink 最初被称为 "XML part 2"。不幸的是实践证明，为 XML 定义一种链接系统和为 HTML 这样的静态词汇表定义链接系统相比要远远复杂得多。XLink 的开发经历了漫长的过程，遭受了种种非议。比如，XHTML （本系列文章将讨论）的开发者决定不使用 XLink 而创建他们自己的系统，称为 HLink [开发中]。即使到现在，XLink 已经完成两年了，对它的采用仍然非常缓慢。。

无论如何，XLink 都非常重要，处在许多 XML 相关项目中的中心位置，与基本的、单向的 HTML 链接相比提供了更丰富的链接功能。XLink 页提供了这种链接（ 简单链接)，同时还提供了更复杂的可以有多个端点的链接（ 扩展链接），甚至还有在链接的文档中没有表达而是在专门的中心文档（称为 链接库）中表示的链接。

推荐的入门参考和教程

您可能会找到讨论该语言的旧的、废止的草案的 XLink 教程。下面是最新的教程：

参考资料和其他资源

  • ZVON 也提供了一份“ XLink Reference”。
  • Bob DuCharme 在他的文章中“ XLink: Who Cares?”中讨论了 XLink 的历史并研究了它的实现。




回页首


RELAX NG

RELAX NG [OASIS 委员会规范和 ISO 草案标准]是一种 XML 模式语言，即一种可用于定义和限制 XML 词汇表的语言。最初的 XML 模式语言是 XML 1.0 自己定义的文档类型定义（DTD）。但是，一些人不喜欢 DTD，因为它丑陋的语法、表达文本和标记结构的局限性，并且难以处理 XML Namespaces。出现了几种新的 XML 模式语言以取代或者增强 DTD，其中包括 RELAX NG，以其简单性和表达能力而闻名。RELAX NG 的核心规范定义了架构的 XML 语法，此外 RELAX NG Compact Syntax [OASIS 委员会规范]还为 RELAX NG 架构定义了一种简单的文本语法。人们期望这种文本语法作为补充添加到 ISO 标准中。RELAX NG 是称为 Document Schema Definition Languages（文档模式定义语言，DSDL）的整个 ISO XML 模式处理系统的研究工作的一部分。

推荐的入门参考和教程

  • 阅读 Nicholas Chase 的入门教程“ 理解 RELAX NG”，它可以帮助您迅速领略 RELAX NG 的简单性和强大功能，包括它的完全基于 XML 的语法和紧凑语法（ developerWorks，2003 年 12 月）。
  • David Mertz 在 developerWorks 上的“XML 问题”专栏，在其系列文章“使用 RELAX NG 反击”中专门讨论了 RELAX NG：
    • 第 1 部分考察了 RELAX NG 的一般语法，并涉及到数据类型化（2003 年 3 月）。
    • 第 2 部分通过解决几个附加的语义问题继续前面的讨论，并考察了可以使用 RELAX NG 的工具（2003 年 3 月）。
    • 第 3 部分详细探讨了 RELAX NG 紧凑语法，并揭示了紧凑语法和 XML 语法之间的完全对应关系（2003 年 5 月）。
  • RELAX NG 的正式教程 核心和它的 紧凑语法。
  • ZVON 提供了一个混合教程 RELAX NG and W3C XML Schema language（本系列文章将讨论）。

参考资料和其他资源





回页首


W3C XML Schema

XML Schema Part 1: Structures 和 XML Schema Part 2: Datatypes[W3C 推荐标准]定义了另一种 XML 模式语言。 第一部分用于约束文档的结构，第二部分则用于约束简单元素和属性的内容。W3C XML Schema (WXS) 由于过于复杂和表达能力不足而受到了批评，结果造成与其他语言如 RELAX NG 的竞争。逐渐地，人们开始仅仅使用最适合自身的模式语言，而根据需要求助于转换工具从一种形式转化成另一种形式，这类工具的大量涌现给人留下了深刻的印 象。许多其他的规范已经采用了 WXS DataTypes 规范，尽管也有开发其他数据类型系统的呼声。工作组已经开始 WXS 1.1 的研发工作。

推荐的入门参考和教程

  • Nicholas Chase 的 developerWorks教程“ 验证 XML”同时涉及到 DTD 和 WXS（2003 年 8 月）。
  • W3Schools 有一个 WXS 教程.
  • W3C XML Schema 工作组在 XML Schema Part 0: Primer中对这种技术作了透彻而浅显的介绍。

参考资料和其他资源





回页首


Schematron

Schematron Assertion Language 1.5 [社 区标准和草案 ISO 标准]是一种模式语言，使用了不同于 DTD、RELAX NG 和 WXS 的方法。在 Schematron 中，您需要对要检查的 XML 文档登记一组规则，而不是绘制出试图表达的 XML 格式从根节点到叶子的整个树结构。这就使得 Schematron 不仅可以作为一种独立的、非常有用的模式语言，也可以作为其他模式语言的补充。Schematron 可以表达我所讨论的其他语言所不能表达的约束，因此经常与其他语言协同使用。

推荐的入门参考和教程

参考资料与其他资源





回页首


后续内容

本文中综述了最重要的核心 XML 标准。在第 2 部分，我将介绍对于在应用程序处理中使用 XML 的人而言非常重要的标准。


回页首


参考资料





回页首


关于作者

Uche Ogbuji 的照片

Uche Ogbuji 是 Fourthought Inc.的顾问和共同创始人，该公司是专为企业知识管理提供 XML 解决方案的软件供应商和咨询公司。 Fourthought 开发了 4Suite，这是一个用于 XML、RDF 和知识管理应用程序的开放源代码平台。Ogbuji 先生是一位出生于尼日利亚的计算机工程师和作家，他现在美国科罗拉多州的博耳德生活和工作。可以通过 uche.ogbuji@fourthought.com 和 Ogbuji 先生联系。



Vincent Chen 2006-03-18 21:27 发表评论
]]>XML 观察: 追溯 RDF 数据的源头::RDF 工具正逐渐成熟起来http://www.blogjava.net/Vencent/articles/35984.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 13:26:00 GMThttp://www.blogjava.net/Vencent/articles/35984.htmlhttp://www.blogjava.net/Vencent/comments/35984.htmlhttp://www.blogjava.net/Vencent/articles/35984.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35984.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35984.html级别: 中级

Edd Dumbill, 编辑兼发行人, xmlhack.com

2003 年 3 月 01 日

当 您开始聚集来自 Web 的数据时，了解其来源是至关重要的。本文中，Edd Dumbill 研究了 Redland 资源描述格式（Resource Description Format，RDF）应用程序框架的上下文特性并创建了作为演示的一个 RDF Site Summary（RSS）1.0 聚集器。

一年前，我为 developerWorks写了两篇有关 朋友的朋友（Friend-of-a-Friend，FOAF）项目的文章。FOAF 是一种 XML/RDF 词汇表，用于以计算机可读的形式描述您通常可以放在主 Web 页上的某种个人信息，如您的姓名、即时信使昵称和工作地点等。

在我有关 FOAF 的第二篇文章（请参阅 参考资料）的清单 6 中，我演示了 FOAFbot，一个我编写的聚集人们的 FOAF 文件并回答相关问题的社区支持代理。FOAFbot 能够记录谁说了关于谁的什么事情。当问及我叫什么名字时，FOAFbot 答道： 

												
														
edd@xml.com's name is 'Edd Dumbill',
according to Dave Beckett, Edd Dumbill,
Jo Walsh, Kip Hampton, Matt Biddulph,
Dan Brickley, and anonymous source Anon47

FOAFbot 背后的思想是，如果您能够验证不同的几个人（您所信任的人）都记录了一个事实，那么您很可能相信这是真实的。

以 下是追溯这样的元数据源头的另一个运用。搜索引擎在其早期历史中被滥用的一个主要表现是恶意元标记（meta tag spamming）。网站会把错误的元数据放到它们的页面中以提高它们的搜索引擎排名。由此，搜索引擎不再关注元标记，因为它们极有可能提供虚假信息。事 实上，象 Google 这样的搜索引擎找到了其它更高级的度量来评定页面关联性。

展望 Web 的未来，避免诸如恶意元标记这样的滥用将变得至关重要。Tim Berners-Lee 对 Semantic Web 的展望（请参阅 参考资料）是希望出现这样一个 Web：其上大多数的数据都是机器可读的，从而使得目前由人类完成的大多数信息处理自动进行。

元数据滥用在 Semantic Web 上可能造成的麻烦甚至更大：网站不再限于仅仅造自己站点的假。它还可以造其它站点的假。例如，一家书店对竞争者的报价作假，这是有可能的。

我不会探究各种安全性和可信机制（这些机制将防止这种语义的破坏行为）的细节，而是将重点讨论这样的机制之所以成为可能的基础： 追溯源头。

存储 RDF

处理 RDF 然后存储它的应用程序使用 三元组存储（triple store）来做到这一点。RDF/XML 输入文档被分解成一列包含 主语、谓语和宾语 的三元组。然后后续处理就是操作和查询存储中的三元组。只有在涉及到交换时，才会用 RDF 的 XML 语法。由于将数据直接分解成三元组，所以 XML 工具（象 XPath 或 XQuery）就没有多少用处了。已经有人编写了直接使用 XQuery 操作 XML 语法的 RDF 处理工具，但我认为对于通用的 RDF 处理，这多少有点多此一举。

为了进行演示，我将向您展示如何将简单的 RSS 1.0 文档用作测试数据。最近我建立了一个 weblog 站点，其中，我对不知情的公众强加了我的观点。为了将我涂鸦式的元数据放在一起，我生成了一个 RSS 1.0 文件（请参阅 参考资料获取链接）。该文件的开始部分类似于清单 1，曾接触过 RSS 的任何人应该对它非常熟悉。


清单 1. 摘自 RSS 1.0 文件的开始部分 
												<rdf:RDF
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns="http://purl.org/rss/1.0/"
>
  <channel rdf:about="http://usefulinc.com/edd/blog">
    <title>Edd Dumbill's Weblog: Behind the Times</title>

    <description>
      Thoughts and comment from Edd Dumbill, technology writer
      and free software hacker.
    </description>
    <link>http://usefulinc.com/edd/blog</link>

在 RDF 处理器将这一部分解析成三元组时，我获得了清单 2 中显示的数据。


清单 2. 与清单 1 的开始部分对应的 RDF 三元组 
												[http://usefulinc.com/edd/blog,
    http://www.w3.org/1999/02/22-rdf-syntax-ns#type,
    http://purl.org/rss/1.0/channel]
[http://usefulinc.com/edd/blog,
    http://purl.org/rss/1.0/title,
    "Edd Dumbill's Weblog: Behind the Times"]
[http://usefulinc.com/edd/blog,
    http://purl.org/rss/1.0/description,
    "Thoughts and comment from Edd Dumbill,
     technology writer and free software hacker."]
[http://usefulinc.com/edd/blog,
    http://purl.org/rss/1.0/link,
    "http://usefulinc.com/edd/blog"]

随后 RDF 应用程序所要操作的就是 清单 2中显示的这列三元组了。至此，一切都很顺利。但在存储这个数据时，您会丢失一些重要信息的线索，即数据的出处和其它相关数据，如我是何时对数据拍了快照。要记录这个信息，我需要通过一些方式使该信息与我所找到的 RDF 语句相关联。

首先，对于 清单 2中的数据，我需要模拟出一个描述，记录下对于这些数据我可能要说的内容。清单 3 就包含了这样一个示例描述，它使用了专为这一目的而虚构出的一个示例名称空间。


清单 3. 检索清单 1 和清单 2 中数据的示例描述 
												<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:me="http://example.org/ns/mymeta#">

<rdf:Description rdf:about="http://example.org/retrieval/52365">
    <me:origin rdf:resource="http://usefulinc.com/edd/blog/rss" />
    <me:retrieved>2003-06-24T08:59:55.00Z</me:retrieved>
</rdf:Description>
</rdf:RDF>

您可以从 清单 3中看出：我已经（任意）虚构了一个 URI 来表示对一个文件进行的第 52365 次检索。这似乎是一个合理的方法，如同任何对远程资源的每次轮询所命名的那样。这个资源的出处是这个 RSS 1.0 文件的 URI，而时间戳记表明何时找到它的。

现在，剩下的就是存储四元组，而不是存储三元组。清单 4 展示了我如何修改 清单 2以显示我现在添加到存储中的所有数据。


清单 4. 增加了上下文 URI 和上下文元数据的三元组 
												[http://usefulinc.com/edd/blog,
    http://www.w3.org/1999/02/22-rdf-syntax-ns#type,
    http://purl.org/rss/1.0/channel,
    http://example.org/retrieval/52365]
[http://usefulinc.com/edd/blog,
    http://purl.org/rss/1.0/title,
    "Edd Dumbill's Weblog: Behind the Times",
    http://example.org/retrieval/52365]
[http://usefulinc.com/edd/blog,
    http://purl.org/rss/1.0/description,
    "Thoughts and comment from Edd Dumbill,
     technology writer and free software hacker.",
    http://example.org/retrieval/52365]
[http://usefulinc.com/edd/blog,
    http://purl.org/rss/1.0/link,
    "http://usefulinc.com/edd/blog",
    http://example.org/retrieval/52365]
[http://example.org/retrieval/52365,
    http://example.org/ns/mymeta#origin,
    http://usefulinc.com/edd/blog/rss,
    <NULL>]
[http://example.org/retrieval/52365,
    http://example.org/ns/mymeta#retrieved,
    "2003-06-24T08:59:55.00Z",
    <NULL>]

清单 4中演示的思想是每个 RDF 语句都增加了一个 URI，它将该 RDF 语句链接到我想要存储的有关该 RDF 语句的元数据上。这个简单机制给我带来了无穷的力量。除了使我能够检索有关该 RSS 文件的元数据以外，它还提供了从存储中除去该信息的便利方法。





回页首


实际实现

在运用这个思想时，我已将上面四元组的第四个元素称为 上下文。这个术语并不规范，但它对我而言非常有效。而且，Redland RDF 应用程序框架中也使用了这个术语，我将使用该框架来演示这个追溯源头的应用程序。

（顺 便提一下，我要对 Dave Beckett（Redland 的创建者）表示感谢。在我去年编写 FOAFbot 时，Redland 不支持上下文，所以我最终只能以一种非常繁冗的格式来实现上下文。Dave 回应了我的请求，他将上下文的支持添加到了他的工具箱中。）

Redland 是一个基于 C 的工具箱，带有许多语言绑定，包括 Python、Perl 和 Java。它由一个 RDF 解析器、raptor 和一个数据存储组成。该存储目前使用 Berkeley DB 文件，不过还在开发对底层 SQL 存储的支持。对于我的示例而言，我将使用到 Redland 的 Python 绑定。

这里的目标是要创建一个简单的 RSS 1.0 聚集器。使用聚集器的目的是对多个 RSS 馈送进行重复拍快照，并允许您以有趣的方式组合它们。随着新内容项的加入，RSS 文件会随着时间的变化而发生更改 － 我想避免多个冗余项，而仍能保留历史项。在本文后面，我将开发所需的一些功能。

您将在 参考资料中找到一个到这个项目的 Python 代码（fraggle.tar.gz）的链接。还有一个到 Redland 工具箱的链接，您也需要安装这个工具箱。

Aggregator 类会处理访存和存储 RDF 数据这个有趣的工作。清单 5 摘自这个类的 load_uri 方法，它从 aggregate.py 的第 189 行开始。


清单 5. 追溯检索到的 RDF 的上下文 
												stream = self._parser.parse_as_stream(
        RDF.Uri(string="file:./%s" % fname),
        base_uri=urinode.uri)
if stream:
    channel = None

context = self.context_uri_node()
    timestamp = RDF.Node(literal=
        time.strftime("%Y-%m-%dT%H:%M:%S.00Z"))
    while not stream.end():
        statement = stream.current()
        # add the statement to the model, with context

self._model.add_statement(statement, context)

        # if it's a <rss:channel> remember the URI
        if ( statement.predicate == _rdfType and
            statement.object == _rssChannel ):
            channel = RDF.Node(node=statement.subject)

        # move on
        stream.next()

	# now to add the context information
	# first, the source URI

self._model.add_statement(RDF.Statement(
	subject=context, predicate=_fraggieSource,
	object=urinode), _globalContext)
	# second, the channel URI

self._model.add_statement(RDF.Statement(
	subject=context, predicate=_fraggieChannel,
	object=channel), _globalContext)
	# third, the timestamp

self._model.add_statement(RDF.Statement(
	subject=context, predicate=_fraggieTimestamp,
	object=timestamp), _globalContext)
	# fourth, the checksum

self._model.add_statement(RDF.Statement(
	subject=context, predicate=_fraggieChecksum,
	object=RDF.Node(literal=checksum)), _globalContext)
	self.register_fetch(urinode, context)

该清单中用粗体显示的几行与追溯上下文有关。首先，使用 context_uri_node() 生成上下文的 URI。这返回形式为 http://usefulinc.com/fraggie/global/1 的 URI 结果。这个上下文然后被追加到在检索到的 RSS 中找到的每个语句中。一旦存储了 RSS 数据，我随后就将有关上下文 URI 的数据添加到存储中。在本例中，我存储了作为 RSS 文件来源的 URI、RSS 通道本身的 URI（ rss:channel 元素中的 rdf:about 值）、访存文件的时间以及文件的 MD5 校验和（以便以后确定 RSS 文件是否随时间变化而发生了更改）。

如果您下载了源代码，那么正如您将看到的， Aggregator 类的其余部分实现了两个功能：第一个是 RSS 搜索所需的内务处理方法；第二个向聚集器的询问者提供了查询方法。请注意，所有的内务处理变量（如 fetch 计数）都是用 RDF 表示的，并且保存在 RDF 存储中。清单 6 展示了将计数变量表示为 RDF/XML 语句。


清单 6. 用 RDF 表示的内部计数器 
												<rdf:Description
    rdf:about="http://usefulinc.com/fraggie/counter"
    rdf:value="0" />

我发现在 RDF 存储中持久地保存任何拥有全局作用域的变量是很有意义的。这种方法的一个直接优点是它在多次调用后仍能保持状态。

该演示归档文件包括两个您可以运行的示例 RSS 文件。使用 python fraggle.py 可以调用该演示。该演示首先使聚集器装入这两个示例 RSS 文件，它们都引用了 Mark Pilgrim 最近在 XML.com 上发表的一篇文章。这个练习的目的是找到谁对这篇文章作了什么评价。运行该演示产生的输出如清单 7 所示（为可读性起见，已对一些输出行重新进行了格式处理）。


清单 7. fraggle.py 的输出 
												Links to http://www.xml.com/pub/a/2003/07/02/dive.html

From : Meerkat: An Open Wire Service: XML.com
       <http://meerkat.oreillynet.com/>
Time : 2003-07-05T15:39:26.00Z
Title: The Vanishing Image: XHTML 2 Migration Issues
Desc :  In Mark Pilgrim's latest Dive Into XML column,
       Pilgrim examines XHTML 2.0 <tt>object</tt>
       element, which is a replacement for the more
       familiar and widely supported <tt>img</tt>.

From : paranoidfish.org/links
       <http://www.paranoidfish.org/links/>
Time : 2003-07-05T15:39:25.00Z
Title: XML.com: The Vanishing Image: XHTML 2 Migration
       Issues [Jul. 02, 2003]
Desc : using <object> as a replacement for <img>
       is not a safe bet right now

摘自 XML.com 的第一部分展示了对这篇文章的正式描述。第二部分摘录展示了由 paranoidfish.org 网站所有者提供的摘要。

如果您研究过 fraggle.py 的源代码，那么将明白所有查询都围绕上下文进行。首先，会询问聚集器哪些上下文提到了这篇文章的 URI。然后根据上下文请求文章元数据并建立索引。请注意，上下文在时间上对应于一个馈送的快照。如果我的示例随时间变化要获得更多 RSS 文件的快照，那么您可能会看到有几项都是来自同一来源的 － 可能在描述上稍作了更改（人们常常会随时修正拼写错误）。对 fraggle.py 中查询的一个明显改进是根据源进行分组，而不是单单根据时间顺序进行显示。

尽 管从浏览、自我冲浪（ego-surfing）的角度而言，weblog 和其它因特网站点的 RSS 馈送很有趣，但我认为象这样一个项目的真正价值很有可能体现在企业中。许多组织常常会生成大量以时间为序的数据流。举一个简单的示例，URI 分配给了客户或项目，然后就可以生成并聚集活动的 RSS 流。

然后可以很轻松的为那些对这样的聚集数据感兴趣 的任何人划分和切割这些数据。例如，管理者可能希望知道每个工人在做什么，项目经理可能希望获得最近的三个状态更新，更高级的管理层可能希望获得整个部门 的快照视图，等等。不难想象，这种工具很可能会在客户关系管理（CRM）这一领域中产生最佳收益。


回页首


结束语

本文中演示的简单示例只触及了追溯 RDF 源头的皮毛。在 Web 上，信息来自哪里与信息本身同样重要。源头追溯的 RDF 工具刚开始兴起，当它们的使用变得更广泛时，它们的能力无疑会更加完善。

毫无疑问，Redland RDF 应用程序框架是一个值得进一步研究的工具箱。它具有到您最喜爱的脚本编制语言的接口；它运行在 UNIX、Windows 和 Mac OS X 上；而且它是一个开放源码项目，所以您所做的任何改进会使整个社区受益。


回页首


参考资料





回页首


关于作者


Edd Dumbill 是 XML.com的执行编辑以及 XML 开发人员新闻站点 XMLhack的编辑和发行人。他是 O'Reilly 的 Programming Web Services with XML-RPC一书的合著者，以及 Pharmalicensing生命科学知识产权交易事务所的共同创始人和顾问。Edd 还是 每年一度的 XML 欧洲大会的议程主席。您可以通过 edd@xml.com与 Edd 联系。



Vincent Chen 2006-03-18 21:26 发表评论
]]>XML 标准概览: 第 4 部分:主要 XML 标准的详细交叉引用http://www.blogjava.net/Vencent/articles/35982.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 13:12:00 GMThttp://www.blogjava.net/Vencent/articles/35982.htmlhttp://www.blogjava.net/Vencent/comments/35982.htmlhttp://www.blogjava.net/Vencent/articles/35982.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35982.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35982.html阅读全文

Vincent Chen 2006-03-18 21:12 发表评论
]]>XQuery 简介：W3C 的 XML 查询语言提议标准一瞥http://www.blogjava.net/Vencent/articles/35980.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 13:11:00 GMThttp://www.blogjava.net/Vencent/articles/35980.htmlhttp://www.blogjava.net/Vencent/comments/35980.htmlhttp://www.blogjava.net/Vencent/articles/35980.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35980.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35980.html级别: 初级

Howard Katz, 所有者, Fatdog Software

2001 年 6 月 01 日
2006 年 2 月 06 日 更新

Howard Katz 介绍了 W3C XQuery 规范，该规范目前正在努力成为推荐标准。这个复杂的规范目前包含 15 个不同的工作草案，而且在最终完成之前可能还会增加。本文提供了该规范的一些历史背景、形成文档的路线图和规范当前状态的简单介绍。侧栏简要描述了 XQuery 表层语法的一些主要特性。通过示例代码示范了 XQuery 和 XQueryX 之间的区别，并给出了关于表层语法的例子。

注意：本文在 2005 年 12 月经过修正，结合了 XQuery 规范的最新变动情况：其中八个工作草案已进入 “W3C 候选推荐标准” 状态，整个规范距离最终成为 “推荐标准” 更近了一步。主要的全文文档最初发表于 2004 年，最近经过了修改。关于更新设施的 “需求工作草案（Requirements Working Draft）” 和建立 XPath/XQuery 词法分析器（tokenizer）的草案都是 2005 年第一次发布的。XQuery 特性的数量继续增长，XQuery 实现者列表和 Web 上的开发人员资源也在不断增加。

沿着成为 W3C 推荐标准的道路走了漫长的六年之后，XQuery 规范颇具好莱坞大片的神秘和不朽色彩，就像 “星球大战” 和 “指环王” 系列一样。XQuery 起源于 1998 年由 W3C 发起的查询语言研讨会，来自工业界、学术界和研究团体的代表聚集到波士顿，提出了 XML 查询语言中他们认为重要的特性和需求。

两个不同的阵营

那些对历史感兴趣的人可以在线获取这 66 篇演讲稿（参阅 参考资料），它们主要来自两大不同的阵营：那些将 XML 主要作为文档 使用的人（在很大程度上反映了 XML 起源于 SGML）和将 XML 作为数据 使用的人 —— 后者很大程度上反映了 XML 在中间件领域、前端传统关系数据库领域中不断增长的现状。

尤 其是俄勒冈州研究生院的 David Maier的演讲稿 “Database Desiderata for an XML Query Language”，它非常简明扼要，非常有助于了解 Query Language Working Group（查询语言工作组）的思想，后者是在波士顿讨论会之后不久特许成立的。

虽然成员时增时减，但按照 W3C 的标准，这个工作组很庞大（据说只有 Protocol Working Group（协议工作组）的成员比它多）。它由 30 多个成员公司构成，反映了数据和文档这两大阵营各自的观点。现在合并而成的最终形式（经过了漫长的时间）是一种 XML 查询语言标准， 能够代表这两个团体的需求和观点。

对于 XML 用户来说，最熟悉的 XQuery 关键组件是 XPath，它本身也是一个 W3C 规范。单独的 XPath 位置路径本身（“//book/editor” 意味着 “在当前数据集中查找所有图书编辑”）就是完全有效的 XQuery。在数据方面，XQuery 具有类似于 SQL 的外观和能力，这是来自关系数据库世界的用户所欢迎和熟悉的。


回页首


卑微的出身

XQuery 最初称为 Quilt。Quilt 最初作为用户级语法的测试工具，是工作组中三个勤奋而又眼光远大的成员创立的：Jonathan Robie、Don Chamberlin 和 Daniela Florescu。在定义需求、用例以及底层数据模型和代数方面，Quilt 都建立在整个工作组的协同努力的基础上。

Robie、Chamberlin 和 Florescu 指出了一些语言对 Quilt 设计的影响，包括 XQL、XML-QL 和 SQL。如果对计算机语言的演化感兴趣，请阅读 “XML Query Language: Experiences and Exemplars”（参阅 参考资料），这篇意义重大的论文对前两种语言以及另外两种语言 YaTL 和 Lorel 进行了很好的比较。作者 Mary Fernandez、Jerome Simeon 和 Phil Wadler 本身都是该工作组的成员。

既然数据和文档团体持有如此不同的的观点，以及工作组所建立的基础的可靠性，这个庞大的规范需要如此长的时间才向大众公布也就不足为奇了。W3C 工作组的内部进展是严格保密的，并且在 2001 年 2 月中旬以前，查询语言工作组的大多数工作都是秘密进行的。

很 早就发布了 Requirements 文档和 Data Model 工作草案，但是直到 2001 年 2 月，工作组的发布工作才得以进入高潮，那时大量的文档开始出现。此后在 2001 年进行了两次重要更新，以后每年都有三四次更新，只有 2004 年例外，工作组只发布了一次更新。

今年新增加了更新机制的需求文档，再加上为 XQuery 语言实现者提供的关于建立词法分析器的简短说明，文档总数达到了 16 个（包括由于某种我不清楚的原因也放在 XML Query 网站上的 XSLT 规范），不用很长时间就会组成一套完整的文档集。肯定会在某个时候出现一种更新语言文档。


回页首


新生的发布王国

完全用于描述和定义 XQuery 的文档目前包括：

XML Query Requirements
工作组的主要规划文档。XQuery 需求列表。
XML Query Use Cases
一些实际场景和解决特定问题的 XQuery 片段。
XQuery 1.0: An XML Query Language
核心文档，介绍语言本身，以及对大多数其他内容的概述。
XQuery 1.0 and XPath 2.0 Data Model
XML 信息集的扩展。描述查询实现必须理解的数据项和形式语义的基础。
XQuery 1.0 and XPath 2.0 Formal Semantics
从形式上定义语言的底层代数。
XML Syntax for XQuery 1.0 (XQueryX)
为喜欢使用 XML 的人（主要是计算机）提供的另一种语法。
XQuery 1.0 and XPath 2.0 Functions and Operators Version 1.0
XML Schema 数据类型、 XML 节点及其序列的大约 225 个函数和操作符。
XML Path Language (XPath) 2.0
单独分离出来的 XPath 文档。
XPath Requirements Version 2.0
XPath 的需求文档。
XSLT 2.0 and XQuery 1.0 Serialization
对从 XQuery 1.0 和 XPath 2.0 Data Model 输出序列化尖括号 有关的 XML 问题的考察。序列化本质上 不是主语言规范的一部分。
XML Query and XPath Full-Text Requirements
描述 Full-Text Recommendation 需要达到的功能需求。
XML Query and XPath Full-Text Use Cases
Full-Text 规范应该能够处理的实际场景。
XQuery 1.0 and XPath 2.0 Full-Text
主 full-text 文档，详细描述严格意义上的 XQuery 的全文扩展语言。
XQuery Update Facility Requirements
XQuery 要求的能够对已有文档写入新数据以及对文档进行查询的功能。
Building a Tokenizer for XPath or XQuery
工作草案注释文件，选择了主 XQuery 1.0 文档中的一些语法资料进行解释。只对语言的实现者有意义。

这些文档（参阅 参考资料） 代表了大量工作。“XQuery 1.0: An XML Query Language” 是其中的关键，但其他文档也为 XQuery 成为良好的规范和全面支持的语言作出了贡献。据我所知，这是出自 W3C 的最复杂的一套规范（虽然 XML Schema 或许可与之相比，但那又是另一回事了）。

如果您对如此之多的文档感到惊讶和不知道从何处着手，我可以推荐两种方法。可以从核心的 XQuery 1.0 文档开始。它有一个很好的介绍性概述，详细介绍了该语言的很多特性。另一种方法是从选择一个 Use Cases 工作草案开始。该文档列举了 XQuery 能够发挥作用的一些实际场景。每个用例都针对特定的应用领域，并列出了用于该领域示例数据的一些 XQuery 代码。如果希望看到实际语法的具体例子，这些代码片段是非常有价值的。第三种方法是研究 Functions and Operators 工作草案中列出的很多内置函数，但采用这种方法最好对语言要有基本的理解。

最近几年关于这个领域出现了两本很好的图书，阐释 了该规范的各种细节，都是 Addison-Wesley 出版的：“XQuery from the Experts” 收集了来自该工作组成员的一些关于 XQuery 的技术文章，而 “XQuery: The XML Query Language” 则是 Microsoft 的 Michael Brundage 撰写的必读参考书（参阅 参考资料）。


回页首


BabelFish，您在哪儿？

XQuery 实际上是三种语言合为一体：

  • 表层语法是其中最容易看到的语言，也是用户最可能接触到的。从很多方面来说，这个语言版本就是 XQuery。（参阅侧栏 语法：一个简单的例子 中关于表层语法的例子。）
  • 一种基于 XML 的替代语法用另一种更便于机器处理的语言代替了表层语言。（参阅本文后面的 XQueryX。）
  • 形式代数语言详细描述了 XQuery 处理程序的内部工作机制。


回页首


底层的形式主义

Data Model and Formal Semantics（数据模型和形式语义）工作草案共同为 XQuery 提供了精确的理论基础。这两个文档详细介绍了查询代数，这是用形式术语定义的一组精确定义，它定义了 XQuery 查询期望操作的核心实体以及各种语言操作符怎样使用那些操作数的公式。除非是查询引擎的实现者、有充足的经费保障或者单纯喜欢复杂的形式系统，否则不会对它感兴趣。

提供了一个让实现者能够将表面语法特性直接重新造型为底层代数的映射。正如一些厂商在 XML 商业展示会上所展示的那样，可以实现实际上与代数直接沟通的查询处理程序（虽然我认为这更多的是概念证明性的）。参考资料 中有一个链接指向其中一个基于代数的引擎的在线演示版本。

代数还提供了详细描述如何将复杂表达式优化及转变成更简单的等价形式的规则。我只能说（我不是语言学家，并且形式语义文档读起来并不轻松），它们都是好东西。特别是大型数据库供应商会赞赏一种从头开始设计并且经过优化而高效的查询语言结构。

代数还提供了附加类型信息的位置。XQuery 是强类型的：如果数据有相关的 XML Schema，处理程序就可以按照模式进行验证、并为查询引擎提供文档中节点数据类型的后模式验证信息集（PSVI）信 息，同时利用 “XML Schema Part 2: Datatypes” 中声明的类型和自定义的用户定义类型。代数同时具有静态和动态类型检查能力。比方说，引擎可以使用 PSVI 派生的类型信息在编译时静态地检查查询表达式的数据类型（分析查询的语法正确性时）。在这个周期中尽早地确定类型无效的查询，这样能够大大减少对大型数据 集进行很可能是昂贵的（和无结果的）搜索的需要。XQuery 规范中涉及到语言的语法和语义的大部分工作都与类型有关。


回页首


迁移到 XPath 2.0

XQuery 和 XPath 2.0 具有同样的公共数据模型，有点奇怪的数据模型文档标题也反映了这一点：“XQuery 1.0 and XPath 2.0 Data Model”（这也是工作组开始使用缩写词 XDM 表示数据模型的原因）。XPath 2.0 现在已经完全成熟。该数据模型描述了 XPath 处理程序所关心的 XML 文档中的核心信息，XPath step 操作的最终语法和语义基本上已经完成。全部规范为 Query Language 工作组和 XSL 工作组共同所有，这两个工作组需要对 XPath 2.0 的未来达成一致。不论在政治上还是在技术上，这常常会带来挑战。不过，即便取得一致意见的道路崎岖不平，这两个工作组看来并没有表现出有多么不协调（至少 在外人眼里如此）。

为了说明从 XPath 1.0 转移到 2.0 的意义，仅仅举一个例子：XPath 1.0 是基于集合的表达式语言。XPath 1.0 的 4 种数据类型之一，节点集，仅仅是集合而已。按照定义，集合是无序的并且不含重复成员。另一方面，XPath 2.0 却是以序列为基础的。相比而言，XPath 2.0 中节点的序列（毫不奇怪，相应地被称为节点序列）是有序的，并且允许重复。用行话来说，这些差异的分歧存在于许多问题中，工作组需要独立和协作找出这些问题来，以便使他们都能够与 XPath 2.0 协调一致。


回页首


我们现在在何处？

所有实质性的遗留问题都已经解决。组成 XQuery 的七个关键文档按 W3C 的说法成为了 “候选推荐标准”，这意味着，用正式的术语来说，XQuery 现在被认为 “是稳定的且合适于实现”。

按 照正式的 W3C 推荐标准工作流程，以上 Last Call 阶段中提出的所有问题都已得到响应，工作组现在正寻找工业厂商去实际验证 XQuery 的主要特性是可实现的。为此，实现者必须对工作组提供的测试套件运行其实现。那些在候选推荐标准阶段没有被两个或更多厂商实现的特性，就有可能被从规范中 删除。当前有风险的特性包括：

  • 静态类型化
  • 模块
  • 集合
  • 静态类型化
  • 普通的 XML 嵌入
  • 复制名称空间（Copy-namespace）声明


回页首


XQueryX

XQueryX 是一种替代表层语言的基于 XML 语法的规范，也是较早加入 XQuery 文档家族的文件之一。XQuery 需求中有一条指出多种语法是允许的，看来工作组似乎是在两面下注：一种格式必须方便人类读写，另一种则要求能够用 XML 表达。XQueryX 是工作组对后一种需求的答案。

基于 XML 的查询表是具备 XML 所有显而易见、众所周知的优点：很容易使用标准工具解析、生成和询问查询的内容。这样做可能很有用，比方说，如果正在进行源代码级的优化或转换，就可能需要方便地检查查询中是否具有特定语法结构的能力。XML 非常适合这类工作。

XQueryX 基本上是该语言的形式语法到 XML 的一对一映射。由于语法的复杂性，使得 XQueryX 非常 冗长，基本上无法阅读。所幸的是，该语言的目标受众 —— 机器 —— 不会对此抱怨。清单 1 和 2 提供了分别用标准 XQuery 语法和 XQueryX 语法表示的简单查询表达式。要注意像类固醇一样的膨胀因子。


清单 1. 标准语法表示的简单查询 
												
														
				<bib>
 {
  for $b in doc("http://bstore1.example.com/bib.xml")/bib/book
  where $b/publisher = "Addison-Wesley" and $b/@year > 1991
  return
    <book year="{ $b/@year }">
     { $b/title }
    </book>
 }
</bib>

清单 2 显示了等价的 XQueryX 查询。因为太长，省略了大约四分之三的篇幅。XQueryX 工作草案中的完整清单有 132 行之多：


清单 2. XQueryX 格式的查询（片段） 
												
														
				<?xml version="1.0"?>
<xqx:module xmlns:xqx="http://www.w3.org/2005/XQueryX" ... >
  <xqx:mainModule>
    <xqx:queryBody>
      <xqx:elementConstructor>
        <xqx:tagName>bib</xqx:tagName>
        <xqx:elementContent>
          <xqx:flworExpr>
            <xqx:forClause>
              <xqx:forClauseItem>
                <xqx:typedVariableBinding>
                  <xqx:varName>b</xqx:varName>
                </xqx:typedVariableBinding>
                <xqx:forExpr>
                  <xqx:pathExpr>
                    <xqx:argExpr>
                      <xqx:functionCallExpr>
                        <xqx:functionName>doc</xqx:functionName>
                        <xqx:arguments>
                          <xqx:stringConstantExpr>
                            <xqx:value>http://bstore1.example.com/bib.xml</xqx:value>
                          </xqx:stringConstantExpr>
                        </xqx:arguments>
                      </xqx:functionCallExpr>
                    </xqx:argExpr>
                    <xqx:stepExpr>
                      <xqx:xpathAxis>child</xqx:xpathAxis>
                      <xqx:nameTest>bib</xqx:nameTest>
                    </xqx:stepExpr>
                    <xqx:stepExpr>
                      <xqx:xpathAxis>child</xqx:xpathAxis>
                      <xqx:nameTest>book</xqx:nameTest>
                    </xqx:stepExpr>
                  </xqx:pathExpr>
                </xqx:forExpr>
              </xqx:forClauseItem>
            </xqx:forClause>
			...





回页首


准备就绪，然后该何去何从？

2001 年 6 月，就在第一次重要的发布迭代之后，在我第一次撰写关于已有 XQuery 实现的总结文章时，当时还只有两种实现：我自己很早的一种实现和 Microsoft 的实现。于是我给自己找了点乐子，开玩笑说比尔盖茨和我成了市场竞争中的赛马师。那个时代已经过去了，经过四年和发布了更多工作草案之后，那个玩笑已经过 时了。现在差不多有四五十种实现了，还有大量的相关产品和工具。

如果要寻找一个实现，最好的地方就是 XML Query 主页（参阅 参考资料）。这个列表更新很快，随着兴趣和动机不断增强，随着规范越来越接近推荐标准状态，我预料将会不断出现新的实现。


语法：一个简单的例子

让我们通过实际的例子快速看一下 XQuery 的一些特性。下面是一个非常简单的查询，操作 Use Cases 文档中的规范示例文件。该查询展示了 XQuery 投影（在数据集中选择与所定标准匹配的节点子集）和转换（生成与正被查询的文档不同的输出文档）的能力。XQuery 允许在一个查询中同时指定要搜寻的内容和输出格式。

清单 3 显示了查询操作的文档的片段：


清单 3. 查询操作的文档片段 
																				
																						

																						
       <bib>
          <book year="1994">
             <title>TCP/IP Illustrated</title>
             <author><last>Stevens</last><first>W.</first></author>
             <publisher>Addison-Wesley</publisher>
             <price>65.95</price>
          </book>
          <book year="1992">
             <title>Advanced Programming in the Unix environment</title>
             <author><last>Stevens</last><first>W.</first></author>
             <publisher>Addison-Wesley</publisher>
             <price>65.95</price>
          </book>
          <book year="2000">
             <title>Data on the Web</title>
             <author><last>Abiteboul</last><first>Serge</first></author>
             <author><last>Buneman</last><first>Peter</first></author>
             <author><last>Suciu</last><first>Dan</first></author>
          </book>
              ...
       </bib>

现在希望得到 清单 4 所示的输出文档（经过一点美化）：


清单 4. 输出文档 
																				
																						

																						
       <results>
          <book authorCount="1">
             <author>Stevens</author>
          </book>
          <book authorCount="1">
             <author>Stevens</author>
          </book>
          <book authorCount="3">
             <author>Abiteboul</author>
             <author>Buneman</author>
             <author>Suciu</author>
          </book> 
              ...
       </results>

下面就是查询本身。它的任务是扫描查询文档中的所有图书，生成上面所显示的结果文档：在输出的每个新建 <book> 标记中包含计算出的 authorCount 属性；并丢弃原始文档中其他大部分信息，只保留每位作者的姓。

（注意，我在这里使用了术语 “查询文档”（单数）。这是一种简化，XQuery 数据模型也能处理文档集合以及文档片段。）


清单 5. 扫描查询文档中所有图书的查询 
																				
																						

																						
   <results>
   {
      for $book in doc( "http://uri-for-book-dataset" )//book
      let $authors := $book/author
      return
         <book authorCount="{ count($authors) }">
         {
            for $author in $authors
            return
               <author>{ $author/last/text() }</author>
         }
         </book>
   }
   </results>

清单 5 中，使用 doc() 函数使查询指向要查找的 XML 文档。它返回 XQuery 和 XPath 数据模型（XDM）词汇表中的 文档节点。

剖析查询

下面是该查询的一些有趣特性：

for/let 表达式

该示例包含两个嵌套的 for 循环和一个 let。外层的 for 循环遍历扩展路径表达式 doc(...)//book 得到的每个节点，并将每个 <book> 节点分别放到名为 $book 的变量中。let 表达式选择每本书的所有 <author> 子节点，并放到名为 $authors 的变量中。$authors 变量保存节点序列，$book 和 $author 变量都包含一个节点。

请务必留意，这些变量不是赋值的 而是绑定的。差别细微但很重要：变量一旦绑定，它的值就不可更改。这可以防止在运行中对变量重新赋值而造成糟糕的负面影响。另一个潜在的好处是，（在某种程度上）可以在处理期间重排包含变量的行，从而允许智能引擎优化它们的查询。

for 和 let 表达式是 FLWOR（读作 flower）表达式的子组件。这个缩写词代表其五个主要的成分子句：for-let-while-order by-return。清单 6 中，FLWOR 表达式的形式语法为：


清单 6. 带有 for 和 let 子成分的 FLWOR 表达式 
																				
																						

																						
FLWORExpr ::= (ForClause | LetClause)+ WhereClause? "return" Expr

表明这是一个变化非常多的表达式类型，能够生成大量可能的查询实例。正如该生成所显示的那样，"return" 关键字后面的 Expr 项本身可以被另一个 FLWOR 表达式替代，因此，可以像不断加长的 LEGO 积木那样，将 FLWOR 表达式首尾相接，无限 地排成一行。能够用任何其他表达式类型替换 Expr 项，使 XQuery 具有可组合性 并给予它丰富的表达能力。XQuery 中有大量表达式类型，每一种可以插入需要更一般的 Expr 的地方。

一般来说，最终会有一个 return 语句结束 FLWOR 序列。在上面的例子中，增加的内部 return 是为了方便插入要输出的每个 <book> 的元素构造器。

元素构造器

这个查询包含三个元素构造器。通过将文字尖括号 XML 直接写入查询本身的正文中，在查询过程中动态生成元素 <results>、<book> 和 <author>。

在需要区分文字文本内容和元素构造器中需要计算的子表达式时，使用花括号（{ 和 }）。比方说，如果我们编写 清单 7 所示的文字表达式则不需要用花括号来分隔内部标记和外部标记。


清单 7. 用括号区分内部和外部标记的代码 
																				
																						

																						
   <authors>
       <author>
          ...

顺便提一句，花括号是在 2001 年 7 月修订表面语言语法时引入的。更早版本的语法不需要花括号。花括号是语言在成为推荐标准过程中不断修改和演化的一个好例子。

属性构造器

清单 8 中的代码显示了行内属性构造器的用法。count() 函数返回每本书中包含的 <author> 元素的个数。也要注意这里的花括号，用于将需要计算的表达式和周围的文字 XML 分开。在属性构造器中使用引号分隔属性值是规范演变过程中不断修改的另一个例子。


清单 8. 使用行内属性构造器 
																				
																						

																						
<book authorCount="{ count($authors) }" >

内置函数和运算符

count() 是内置函数的一个例子。“Functions and Operators” 草案列出了大约 12 类 225 种函数和运算符，用于构造和操作各种不同的数据类型，包括数字、字符串、布尔值、日期时间、qname、节点和序列。

清单 9 中的表达式通过 text() 运算符，使用从包围它的 <last> 元素中提取的姓氏来填充每个 <author> 元素的内容。如果直接使用 $author/last，将同时得到包围的标记，这不是本例所希望的情况。


清单 9. 使用内置运算符 text() 
																				
																						

																						
<author>{ $author/last/text() }</author>





回页首


参考资料

学习

获得产品和技术
  • Galax：Bell 实验室 Jerome Simeon 的基于形式语义的查询引擎演示。“形式语义” 是现在对 2001 年 6 月 7 日之前所说 “代数” 的正式称呼。

  • XQEngine：作者自己基于 Java 的开放源码查询引擎。现在有点落后了，因为至少目前作者放弃了跟踪规范的修改。

  • Mark Logic Content Server：（部分）领先的图书出版商都使用这个包。可以免费存储和查询 50 MB 的内容。

  • Berkeley DB XML：Sleepycat 的开放源码原生 XML 数据库，以令人尊敬的、高可伸缩性的 Berkeley DB 数据库引擎为基础。

  • IBM 的 DB2 Extender 页面 简要介绍了 DB2 如何处理 XML，包含查询 XML 白皮书的链接，可以查看 PDF 文件，或者去 DB2 Extender 下载。


回页首


关于作者


Howard Katz 生活在加拿大BC省的 Roberts Creek，他是 Fatdog Software 公司的所有者，该公司专门开发 XML 文档搜索软件。他是 XQEngine 的作者，这是一种基于 Java 的开放源码 XQuery 引擎。近 35 年来他一直是一位活跃的程序员（一直业绩良好），并长期为计算机行业刊物撰写技术文章。他曾为 Microsoft 撰写一个在线 Java 专栏，为 Apple 每月撰写一期关于面向对象编程的专栏文章。他曾任 “温哥华 XML 开发者协会” 的主持人。他和妻子夏天去海上划船，冬天去边远地区滑雪。您可以通过 howardk@fatdog.com 与 Howard 联系。


Vincent Chen 2006-03-18 21:11 发表评论
]]>XML 标准概览: 第 3 部分：最重要的词汇表http://www.blogjava.net/Vencent/articles/35981.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 13:11:00 GMThttp://www.blogjava.net/Vencent/articles/35981.htmlhttp://www.blogjava.net/Vencent/comments/35981.htmlhttp://www.blogjava.net/Vencent/articles/35981.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35981.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35981.html级别: 中级

Uche Ogbuji, 首席顾问, Fourthought, Inc.

2004 年 3 月 01 日

XML 世界非常庞大，而且还在不断成长，存在大量不同的标准以复杂的方式互相影响。新手很难确定哪些是 XML 最重要的方面，用户也难以跟踪这个领域出现的新生事物和变化。XML 是一种基本语法，可用于开发本地或全局的词汇表。XML 成功的关键就在于一些非常重要的数据格式定义成了 XML 词汇表。本文中，Uche Ogbuji 将介绍其中最重要的一些词汇表。

XML 变得越来越强大，得到了迅速的发展。它已经证明自己是一种非常有价值的技术，但可能也是一种令人害怕的技术，如果考虑到挂在“XML”一词下面不断变化的 各个部分。在这一组文章中，我将简述我认为最重要的 XML 技术，讨论它们如何在 XML 世界中更大的范围内彼此融合。为了进一步研究和学习以使用各种技术，我还推荐了一些教程和其他有用的参考资料。

这里介绍的所有技术都是 标准，尽管这个词本身就有点捉摸不定。标准有各种各样的形式，而且在同一个领域中常常有多种标准互相竞争。我按照实践的方法把标准定义为：被不同的供应商大量采用的或者有影响、独立于供应商的组织推荐的规范。

在 本系列的第一篇文章中主要讨论了核心 XML 技术。（关于各种标准开发团体的概述以及标准的分类请参阅 那篇文章中的侧栏。） 第二篇文章中 探讨了和开发人员处理 XML 有关的标准。本文中我将介绍最重要的一些 XML 应用（也称为词汇表，虽然不很准确）。和原来的 SGML 一样，XML 也是一种元语言，是定义其他语言的语法基础。这些语言（如 SGML 中的 HTML，XML 中的 XHTML）是 应用——不要与程序员编写的应用程序（软件应用）如 IBM DB2 混淆。

在第 4 部分，我将就以前所述的这些信息加以比较，提供一个方便的交叉索引。

XHTML

XHTML 1.0 [W3C 推荐标准]基本上是对 HTML 4 的改写，使其成为结构良好的 XML。HTML 是一种 SGML 应用，当 XML 作为对 SGML 在 Web 应用上的简化和规范化开发出来的时候，HTML（本身是 Web 上的 通用语言） 就成为采用 XML 的首选目标。于是出现了 HTML 的一种变体，称为 XHTML。XHTML 研究的目标是一种更容易解析（因为 XML 的语法更加严格）的 HTML 语言。XHTML 很容易用现成的 XML 工具处理，力求更好地分离内容与表示。XHTML 是最古老的 XML 应用之一，有许多利益集团在不同的部分和版本中起过作用。我将尽力对其中的大部分加以概括。

与三种HTML 4 DTD—— Strict、 Transitional和 Frameset对应，XHTML 1.0 定义了不同的 DTD 和名称空间。 Modularization of XHTML[W3C 推荐标准]提供了一个框架，把 XHTML 分解成单独的模块，作为不同的 DTD 定义。比如，用于定义列表的所有元素和属性组成一个模块，而和表示有关的元素类型则放在另一个模块中。这样，就可以通过增加、减少和修改通用的独立模块开 发和重新定义 XHTML。沿着这条路线，第一步就是 XHTML Basic[W3C 推荐标准]，它定义了任何作为 XHTML 的语言都必须具有的最小 XHTML 模块集。XHTML Basic 本身可以作为 Web 客户的内容语言，如移动电话、PDA、寻呼机和置顶盒。 XHTML 1.1[W3C 推荐标准]基本上就是使用模块框架分解的 XHTML 1.0 Strict DTD。

XHTML 2.0 [开发中]是对 XHTML 的重写，没有考虑与 HTML 的向后兼容。这种想法差不多就是为 Web 编写一种全新的内容语言，学习过去的经验而又不束缚于过去。其中大的变化有：

  • 取消了 <br/> 、 <img/> 以及其他认为过于面向表示的元素
  • 取消 HTML 风格的表单，改为支持 XForm（本系列文章 前已述及）
  • 取消 HTML 风格的链接改为 HLink（本系列文章中 前已述及）
  • 用 XML Event 代替许多 JavaScript 驱动的动态任务
  • 用 XFrame 代替 HTML 风格的框架

更重要的是，XHTML 2.0 做了许多扩展,增强了作者表达内容结构和含义的能力。打破向后兼容性引起了争议。一些评论者认为保持 (X)HTML 的名称只修改版本号会造成混乱。其他人则说这些修改非常必要，而 XHTML 实际上仍然是一种 可扩展超本文标记语言，因此保留原来的名称非常合适。

XHTML 常常和其他嵌入格式一起使用，如 MathML、RDF、SVG、SMIL 和 VoiceXML（后面都将予以介绍）。这种混合文档称为 多模的或者 非单体的。W3C、ISO 以及其他组织正投入巨大的努力鼓励对这种文档的强力支持。

推荐的入门参考和教程

  • Sathyan Munirathinam 的 “ XHTML：两种语言的力量”（ developerWorks，2002 年 7 月），以及 Molly Holzschlag 撰写的 “ XHTML 1.0: Marking up a new dawn”（ developerWorks，2000 年 10 月），提供了 XHTML 1.0 的简要介绍。
  • Nicholas Chase 的 “ Web 的未来：XHTML 2.0”（ developerWorks，2002 年 9 月）尽管写得比较早，仍然是关于 XHTML 2.0 所作修订的很好介绍。
  • 如果希望理解这种语言的构造块，教程 “ XHTML 的模块化”（Nicholas Chase， developerWorks，2001 年 10 月）非常有用。

参考资料和其他资源





回页首


Docbook

Docbook 原来是一种流行的 SGML 格式，用于编纂书籍和文档，尤其是带有较多技术特性的文档。后来增加了一个 XML 版本， DocBook XML V4.2[OASIS 委员会规范]是最新的成果。Docbook 非常流行，得到了许多工具的支持，其中很多工具非常成熟。它作为避免混合表示问题与内容格式的一个范例而受人尊敬。最近，一些开发人员开始抱怨它从过去的 版本继承了太多的负担，纷纷讨论（甚至包括它的主要开发者 Norm Walsh）为这种格式重新开发一种新的、不向后兼容的版本。

Text Encoding Initiative (TEI) 甚 至比 Docbook 更古老，这种文档格式在某种程度上与 Docbook 的应用范围类似，区别在于它通常处理的是人文学科的文本而非技术文本。TEI 本身不是一种 SGML 或 XML 应用，而是一组用于构造语言（DTD）的指导原则。最常用的 TEI 变体是 TEI Lite[社区标准]。TEI 以其复杂性驰名，这在一定程度上限制了它被大量采用，但是它得到了很好的维护，并在一些社区中有狂热的用户。

推荐的入门参考和教程

参考资料和其他资源

  • DocBook.org基本上是关于 Norman Walsh 所著 DocBook: The Definitive Guide（O'Reilly & Associates, 1999） 一书的站点。它把全书的内容都放在了网上，并作了很好的链接，这是关于 DocBook 各个方面的很好很详细的参考。
  • DocBook Wiki是关于这种语言的信息和讨论的协作空间。




回页首


XSL-FO

Extensible Stylesheet Language Formatting Objects (XSL-FO) [W3C 推荐标准]是一种使用 XML 定义的表示语言。（注意，链接规范的标题是 "Extensible Stylesheet Language (XSL)"，但内容事实上只包括 XSL 的格式化对象方面。）XSL-FO 是一种 XML 格式，可被任何用户代理用于按照开发人员给定的精确规范呈现内容。它的角色类似于 Web 用户界面中的 XHTML， 但是更加复杂，以便表达适用于打印形式的格式化细节。这些细节和级联样式表（CSS——本系列文章 前已述及）中所规定的没有什么不同，但是在 XSL-FO 中，这些细节构成了这种标记语言本身的一个实例，而不是呈现单个标记的指令。

XSL-FO 常用作 XSLT（本系列文章 前已述及）的输出格式。事实上，最初 XSLT 和 XSL-FO 是一个系统，称为 XSL，但是工作组明智地将这两个部分分成了两个不同的规范。有多种开放源代码的或者商业化的工具可以将 XSL-FO 转化成 TeX、Adobe 的 PDF以及其他适于打印和排版的（非 XML）输出格式。这种应用模式使 XSL-FO 非常流行，但是 XSL-FO 一直希望成为 WYSIWYG 工具或者类似工具的原生呈现格式，它的这种应用也开始受到推动。 XSL-FO 1.1[开发中]是这种语言的升级，增加了注释、索引、书签之类的特性，并增强了图像的处理能力。

推荐的入门参考和教程

  • Doug Tidwell 的教程 “ XSL 格式化对象（XSL-FO）基础知识”（ developerWorks，2003 年 2 月）是一个非常友好的起点。他的后续文章“ XSL-FO 高级技术”（ developerWorks，2003 年 2 月）介绍如何使用 XSL-FO 完成更加复杂的任务，如格式化数据、创建复杂的文档、把 HTML 元素转化成格式化对象然后再转化成 PDF 文档。最后，他的“ HTML 至格式化对象（FO）转换指南”（ developerWorks，2003 年 2 月）示范了如何使用 XSLT 模板把常用的 HTML 元素转化成格式化对象，以便更容易转换为 PDF。
  • Rodolfo M. Raya 的“ 使用 XSL-FO 创建可打印文档”（ developerWorks，2001 年 1 月）主要讨论将 XSL-FO 用于创建可打印的数据库报表。
  • J. David Eisenberg 的“ Using XSL Formatting Objects”是一篇简要的介绍，强调了 XSL-FO 强大的国际化支持。

参考资料和其他资源

  • ZVON 提供了一个 XSL FO 参考，勾勒了元素之间的一些关系，但是没有深入每种元素的语义。
  • Dave Pawson 的 XSL FAQ探讨了 XSL-FO 以及 XSLT 和 XPath。




回页首


SVG

Scalable Vector Graphics (SVG) 1.1 [W3C 推荐标准]是一种描述二维图像的语言。它主要是一种 向量图形语言，尽管也支持一些 光栅图 形特性。SVG 的非凡雄心是提供一种实用的、灵活的、使用（以冗长闻名的）XML 表示的图像格式，而且在这点上做的很成功。SVG 的特性包括：嵌套转换、剪辑路径、alpha 蒙板、光栅过滤效果、模板对象，当然还有可扩展性。SVG 也支持动画、缩放和移动视图、各种图形原语、分组、脚本、超链接、结构化元数据、CSS、一种专用的 DOM 超集（DOM 和 CSS 前已述及），并且很容易嵌入其他 XML 文档。SVG 的一些设计决策经历了不很激烈的争论，其中包括向量路径在单个属性中使用空格分隔的数字列表表示，但是总体上 SVG 已经成为应用最广泛的并受到热烈欢迎的一种 XML 应用。该规范已经被 翻译成了多种语言。

SVG 1.1 是对 SVG 1.0[W3C 推荐标准]的更新，增加了一些新特性，也包括一些更正。最大的区别是 SVG 1.1 以类似 XHTML 1.1+ 的方式进行了模块化。这种模块化使得 SVG 能够扩展甚至精简，就像 Mobile SVG Profiles: SVG Tiny and SVG Basic[W3C 推荐标准]那样。后者定义了 SVG 模块的精简集，适用于移动电话和 PDA。 SVG 1.2[开发中]致力于增加许多新工具，使 SVG 不仅作为一种图像格式，而且成为具有广泛应用前景的平台。

推荐的入门参考和教程

参考资料和其他资源

  • SVG Wiki，一个协作资源索引和讨论网页，是关于这种语言的各种信息的公共消息交换中心。
  • ZVON 的 SVG Reference提供了元素之间的关系图和一些例子。




回页首


VoiceXML

Voice Extensible Markup Language (VoiceXML) Version 2.0 [开发中]是一种创建音频、语音和电话应用程序的语言。它包含的音频对话框具有以下特点：语音合成、数字音频、声音识别和电话音质拨号输入和话音输入录制。它寻求把基于 Web 的开发和内容传递的优势带入 交互式语音响应应用程序中。VoiceXML 是 W3C Speech Interface Framework[开发中]的一部分，后者还包括其他的标准，由于这些标准与电话行业的界限非常模糊，这里就不讨论了。VoiceXML 2.0 标志着 VoiceXML 规范从 VoiceXML Forum转向 W3C，前者仍然在努力改进这种技术。关于 VoiceXML 已经有了 一些专利声明，其中一些意味着 VoiceXML 用户将面临版权和许可费的问题。

推荐的入门参考和教程

参考资料和其他资源





回页首


MathML

Mathematical Markup Language (MathML) 2.0 [W3C 推荐标准]是一种 XML 语言，按照该规范的说法，其目的是“促进数学和科学内容在 Web 上，以及其他应用程序如计算机代数系统、打印排版及语音合成中的使用和重用。MathML 可用于对能够高质量显示的数学符号表示编码，也可用于为语义起着更重要作用的应用程序对数学内容编码，如科学软件或语音合成。”MathML 常用于在教育、科学论文、工业规范、规章内容等领域中表示等式、公式或者类似的信息。这个版本对 MathML 1.01[W3C 推荐标准]增加了一些相对较新的特性。MathML 经常和 XHTML、SVG 以及其他应用一起使用。

推荐的入门参考和教程

参考资料和其他资源

  • ZVON 的 MathML 2 参考更类似一个索引，反映了元素之间的关系。




回页首


Synchronized Multimedia Integration Language (SMIL)

SMIL 2.0 [W3C 规范]，按照 W3C 的说法，“支持简单地编辑交互式[音频/视频]演示文稿。SMIL 通常用于[‘丰富媒体’或多媒体]演示文稿，其中集成了流式音频和视频、图像、文本或者任何其他媒体类型。SMIL是一种简单易学的类 HTML 语言，许多 SMIL 演示文稿都是使用简单的[文本编辑器]编写的。”SMIL 是 W3C Synchronized Multimedia activity的一个产品，已经升级到了 SMIL 1.0[W3C 推荐标准]，增加了和动画、元数据、内容控制、链接、定时与同步、事件处理、过渡效果等有关的特性。

推荐的入门参考和教程

参考资料和其他资源





回页首


RDF

差不多在 W3C 致力于以 XML 为代表的下一代标记技术的同时，它也开始了下一代 Web 资源形式化描述技术的研究。 Resource Description Framework (RDF)[W3C 推荐标准]是一种模型，用于描述一组 Web 资源声明。这些声明被概念化为 三元组，每一个都包含 主语（一个 URI——本系列文章 前已述及）、 谓词（也是一个 URI）和 对象（一个 URI 或字面数据值）。要理解这种声明的意义，可以想一想描述 Web 页面的 HTML meta 标签。如果套用在 RDF 上，主语就是 Web 页面本身的 URI，谓词是一个标准 URI 表示一般的描述，而对象就是描述的实际文本。通过大量使用 URI，RDF 希望尽量减少这些声明成分标识的歧义，从而更加形式化以便于机器处理。RDF 能否实现这一目标还存在争议，但是 RDF 以其非常活跃的社区和范围广泛的工具而知名。

RDF 是 W3C Semantic Web activity的支柱； Semantic Web是 Web 的一种视像，不仅仅是内容的表示，还包括内容的注释以帮助表达它的含义。比如，在 Semantic Web 中描述 Web 资源时，可以区分 "python"（一种蛇）和 "python"（一种计算机编程语言）这样的概念。RDF 标准化由大量规范组成，包括：

Web Ontology Language (OWL) [W3C 推荐标准]是 RDF 的一个应用，通常用 RDF/XML 编码，增加了丰富的词汇表可用于对 RDF 资源进行正式分类和归纳。

推荐的入门参考和教程

参考资料和其他资源





回页首


XML Topic Maps

Topic Maps [ISO 国际标准，编号 13250]提供了组织信息的一个系统，在某些方面是与 RDF 竞争的一种 Semantic Web 技术。具体而言， XML Topic Maps[ISO 13250 的一部分]是 Topic Maps 一种 Web 友好的版本，使用 XML 语法，并以 URI 作为标识符。与 RDF 相似，Topic Maps 定义了一种类似图的模型，但更细微的差别和这样一个事实有关，即 Topic Maps 的一个重要规定是实际概念与其计算机表示的区分。Topic Maps 的这种做法是 Semantic Web 的一种基本工具，还是增加了不必要的复杂性，在 Topic Maps 与 RDF 支持者之间的这种争论永远不会划上句号。XML Topic Maps 使用了一种非常清晰的 XML 语法，这种语法基于 XLink（本系列文章 前已述及）。

推荐的入门参考和教程

参考资料和其他资源





回页首


只是浅尝辄止

在本系列文章中，在有限的空间中选择哪些内容进行讨论让我煞费苦心。很多信息不可能包含进来，尤其是关于 XML 应用的这篇文章。XML 的一个优点同时也是祸根，它让每个人都可以很容易地定义自己的语言。目前存在的难以计数的词汇表都可以称为这种或那种形式的标准。在形形色色的目标之间， 我主要把目光放在那些最流行、采用最广泛的那些标准上。

您还可以找到关于正式商业文档交换的许多标准，要了解这些数不清的选择，您可以看看下面列出的 参考资料，既有私有的也有标准的。在我的 Thinking XML专栏 中也讨论了许多这样的标准。

下一篇文章是本系列的最后一篇文章，我将对讲述过的内容进行比较，并一一列出以便交叉参考。


回页首


参考资料





回页首


关于作者

Uche Ogbuji 的照片

Uche Ogbuji 是 Fourthought Inc.的顾问兼创始人，该公司是专为企业知识管理提供 XML 解决方案的软件供应商和咨询公司。 Fourthought 开发了 4Suite，这是一个用于 XML、RDF 和知识管理应用程序的开放源代码平台。Ogbuji 先生是 VersaRDF 查询语言的首席开发人员。他是一位出生于尼日利亚的计算机工程师和作家，在美国科罗拉多的博耳德生活和工作。可以通过 uche.ogbuji@fourthought.com 和 Ogbuji 先生联系。



Vincent Chen 2006-03-18 21:11 发表评论
]]>Web 的未来：XHTML 2.0 变更概述http://www.blogjava.net/Vencent/articles/35976.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 12:52:00 GMThttp://www.blogjava.net/Vencent/articles/35976.htmlhttp://www.blogjava.net/Vencent/comments/35976.htmlhttp://www.blogjava.net/Vencent/articles/35976.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35976.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35976.html级别: 初级

Nicholas Chase, 总裁, Chase and Chase, Inc.

2003 年 1 月 01 日

多 年以来，HTML 只是在不断变大，却从未变小，因为新版本必须维护向后兼容性。这一情况将得以改变。XHTML 2.0 的第一个工作草案于 2002 年 8 月 5 日发布，一大新闻就是取消了向后兼容性；该语言终于得以继续发展。那么，作为一名开发人员您将得到什么回报呢？健壮的表单和事件表现如何呢？它们是研究不 需要大量 JavaScript 的框架以及甚至层次结构菜单的更佳方法。

本文概述了 XHTML 2.0 中的新增功能以及将来可能会如何使用它。读者应该熟悉 HTML 和／或 XHTML 1.0。熟悉级联样式表（Cascading Style Sheet (CSS)）是有帮助的，但不是必需的。

告别向后兼容性，引入结构

当万维网联盟（World Wide Web Consortium (W3C)）于 2002 年 8 月 5 日发布 XHTML 2.0 的第一个工作草案时， 最让人吃惊的是：与其先前的版本不同，它不是向后兼容的。 对于先前的发行版，如从 HTML 4.01 转到 XHTML 1.0 以及后来从 XHTML 1.0 到 XTHML 1.1，变化都是添加一些内容； 可以读取 XHTML 1.0（过渡的）文档的浏览器也可以理解 HTML 4.01 文档。而 XHTML 2.0 不是那样的。

如果您在两年前宣布我们今天将研究不带 img 标记或 bold 标记的 HTML 版本，那么大多数 Web 开发人员都会用怀疑的眼光看着您。然而，现在就是这样。除了彻底替换表单和框架外，XHTML 2.0 还除去了 b 、 i 和 img 标记（以及 big 、 small 和 tt ）， 甚至不赞成使用 br ，以准备从将来的发行版中除去它。但这是为什么呢？

原因在于大多数标记都是 表示性的 。它们的唯一目的就是给予浏览器指令，规定有关其内容应该如何显示， 但却完全未提供有关其内容是什么的信息。例如，请考虑下面两个句子： 

												
														

														
Presentational elements are, <i>for the most part</i>, <b>gone</b>.

和

												
														

														
Presentational elements are, <em>for the most part</em>, <strong>gone</strong>.

在没有样式表的情况下，这两个句子在浏览器中看起来是一样的，但只有第二个句子提供了有关原因的信息。 事实上，从一开始 em （强调）和 strong 标记就出现在 HTML 中了， 但多年以来作者们基本上已经忽略了它们，而专注于表现形式，这是以牺牲内容为代价的。

但这并不意味着只要您想使某些内容变成粗体或斜体，就应该将它们硬塞进这两个标记中。 相反，除去表示性元素的整个目的是设法完成 CSS 的发明者的初衷， 即应该根据内容所表示的东西来标记内容，而样式表应该用于美化内容。例如， 清单 1使用类别（class）来指出内容类型。


清单 1. 使用类别指定内容类型 
												
														

														
<html>

<head><title>Employee Notice</title>

<style type="text/css">

    .duedate { color: red;

               font-weight: bold; }

    .holiday { color: green;

               font-style: italic }

</style>

</head>

<body>

<h1>Notice</h1>

<p>Employees should take note of the following important dates:</p>

<ul>

    <li class="duedate">8/28/2002 (Progress reports due)</li>

    <li class="holiday">9/1/2002 (Labor Day)</li>

    <li class="duedate">10/28/2002 (Final reports due)</li>

</ul>

</body>

</html>

在该页面中，日期类型可以由内容本身来确认，浏览器可以使用类别信息来决定如何为其设计样式， 如 图 1中所示。


图 1. 类别可以确定显示哪一类内容，样式表可以对它进行适当的格式化

用这种观点研究它：断开（ br ）标记的目的无外乎是为了显示，因为实际上它并无任何内容。XHTML 2.0 不赞成使用 br 标记，而提倡使用 line 标记。 line 标记指定一种特殊的内容： 通常是以后跟换行和回车这种方式呈现的一行文本或其它内容。例如，文本： 

												
														

														
<p>

public class HelloWorld {<br />

public static void main (String[] args){<br />

System.out.println("Hello world!");<br />

}<br />

}

</p>

变成

												
														

														
<p>

<line>public class HelloWorld {</line>

<line>public static void main (String[] args){ </line>

<line>System.out.println("Hello world!"); </line>

<line>}</line>

<line>}</line>

</p>

这样，文档就有了一个表示行的实际对象，同样，段（ p ）标记表示一段内容。

为什么所有这些都很重要呢？因为 Web 不仅正日益成为人与人之间通信的场所， 而且还日益成为软件应用程序（如服务器和搜索引擎索引器）之间进行通信的场所。 而且，每个人（或者说几乎每个人）都使用相同浏览器的时代已经一去不复返了。 开发人员正不断为不同设备（如 PDA 和移动电话）重新设计内容。语音触发的（voice-activated）系统已经离我们不远了。内容的结构意义正变得几乎与内容本身一样重要。


回页首


节

因此，XHTML 2.0 添加了节（section）和标题（heading）。HTML 一直都包含编号的标题 ― h1 到 h6 ， 直到 2002 年 8 月 5 日的工作草案，还未将其撤消，但这只是一个时间问题。 而 XHTML 2.0 使用通用标题和节。例如，可以嵌套节，从而赋予标题含义。 以前用编号标题呈现的文档（ 清单 2）：


清单 2. 文档中的编号标题 
												
														

														

														

														
<html>

<head><title>Adding sections</title></head>

<body>

   <h1>The Web's future: XHTML 2.0</h1>

   <p>by Nicholas Chase</p>

   <h2>Good-bye backward compatibility, hello structure</h2>

   <p>Why backward compatibility is over.</p>

   <h3>Presentation versus Structure</h3>

   <p>Using style sheets rather than presentational elements.</p>

   <h3>Lines</h3>

   <p>Line breaks are deprecated.</p>

   <h2>Sections</h2>

   <p>Creating more reasonable sections.</p>

   <h2>Navigation lists and menus</h2>

   <p>Hierarchical menus.</p>

   <h2>Links, links, everywhere</h2>

   <p>Adding links.</p>

</body>

</html>

可以用通用标题和节替换（ 清单 3）：


清单 3. 通用标题和节 
												
														

														

														

														
<html>

<head><title>Adding sections</title></head>

<body>

   <section>

      <h>The Web's future: XHTML 2.0</h> 

      <p>by Nicholas Chase</p>

      <section>

         <h>Good-bye backward compatibility, hello structure</h>

         <p>Why backward compatibility is over.</p>

         <section>

            <h>Presentation vs. Structure</h>

            <p>Using style sheets rather than presentational elements.</p>

         </section>

         <section>

             <h>Lines</h>

             <p>Line breaks are deprecated.</p>

         </section>

      </section>

      <section>

         <h>Sections</h> 

         <p>Creating more reasonable sections.</p>

      </section>

      <section>

          <h>Navigation lists and menus</h>

          <p>Hierarchical menus.</p>

      </section>

      <section>

          <h>Links, links, everywhere</h>

          <p>Adding links.</p>

      </section>

   </section>

</body>

</html>

这种结构有两个优点。首先，应用程序（如搜索引擎 crawler）能够更容易地了解内容的相对重要性， 其次，节是自包含的。在 HTML 中，节以其标题开始，所以在标题的前面不会出现内容（如介绍性内容）。 section 元素取消了这种约束，因为其内部的任何内容都是节的一部分。





回页首


导航列表和菜单

增加了一个会让 Web 开发人员大大受益的结构，那就是导航列表。由 nl 标记指定的导航列表的工作原理与其“表亲”有序列表（ ol ）和无序列表（ ul ）非常相似，但有一点不一样：导航列表的项仅在列表激活时才出现。 因此，导航列表与层次结构的弹出菜单十分相似，这种弹出菜单很受欢迎，因为它们提供了许多导航信息，而且不会占据太多的屏幕空间。 例如，肥皂剧站点可能有以下菜单（ 清单 4）：


清单 4. 使用导航列表 
												
														

														
<nl>

   <name>Character Options</name>

   <li href="stay.html">Stay</li>

   <nl>

      <name>Leave</name>

      <li href="newjob.html">Job transfer</li>

      <li href="divorce.html">Divorce</li>

      <li href="fataldisease.html">Fatal disease</li>

   </nl>

   <li href="backburner.html">Back Burner</li>

</nl>

当用户激活名称（ Character Options ）时，出现列表项。 关于当用户激活主列表时子列表（如 Leave 菜单）是否会出现，还是用户必须激活子列表项本身以使其出现，工作草案并未说清楚。 最终作者可能通过样式或事件来控制这一行为。在任何情况下，当输入焦点从主元素移开时，列表项就会消失。





回页首


链接，链接无处不在

您可能已经注意到：即使打算将前一个示例作为菜单， 但它没有锚（ a ）标记。而 href 属性已经被正确放在了 li 元素上。这不是导航列表的特性，而是 XHTML 2.0 的新特性。与超文本相关的属性（如 href 、 target 和 accesskey ）现在是公共属性集合（Common Attribute Collection）的一部分，它包括核心属性（ class 、 id 和 title ）、国际化属性（ xml:lang ， 它替换了 XHTML 1.1 中的 lang ）和事件属性，事件属性来自 XML Events 建议书，正如您将在下面看到的。

这意味只要将 href 属性添加到任何元素，就可以将它转换成链接，而不一定要用锚标记包围单个元素。

这是否表示经过四年的努力，XLink 已经被 XHTML 2.0 采用了吗？总而言之，没有。 事实上，XLink 和 XHTML 2.0 中规定的链接之间的差异是那些正从事各自建议书的开发人员之间争论的根源， 所以在这个最初的公开工作草案和最后的建议书之间可能会做些更改。 同时，可以组合使用该功能、导航列表、 link 元素，以及资源描述框架（Resource Description Framework (RDF)）来复制 XLink 的大多数功能。

XForms 是一个与 XML 相关的建议书，并确实已经成为 XHTML 2.0 的一部分。


回页首


XForms

XML 表单语言（XML Forms Language (XForms)） 是研究表单的一种全新方法 ― 它象 XHTML 的其余部分一样 ― 内容、结构和表现是完全独立的。XForms 页面指定一个模型， 该模型拥有有关表单自身的信息，然后，可以在页面周围散布表单元素，而不是被局限于单个表单元素。 这意味着，您甚至可以在页面的同一区域中合并不同表单的元素。 可以通过实例文档填充表单，实例文档是从表单元素上的 XPath 表达式引用的。 表单元素自身也代表了特殊类型的对象，而不是描述在页面上它们是如何显示的。 当更新表单元素中的数据时，会更新实例文档。 当用户提交表单时，实际发送的是实例文档。例如，采用下面的简单表单（ 清单 5）：


清单 5. 简单的 HTML 表单 
												
														

														

														

														
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Preference Form</title>

</head>

<body>



<h1>Preferences Form</h1>

<form action="myformprocessor.jsp">

<p> 

    Username: <input type="text" name="userid" />

    <br />

    Password: <input type="password" name="pass"/>

</p>



<p>

    Area preference:

        <select name="seatingpreference">

             <option value="1">One</option>

             <option value="2">Two</option>

             <option value="3">Three</option>

        </select>

</p>

<p>

    <input type="submit" />

</p>

</form>

</body>

</html>

清单 6显示了 XForms 版本的表单：


清单 6. XForms 版本的表单 
												
														

														

														

														
<html xmlns="http://www.w3.org/1999/xhtml" 

      xmlns:xforms="http://www.w3.org/2002/01/xforms">

<head>

    <title>Preference Form</title>



    <xforms:model>



        <xforms:submitInfo method="postxml"/>



        <xforms:instance xmlns="">

            <preferences>

                <person userid="">

                    <password></password>

                </person>

                <seatingpreference></seatingpreference>

            </preferences>

        </xforms:instance>

    </xforms:model>



</head>

<body>



<h1>Preferences Form</h1>



<p> 

    <xforms:input ref="preferences/person@userid">

        <xforms:caption>Username: </xforms:caption>

    </xforms:input>



    <br />



    <xforms:secret ref="preferences/person/password">

        <xforms:caption>Password: </xforms:caption>

    </xforms:secret>

</p>



<p>



    <xforms:selectOne ref="preferences/seatingpreference" selectUI="listbox">

        <xforms:caption>Area preference:   </xforms:caption>

        <xforms:item>

            <xforms:value>1</xforms:value>

            <xforms:caption>One</xforms:caption>

        </xforms:item>

        <xforms:item>

            <xforms:value>2</xforms:value>

            <xforms:caption>Two</xforms:caption>

        </xforms:item>

        <xforms:item>

            <xforms:value>3</xforms:value>

            <xforms:caption>Three</xforms:caption>

        </xforms:item>

    </xforms:selectOne>



</p>

<p>

    <xforms:submit>

        <xforms:caption>Submit Report</xforms:caption>

    </xforms:submit>

</p>



</body>

</html>

术语说明：XForms 建议书特别说明了不存在单个表单的 XForms。它是多个 XForms 页面，不再是单个 XForm 页面。

表单一般需要进行验证。换句话说，数据字段必须包含有效数据等。XForms 使用 XML 模式来约束所提交的数据。另外，可以通过添加 XML Events（它也包括在 XHTML 2.0 中）来进一步增强 XForms 页面的功能。


回页首


XML Events

您可能已经熟悉了通过添加如 onclick 和 onmouseover 之类的事件在 Web 页面上使用事件。不会再有了。这些熟悉的属性已经被集成到 XHTML 2.0 中的 XML Events 模块所替代。XML Events 提供了一种通用的方法来指定事件发生时应该采取的操作。 它的优点是您不受限于如鼠标单击之类的预定义事件。 相反，可以定义您自己的事件以及触发它们时会发生什么。

XML Events 包含下列组件。如鼠标单击之类的事件可以作为目标。例如，在 清单 7所示的页面中：


清单 7. 要单击的页面 
												
														

														

														

														
<html>

  <head><title>Rides</title></head>

  <body>

     <ul id="ridelist">

        <li href="monorail.html">Monorail</li>

        <li href="Matterhorn.html">Matterhorn</li>

        <li href="coaster.html">Roller coaster</li>

     </ul>

  </body>

</html>

用户可能单击第二个 li 元素 Matterhorn。当这发生时，鼠标单击事件从文档根行进到目标（ li ）并再次返回。顺序是： 

												
														

														
(root) -- html -- body -- ul -- li -- ul -- body -- html -- (root)

向下行进到目标称为捕捉 （capture）阶段，而再次向上行进称为冒泡（bubbling）阶段（并不是所有的事件都会冒泡）。在行进期间的任何时候，事件都可以传递已经被注 册为观察器的对象（这表示它正在观察特定的事件），如果它看到事件，则执行特定操作。侦听器创建观察器。例如，在下面的序列中：

												
														

														
<ev:listener observer="ridelist" event="mousedown" handler="#myscript"/>

侦听器使 ul 元素（或者更准确一点说，是整个列表）成为观察器， 因而，当用户单击任何列表项目时，观察器（ ridelist ）执行 myscript （但仍必须确定调用任意脚本的机制）。





回页首


XFrames

广受指责的框架也在 XHTML 2.0 中被替换了。XFrames 的第一个工作草案于 2002 年 8 月 6 日初次登场，此前一天 XHTML 2.0 宣布它将使用 XFrames 并试图解决传统 HTML 框架出现的问题。 大多数问题是有关难于创建书签和刷新页面，以及不支持框架的搜索引擎无法索引适当内容。

在 XFrames 文档中，所包含内容的 URI 成为整个文档 URI 的一部分。 例如，下面 清单 8中的页面可能表示带三个框架的 HTML 页面：


清单 8. XFrames 页面 
												
														

														
<html>

<head><title>XFrames</title></head>

<body>

<row>

    <frame id="header" />

    <column>

        <frame id="menu"/>

        <frame id="content"/>

    </column>



</row>

</body>

</html>

请注意，没有指定每个框架的 URI，但每个框架都有其自己唯一的标识符。 因此，这个文档的 URI 可能是：

												
														

														
site.xfm#frames(header=header.xhtml,menu=menu.xhtml,content=main.xhtml)

然后，理解 XFrames 的浏览器将每个框架的内容与适当的 URI 相关联。当用户单击链接并更改个别框架的内容时，页面的整个 URI 都会更改， 所以它始终显示用户正在查看的实际内容，“收藏”和“后退”按钮提供了准确的内容。


回页首


图像作为对象

2002 年 8 月 5 日工作草案的最后一个主要的更改包括 除去了 img 标记并用 object 标记替代它。 object 标记实际上在 HTML 4.01 中就已经出现， 但开发人员主要将它用于嵌入多媒体和 Java applet。 然而，它一直都能支持图像。使用 object 标记的主要优点在于，它被设计成向下级联。 换句话说，如果浏览器不能显示一个特定对象，那么它将显示该对象的内容。 例如，遇到下列代码片断的浏览器首先试图装入电影。如果装入电影失败，则装入图像。如果装入图像失败，那么它只显示文本。 

												
														

														
<object data="rides.mpeg" type="application/mpeg">

    <object data="rollercoaster.jpg" type="image/jpg">

        Jack tries to expand his horizons on the racing coasters.

    </object>

</object>





回页首


后续步骤

2002 年 8 月 5 日的 XHTML 2.0 工作草案中唯一可以确定的事就是不能确定任何事情。 在现在的草案和被作为建议书采纳的过程中，几乎可以肯定它将在某些方面发生变化， 但强调结构和语义的目标不可能变化。出于这个原因， 最好研究您现在构建的页面，并开始养成适当使用结构和样式的习惯。 使用标记来指定某些事物是什么，而不是如何显示它们，并使用 CSS 来完成其余工作。 总的来说，更多地考虑文档的结构以及您想要它们干什么，而不必太多地考虑它们将如何显示。


回页首


参考资料

  • 您可以参阅本文在 developerWorks 全球站点上的 英文原文.

  • 请参阅 XHTML 2.0的最新版本，以了解它目前包含哪些内容。

  • 请查找有关如何用 XML Events控制页面和任何 XML 文档中事件的信息。

  • 请阅读使用 XForms的下一代 Web 表单。

  • 请阅读文章“ Get ready for XForms”（ developerWorks，2002 年 9 月）， 学习有关 XForms 的更多知识。

  • 请快速阅读 XFrames。

  • 请阅读 Modularization of XHTML 或阅读 developerWorksWeb 体系结构专区上的 XHTML的模块化教程（2001 年 10 月），了解 XHTML 2.0 是如何构造的。

  • 请在 XHTML 2.0 The Latest Trick 中参考 Kendall Grant Clark 有关 XHTML 2.0 以及 Semantic Web 的注释。

  • 请在 XLink: Who Cares? 中阅读 Bob DuCharme 有关 XLink 及其前景的想法。

  • 下载 X-Smiles，它是一种 XForms 浏览器。




回页首


关于作者


Nicholas Chase 曾参与过很多公司（如 Lucent Technologies、Sun Microsystems、Oracle 和 Tampa Bay Buccaneers 等）的网站开发。Nick 曾是一名高中物理教师、低辐射废物设备管理人员、在线科幻杂志编辑、多媒体工程师和 Oracle 讲师。 最近，他成为 Site Dynamics Interactive Communications（位于佛罗里达州的 Clearwater）的 CTO， 而且还是三本有关 Web 开发书籍的作者，包括 Java and XML from Scratch(Que) 和即将出版的 Primer Plus XML Programming(Sams)。他乐意听取读者意见，可以通过 nicholas@nicholaschase.com与他联系。



Vincent Chen 2006-03-18 20:52 发表评论
]]>Web 的未来是语义的:存在论形成了理解在线数据的整套全新方式的核心http://www.blogjava.net/Vencent/articles/35977.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 12:52:00 GMThttp://www.blogjava.net/Vencent/articles/35977.htmlhttp://www.blogjava.net/Vencent/comments/35977.htmlhttp://www.blogjava.net/Vencent/articles/35977.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35977.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35977.html级别: 初级

Naveen Balani, 技术架构师, Webify Solutions

2005 年 12 月 12 日

Naveen Balani 在向您介绍组织如何利用基于存在论开发的同时，还探索了语义 Web 技术的基础。语义 Web 有助于有效的知识管理和有成本效益的产品生命周期自动化，实现更快的开发和集成过程。

一般来说，语义学（semantics） 研究的是意义。（“semantic”这个词来自希腊语 semantikos，或者说“显著意义”，派生于 sema ，或者说“标记（sign）”）。语义 Web 技术有助于利用基于开放标准的技术，从数据、文档内容或应用程序代码中分离出意义。如果计算机理解文档的语义，那么它就不仅仅是解释构成文档的一系列字符：它能够理解文档的意义。

语义 Web 提供了公共的框架，允许在应用程序之间、企业之间和社区边界之间共享和重用数据。可以把语义 Web 想像成在万维网世界中表示数据的有效途径，或者把它当成一种数据库，用某种能够由机器理解的方式，链接到全球 Web 文档中的内容。语义技术用存在论（ontology） 表示意义，并通过这些存在论中表示的关系、规则、逻辑和条件来提供推理。

构成语义 Web 的技术

要表示语义 Web，需要使用以下技术：

  • 全球性的命名方案（URI）
  • 描述数据的标准语法（RDF）
  • 描述数据属性的标准机制（RDF Schema）
  • 描述数据条目间关系的标准机制（用 OWL Web 存在论语言定义的存在论）

我们来深入研究这些技术。

全球性的命名方案：URI

URI 就是 Web 标识符，就像在万维网上经常看到的用 http 或 ftp 开始的字符串。任何人都可以创建 URI，而且 URI 的所有权委托得很清晰，所以它们构成了理想的技术基础，可以在其上构建全球性的 Web。实际上，万维网就是这样的：任何拥有 URI 的事物都被认为是“在 Web 上”。语义 Web 中的每个数据对象和每个数据模式/模型都必须拥有惟一的 URI。

统一资源定位符（URL） 是一种 URI，除了标识资源外，通过描述资源的主要访问机制或网络位置，URL 还提供了对资源的表示进行操作或获取的方式。例如，URL http://www.webifysolutions.com 是一个 URI，标识了一个资源（Webify Solutions 的主页），还代表这个资源的表示形式（例如主页目前的 HTML 代码，作为编码字符）是可以从名为 www.webifysolutions.com 的网络主机通过 HTTP 得到的。

统一资源名称（URN） 也是一种 URI，根据特定名称空间中的名称来标识资源。可以用 URN 表示资源，而不用指明资源的位置或者如何取消对它的引用。例如，URN urn:ISBN:1-0-7666-98-0 是一个 URI，像 ISBN 图书编号一样，它允许您谈到一本书，但是并未指明在哪里能实际得到它的拷贝和如何得到。

描述数据的标准语法：RDF

RDF 是一个规范，它定义了表达世界的模型，定义了序列化和交换这个模型的语法。W3C 已经开发了 RDF 的 XML 序列化。RDF XML 是语义 Web 上 RDF 的标准交换格式，虽然它并不是惟一的格式。例如，Notation3 是可以替代 RDF XML 的一种优秀的纯文本序列化方式。

RDF 提供了一致的、标准化的方式来描述和查询 Internet 资源，资源从文本页面和图片一直到音频文件和视频剪辑。它提供了句法的互操作性，还提供了构建语义 Web 的基础层。RDF 定义了关系的导向图。这些是由对象-属性-值三元组表示的 —— 即对象 O 拥有属性 A，属性 A 的值是 V。

清单 1 提供了 RDF XML 的示例。


清单 1. RDF XML 示例 
												
														
				<?xml version="1.0"?> 
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
             xmlns:contact="http://www.w3.org/2000/05/contact#">

  <contact:Company rdf:about="http://www.w3.org/Organization/contact#WebifySolutions">
    <contact:name>Webify Solutions</contact:name>
    <contact:mailbox rdf:resource="mailto:info@webifysolutions.com"/>
    <contact:phone>1-800-4WEBIFY</contact:phone>
   </contact:Company>

</rdf:RDF>

清单 1 中的这段 RDF 基本上构成了关于一个资源的陈述，在这个示例中是公司 http://www.w3.org/Organization/contact#WebifySolutions。公司可以用 URI http://www.w3.org/Organization/contact#WebifySolutions 来标识；公司名称是 Webify Solutions，公司的电子邮件地址是 info@webifysolutions.com，公司的电话号码是 1-800-4WEBIFY。

关系导向图如 图 1 所示。


图 1. 描述 Webify Solutions 联系人细节的 RDF 图
描述 Webify Solutions 联系人细节的 RDF 图

描述数据属性的标准机制：RDF Schema

RDF Schema 是 RDF 的语义扩展。它提供了描述相关资源以及这些资源之间关系的机制。

RDF Schema 的类和属性系统与面向对象编程语言（比如 Java 语言）的类型系统类似。RDF 与许多这样的系统不同。RDF 词汇描述语言不是用实例的属性来定义类，而是用属性要在其上应用的资源类来描述属性。

RDF 和 RDF Schema 都基于 XML 和 XML Schema。描述数据的标准（RDF）和描述数据属性的标准（RDF Schema）的存在，促进了从多个源读取和利用数据的工具集的开发。不同应用程序能够共享和利用数据的程度，有时叫做句法互操作性（syntactic interoperability）。这些数据操纵工具越标准化、越广泛，句法互操作性的程度就越高，那么使用语义 Web 方式取代点对点集成解决方案就越容易，也越有吸引力。

要获取全套 W3C RDF Schema 数据模型和规范，请参阅 参考资料。

描述数据项目间关系的标准机制：使用 OWL Web 存在论语言的存在论

在多个应用程序可以真正理解数据并把它当作信息之前，语义的互操作性是必需的。语义互操作性就是正确地解析数据。它要求术语间的映射，映射又要求内容分析。

这个内容分析要求正式和明确的域模型规范，规范定义了使用的术语和它们的关系。这类正式的域模型有时叫做存在论。存在论用类、子类和属性来定义数据模型。

使 用 W3C 推荐的 OWL Web 存在论语言，可以表示存在论。OWL（存在论工作语言）添加了比 RDF 或 RDF Schema 更多的词汇来描述属性和类：除了其他东西之外，它还能描述类之间的关系（比如剥离）、 基数（例如“确切的一”）、等价、更丰富的属性类型化，以及属性的特征（比如对称性）。

OWL Web 存在论语言设计用于的应用程序，不仅仅是向人类呈现信息，更需要处理信息的内容。OWL 既提供了正式的语义，又提供了附加的词汇，所以比起 XML、RDF 和 RDF Schema，对 Web 内容实现了更好的机器互操作性。OWL 有三个子语言：按表现能力降序排列，分别是 OWL Full、OWL DL、 和 OWL Lite。

  • OWL Web 存在论语言的总和叫做 OWL Full。OWL Full 使用 OWL 语言的所有原始材料，并允许这些原生材料按任意方式与 RDF 和 RDF RDF Schema 组合。OWL Full 完全向上兼容 RDF，从句法上和语义上都兼容：任何合法的 RDF 文档也都是合法的 OWL Full 文档。要让推理软件支持 OWL Full 的每个特性是不太可能的，因为它提供了最大的表现力和 RDF 的句法自由，但是在计算上没有保证。

  • OWL DL 支持的用户需要在不损失计算完整性的前提下得到最大表现力。OWL DL 是 OWL Full 语言构造的子语言，但是有一些限制，比如类型分离 （例如，类不能还是个体或属性，而属性不能还是个体或类）。

  • OWL Lite 支持的用户需要分类层次结构和简单的约束特性。这个语言的优势在于理解和实现起来比前两个语言都容易；但是，它限制了表现力。例如，虽然 OWL Lite 支持基数约束，但是只支持基数值 0 或 1。

存在论的例子包括：Amazon.com 这样的在线购物站点的目录，UNSPSC （用于产品和服务的术语体系）这类特定域的标准术语体系，或者 Web 上各种各样的分类，比如“My Yahoo”分类。

接下来，我将进一步研究 OWL 的组成部分。


回页首


OWL Web 存在论语言的组成部分

OWL 基本组成部分包括类、属性 和个体，下面将依次介绍它们。

类

类 是 OWL 存在论的基本构建块。类是域中的概念。类通常构成分类的层次结构（子类-超类的层次结构）。

类是用 owl:Class 元素定义的。OWL 自带了两个预定义的类：owl:Thing 和 owl:Nothing。owl:Thing 是最通用的类，它包含任何东西；owl:Nothing 是一个空类。所有自定义的类都是 owl:Thing 的子类，是 owl:Nothing 的超类。银行领域的类的例子可能包括 Account 或 Customer。

清单 2 展示了 OWL 类的一个示例。


清单 2. OWL 类示例 
												
														

														
<owl:Class rdf:ID="SavingsAccount">
 <rdfs:subclassOf rdf:resource="#Account"/>
</owl:Class>

清单 2 中的代码指定 SavingAccount 是一个类，而且是 Account 的子类。

OWL 支持 6 种主要的描述类的方式。最简单的一种是命名 类。其他方式是交叉 类、联合 类、补充 类、限制 类和 枚举 类。清单 2 演示了两种描述类的方式：限制把 SavingAccount 定义为命名类 Account 的子类。要获得全套 W3C OWL 类规范，请参阅 参考资料。

属性

属性有两大类：

  • 对象属性，它把个体关联到其他个体。
  • 数据类型属性，它把个体关联到数据类型的值，比如 integer、float 和 string 类型。Owl 利用 XML Schema 定义数据类型。

属性可以有关联的域和范围。每个属性可以属于以下一个类别：

  • 功能的： 对于给定对象，属性只能有一个值。例子包括人的年龄、身高或体重。
  • 反转功能的： 两个不同个体不能拥有相同的值。例如，bankNumber 或 SSN 属性对每个人来说都是惟一的。
  • 对称的：如果某个属性把 A 链接到 B，那么就可以推断 B 链接到了 A。对称属性的例子包括：“兄弟”或“相同”。
  • 传递的：如果某个属性把 A 链接到 B，而 B 链接到 C，那么可以推断它也把 A 链接到了 C。例如，如果 A 比 B 高，B 比 C 高， 那么 A 比 C 高。

可以对类和属性应用不同的限制。例如，基数限制指定某类个体可以参与的关系的数量。

要获得全套 W3C OWL 规范，请参阅 参考资料。

个体

个体 是类的实例，属性可以把一个个体关联到其他个体。例如，可以把名为 Smith 的个体描述为 Person 类的实例，而且可能用 hasEmployer 属性把 Smith 关联到个体 Webify Solutions，表明 Smith 是 Webify Solutions 的员工。

清单 3 提供了 OWL 个体的一个示例。


清单 3. OWL 个体 
												
														

														
<owl:Thing rdf:about="SmithAccount">
 <rdfs:type="#Account"/>
</owl:Class>

rdf:type 是一个 RDF 属性，它把个体绑定到一个数字类。清单 3 表明 SmithAccount 是类型 Account 的一个实例。

图 2 表示了 OWL 存在论的基本构造块。


图 2. 描述 Webify Solutions 组织的 OWL 存在论
描述 Webify Solutions 组织的 OWL 存在论




回页首


存在论的商业价值

IT 系统用关系数据模型、扁平文件、面向对象模型或专用的数据模型来组织意义。变化的业务需求不断地要求向关系数据模型或面向对象模型中添加新实体和关系。

而 且，如果组织采用了许多由不同开发商提供的应用程序，那么可能要在应用程序的数据库之间重复相同的模型。例如，银行公司提供了不同的产品，以服务不同类型 的客户。企业客户可能需要欺诈检测功能，而普通客户可能只使用在线银行功能。一般会有多个开发商为银行提供应用程序，但是每个应用程序都会在应用程序特定 的数据库中重复同样的公共信息 —— 帐户、客户，等等。当组织增加产品以满日益增长的业务需求时，相同的冗余信息就散落在整个企业中。

对于所有这些正在开发的应用程序来说，绝对有许多服务是公共的 —— 例如查看银行交易和电汇。每个服务都要用每种应用程序特定的方式重复，从而导致点对点的集成。

如 果银行采用了存在论驱动的方式，那么银行就可以用一种语言中立的形式来捕捉并表示它整体的产品知识，并把知识部署到中央仓库。使用这种共享的、适应性的存 在论，组织可以跨越应用程序，提供单一而统一的数据视图。这种统一的视图支持信息的精确检索和无缝的企业集成，同时业务过程和不同的数据源可以通过一个公 共的元模型彼此相互映射。这样，共享的存在论就消除了点对点集成，并简化了应用程序的集成，减少了数据冗余，在应用程序之间提供了相同的语义，从而方便了 银行的维护与升级。


回页首


语义 Web 对万维网的好处

万维网是有史以来创建的最大的信息仓库，而且各种语言和各个知识领域的内容还在不断增长。但是，从长远看，让这种内容有意义是极端困难的。搜索引擎可能会 帮助找到包含特定词语的内容，但是内容可能并不是您确切想要的。那么缺少什么呢？搜索是基于页面内容的，而不是基于页面内容或页面信息的语义。

一 旦语义 Web 存在，它就能够提供为 Web 内容做标记的能力，可以描述各部分内容是关于什么的，并给内容的项目提供语义。这样，搜索引擎会变得比现在更有效率，用户也会精确地找到所要寻找的信息。 提供不同的服务的组织可以给这些服务标记上意义；使用基于 Web 的软件代理，就可以动态地发现这些服务，并利用它们或让它们与其他服务协作。


回页首


语义技术在 SOA 中的角色和价值

要 想正确地建模和管理面向服务的架构（SOA），企业架构师必须维护企业可用服务的活动表示。具体来说，要发现和组织他们的服务，架构师就必须采用最佳实 践，用元数据来建模和组织他们的服务，把业务逻辑封装在元数据中进行动态绑定，并用元数据进行管理。存在论提供了非常强大和灵活的方式，可以聚合、可视化 和规范化这个服务元数据层。

存在论就是概念、关系和约束的网络，为数据、信息以及过程提供了上下文。存在论增强了服务发现、建 模、汇集、协调和语义互操作性。它们改善了人们浏览、探索复杂的元数据空间以及和它们交互的方式。业务存在论是业务概念和它们之间关系的正式规范，促进了 机器的推理和判断。业务存在论用元数据把系统捆绑在一起，非常像数据库把离散的数据片断绑在一起。这一抽象提供了敏捷性和灵活性，因为接口可以改变，新的 资源和订阅者可以容易地加入，即使系统正在运行也可以。

语义是面向服务集成的未来。语义技术提供了超越现有 IT 技术的抽象层，它支持跨越业务和 IT 领域之上的数据、内容和过程的沟通与互联。最后，从人类交互的角度来说，语义技术添加了新一级语义门户，比起目前使用的传统的点对点集成方式的基于门户的 信息发布，提供了更加智能、更加相关、上下文更敏感的交互。


回页首


结束语

在 这篇文章中，您了解了构成语义 Web 技术的核心标准，以及为什么企业可能要采用这些技术。利用语义 Web 技术，组织可以跨越应用程序提供单一而统一的数据视图，这可以支持信息的精确检索，简化企业和 SOA 集成，减少数据冗余，并在应用程序之间提供一致的语义。所有这些会简化整个企业的开发、维护和升级。





回页首


参考资料

学习

获得产品和技术
  • Webify Solutions：IBM 按需优化合作伙伴。Webify 提供了存在论驱动的集成服务环境，能够达到和维护跨企业、跨应用程序和跨合作伙伴域的语义集成，从而帮助公司解决治理和敏捷性方面的挑战。

  • IBM Integrated Ontology Development Toolkit：请购买这个工具包，它用于 IBM alphaWorks 上存在论驱动的开发。


回页首


关于作者


Naveen Balani 把自己的大部分时间花在设计和开发基于 J2EE 的框架和产品上。他为 IBM developerWorks 撰写了各种不同的文章，涉及的主题包括：ESB、SOA、JMS、Web 服务架构、CICS、AXIS、DB2、XML Extender、WebSphere Studio、MQSeries、Java Wireless Devices and DB2 Everyplace for Palm、J2ME、MIDP、Java-Nokia、Visual Studio .Net，以及无线数据同步。可以通过他的电子邮件 naveenbalani@rediffmail.com 与他联系。


Vincent Chen 2006-03-18 20:52 发表评论
]]>XHTML：两种语言的力量:可扩展超文本标记语言是用 XML 对 HTML 4 的改良http://www.blogjava.net/Vencent/articles/35973.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 12:51:00 GMThttp://www.blogjava.net/Vencent/articles/35973.htmlhttp://www.blogjava.net/Vencent/comments/35973.htmlhttp://www.blogjava.net/Vencent/articles/35973.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35973.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35973.html级别: 初级

Sathyan Munirathinam, 软件工程师, Aztec Software

2002 年 7 月 01 日

本文从实际角度对 XHTML 进行了研究，它是有效地结合 HTML 的简单性和 XML 的可扩展性的一种标记语言。本文还涵盖了 XHTML 各种风格的基本特性并包括对语言和大量实际应用程序的讨论。

作为一 名 Web 开发人员是项很艰苦的工作。您不仅必须每天避开流行浏览器引起的陷阱和缺陷，还必须至少留意可能（或不可能）对您的工作产生影响的众多技术上的新发展。您 可能刚刚掌握了样式表和 DHTML，而新的技术又要求您关注。您需要立刻学哪一个呢？现在可以放弃哪一个呢？随着可扩展超文本标记语言（Extensible Hypertext Markup Language，简称 XHTML）的出现，最终可能让传统的 HTML 马放南山了。

XHTML 概述

XHTML 是 HTML 和 XML 的混合物，它是为网络设备显示（包括 Web 浏览器、PDA 设备和移动电话）而特别设计的。2002 年 1 月 26 日标志了 XHTML 1.0 作为 Web 标记的正式 W3C 推荐的第二个生日。但是，XHTML 仍然要蹒跚学步，学着用微笑和大喊大叫来引起大多数 Web 设计人员的注意。

W3C 主管 Tim Berners-Lee 这样评价 XHTML：“XHTML 1.0 连接了现在的 Web 和将来的 Web …… 它为页面和网站作者提供了进入结构化数据 XML 世界的桥梁，同时仍然能够保持与支持 HTML 4 的用户代理的可操作性。"

XHTML 是非常严格的标记语言。它的规则很简单，并且事实上，它的可扩展性很小 ― 即，不能编写您自己的定义来表示语言如何动作；您必须遵循其规则。XHTML 1.0 采用 HTML 4.0 中引入的概念，这些概念在其生效之前，需要按结构化的和方法论的行为进行处理。

XHTML 可以与级联样式表（CSS）一起使用以完成显示目的。XHTML 还允许您将可扩展样式表（Extensible Stylesheet Language (XSL)）用于转换。通过使用这个基于 XML 的样式技术，您实际上可以将一个文档从一种类型转换成另一种类型 ― 例如，从 HTML 文档转换成 PDF 文档。


回页首


为什么要使用 XHTML？

通常，您可能为新增功能或者因为已经修正了以前版本的问题而将技术更新到新的版本。但就标记功能而言，XHTML 是非常类似于 HTML 4 的副本，所以不要期望存在任何新奇的标记。

W3C 声称 XHTML 的主要优点是 可扩展性和 可移植性：

可扩展性

XML 文档要求格式良好（元素嵌套正确）。使用 HTML，添加新的元素组需要更改整个 DTD。在基于 XML 的 DTD 中，新的元素组只需要内部一致并且格式良好，就可以添加到现有的 DTD 中。这极大地简化了新元素集合的开发和集成。

可移植性

越来越频繁地使用非台式设备来访问因特网文档。在大多数情况下，这些设备不具备台式计算机的计算能力，并且不象标准桌面浏览器那样可适用于格式差的 HTML。实际上，如果这些非桌面浏览器没有接收到格式良好的标记（HTML 或 XHTML），它们可能根本无法显示文档。


回页首


XHTML 文档结构

XHTML 文档由三个主要部分构成：

  • DOCTYPE
  • Head
  • Body

基本文档结构是：

												
														
<!DOCTYPE ...>
<html  ... >
<head> ... </head>
<body> ... </body>
</html>

<head> 区域包含关于文档的信息，如所有权、版权和关键字；而 <body> 区域包含要显示的文档内容。

清单 1 向您显示实际中如何使用这个结构：


清单 1. XHTML 示例 
												
														
1.  <?xml version="1.0"?>
2.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0   
    Transitional//EN"  "DTD/xhtml1-transitional.dtd">
3.  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"  
                     lang="en">
4.  <head>
    <title>My XHTML Sample Page</title>
    </head>
5.  <body bgcolor="white">
    <center><h1>Welcome to XHTML !</h1></center>
    </body>
6.  </html>

第 1 行：由于 XHTML 是以 XML 文档表示的 HTML，所以它必须在文档的顶部包括初始 XML 声明 <?xml version="1.0"?> 。

第 2 行：XHTML 文档必须由三组标准规则的其中一组来标识。这些规则存储在一个称为“文档类型声明（Document Type Declaration (DTD)）”的单独文档中，并且使用这些规则验证 XHTML 文档结构的准确性。准确地说，DTD 的目的是描述 XHTML 中允许的语言和语法。

第 3 行：XHTML 文档中的第二个标记必须包括带有由 xmlns=http://www.w3.org/1999/xhtml 属性标识的 XML 名称空间的开始 <html> 标记。XML 名称空间标识 XHTML 文档使用的标记的范围。它用来确保一个 DTD 使用的名称不与用户定义的标记或其它 DTD 中定义的标记冲突。

第 4 行：XHTML 文档必须包括完整的头部区域。这个区域包含开始 <head> 标记和标题标记（ <title></title> ），然后以结尾 </head> 标记结束。

第 5 行：XHTML 文档必须包含开始和结尾 <body></body> 标记。在这些标记中，您可以放置传统的 HTML 编码标记。要与 XHTML 符合，这些标记的编码必须是格式良好的。

第 6 行：最后，使用结尾 </html> 标记结束 XHTML 文档。





回页首


XHTML DTD

在创建 XHTML 文档时，在该文档的顶部声明了它应符合的 DTD。每个 DTD 可能由一个称为 正式公共标识（Formal Public Identifier，简称 FPI）的唯一标号识别。字 PUBLIC 后面的文字文本或引用文本是表示 W3C 的 XHTML 1.0 DTD 的 FPI。

目前，有三种 XHTML 文档类型：

  • Strict
  • Transitional
  • Frameset

Strict DTD 

												
														
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
		"DTD/xhtml1-strict.dtd">

当您想要真正清晰的标记、避免表示上的混乱时，将此与 CSS 一起使用。已经从该语言中除去了几个标记（如 <center> ），甚至还除去了其它标记的某些属性（如 H1 标记的 align 属性）。

Transitional DTD 

												
														
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"DTD/xhtml1-transitional.dtd">

当您需要利用 HTML 的表示特性时，使用它；您的许多读者都没有能理解 CSS 的最新浏览器。过渡的 DTD 支持大部分标准的 HTML 4 标记和属性。

Frameset DTD 

												
														
<! DOCTYPE html PUBLIC 	"-//W3C//DTD XHTML 1.0 Frameset//EN"
		"DTD/xhtml1-frameset.dtd">

这使您能够使用 HTML 框架将浏览器窗口分成两个或更多框架。这个 DTD 保存框架集定义。


回页首


XHTML 验证规则

XHTML 文档 必须是格式良好的 XML。它必须符合基本 XML 语法：

必须用小写书写标记和属性名称。

HTML XHTML
<TD BGCOLOR="#ffcc33"> < td bgcolor="#ffcc33">

元素必须嵌套；而不能交错。对于 XML 和 XHTML，您需要以逆序关闭标记 ― 换言之：后开先关。

HTML XHTML
<p>Be <b>bold!</p></b> <p>Be <b>bold! </b></p>

所有非空元素必须是关闭的。例如，对于 HTML，许多人使用 <p> 标记分段。这个标记设计用于标记一段的开始和结尾（使用结尾 </p> 标记）。这使它成为 非空标记，因为它包含段文本。

HTML XHTML
First paragraph<p> Second paragraph<p> <p>First paragraph</p> <p>Second paragraph </p>

受 影响的元素：<basefont>、<body>、<colgroup>、<dd>、< dt>、<head>、<html>、<li>、<p>、<tbody>、< thead>、<tfoot>、<th>、<td> 和 <tr>。

必须终止空元素。所有空元素必须使用 XML 空标记语法，在右括号前有一个结尾的正斜杠（例如， <br> becomes <br /> ）。请注意元素文本后面的空格和结束定界符 /> 。这是为了与当前浏览器兼容。

HTML XHTML
<hr> <hr />
<br> <br />
<input ... > <input ... />
<param ... > <param ... />
<img src="valid.gif"> <img src="valid.gif" />

受 影响的元素：<area>、<base>、<br>、<col>、<frame>、 <hr>、<img>、<input>、<isindex>、<link>、< meta>、<option> 和 <param>。

属性值必须加引号。不再有 <img ... border=0> 了。现在，您需要给每个属性加引号，即使它是数字。

HTML XHTML
<img ... border=0> <img ... border= "0" />

不能最小化属性值对。不允许单独属性（也称为最小化的属性）。例如， <option selected> 不再有效了。而您必须使用 <option selected="selected"> 。

内联标记不能包含块级别标记。例如，锚点标记不能括起表。

脚本编制元素引起了 XHTML 兼容性问题。XML 解析器将脚本解析成 XML 文档，除非您将脚本封装入 CDATA 块中。因此，JavaScript 元素现在将类似于： 

												
														
<script type="text/javascript">
<![CDATA[ alert("hello"); ]]>
</script>

这对于大多数的当前浏览器来说，可能都有问题，因为它们不喜欢 CDATA 块。目前，唯一的解决方案是从外部文件调用 JavaScript。例如：

												
														
<script language="JavaScript" type="text/javascript" src="main.js"></script>

对于服务器端程 序员，当动态修改 JavaScript 时，这会产生问题。对您的 JavaScript 使用独立的文件源会阻止您动态地更改 JavaScript。因为 JavaScript 包括在客户机端，所以服务器端不能接触到它。当使用 ASP、JSP 或 PHP 脚本编制修改 JavaScript 时使用脚本声明的标准 HTML 方法。这正是在使 JSP 或 ASP 100% 与 XHTML 兼容时最可能产生问题的地方。不过，请记住，目的并不是与 XHTML 100% 兼容，而是在可行的情况下开始结合 XHTML，使得需要时允许快速和简单的过渡。那时，应该可以使用新的兼容浏览器，您将开始跨越到 100% 兼容性。


回页首


代替 CHTML 和 WML 的 XHTML Basic

对于想创建网站移动版本的开发人员来说，根本问题是他们当前必须用 HTML 将页面格式化以便进行桌面浏览，对于 WAP 设备，可以用无线标记语言（Wireless Markup Language (WML)）；对于 iMode 设备可以用压缩 HTML（Compact HTML (CHTML)）。这已经产生了一个新的行业，致力于将现有的网站转换成 WML 或 CHTML。WML 基于 XML，并且取代了快过时的手持设备标记语言（Handheld Device Markup Language (HDML)），而 CHTML 是基于 HTML 的。虽然这些标记语言很相似，但它们之间的区别使得 WAP 和 iMode 设备都不能看见 Web 页面。而所有设备都将理解 XHTML Basic，并且它将成为一种通用标记语言。

可以获取多种格式的完整 XHTML Basic 英文规范（请参阅 参考资料），这些格式包括 HTML、纯文本、PostScript 和 PDF。可以预见 XHTML Basic 代替诸如 HDML 和 WML 的语言将是不可避免的。但是，重要的是记住 WML 和 HDML 还定义 操作和内容。目前，这些在 XHTML 中还没有等价定义。因此，至少在短期内，WML 和 HDML 将不会消失。看谁会最终胜出将很有意思。在某种程度上计划支持所有这三种标记语言。





回页首


XHTML 中的未来工作

XHTML 中仍在开发的一方面是 设备概要， 也称为复合能力首选项概要文件（Composite Capability Preference Profiles (CCPP)）。CCPP 允许诸如移动电话之类的设备向 Web 服务器标识自己、描述其限制并只下载其能够显示的信息。因为可以将 XHTML 文档分割成能够被单独下载的多个模块，所以 CCPP 能起作用。

W3C 正在与 WAP Forum 等合作开发 CCPP。2001 年夏季，开始 XHTML 2.0 开发，它是结合 HTML 和 XML 的最后一步。XHTML 2.0 是前瞻性的，因为它是几种 XML 技术的结合体，例如 XLink、XPointer、XPath 和 XInclude ― 所有这些技术当前处于开发过程中或者最近由 W3C 发布（请 参考资料中的路标）。





回页首


结束语

XHTML 开辟了 Web 的新领域，为作者提供了在其 Web 页面上混合和匹配各种基于 XML 的语言和文档的方法。它还为非传统 Web 访问设备（从烤箱到电视机）提供了框架以向 Web 服务器标识它们自己及其能力，只要下载那些设备能显示的信息。多亏有了 XHTML，您可以继续使用您已经熟悉和喜爱的 HTML 编写。可能只需要稍微整理一下。我猜测 XHTML 2.0（请参阅 参考资料）将具体地整理 HTML 标记及其用法。

总之，XHTML 简化了可以让各种新设备浏览的文档的创建。另外，经过少许学习，您可以创建比以往功能强大得多的页面。最后，XHTML 是通向 XML ― 因特网的未来语言的桥梁。





回页首


参考资料





回页首


关于作者

author

Sathyan Munirathinam 拥有 Madurai Kamaraj 大学计算机科学学士学位和计算机应用硕士学位。作为 Aztec Software 的一名软件工程师，他有两年多的信息技术工作经验。他的专业兴趣是数据库系统和联网，他的个人兴趣是阅读技术期刊，入侵网络系统和打板球。可以通过 sat_hyan@yahoo.com与他联系。




Vincent Chen 2006-03-18 20:51 发表评论
]]>实用数据绑定: 使用 XPath 作为数据绑定工具，第 1 部分：使用 XPath 选择 XML 文档部分http://www.blogjava.net/Vencent/articles/35972.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 12:47:00 GMThttp://www.blogjava.net/Vencent/articles/35972.htmlhttp://www.blogjava.net/Vencent/comments/35972.htmlhttp://www.blogjava.net/Vencent/articles/35972.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35972.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35972.html级别: 中级

Brett McLaughlin, 作家，编辑, O'Reilly Media, Inc.

2005 年 12 月 22 日

通 常人们不把 XPath 看作是一种数据绑定 API。除了作为其他规范的一部分以外，XPath 甚至还没有引起 XML 世界的过多关注。但是只要真正理解了 XPath 是什么以及如何使用它，特别是在 Java™ 编程环境中，它就会成为一种强大的数据绑定工具，常常优于传统的数据绑定 API 如 JAXB 或 JaxMe。Brett McLaughlin 的 “实用数据绑定” 专栏首先用两期文章探讨了作为数据绑定工具的 XPath。

到目前为止，本专栏一直专注于数据绑定的传统定义和用法：将 XML 文档转换成 Java 表示并用于通常的 Java 方法中（比如 getName() 和 setAddress()）。 然后将 Java 对象再转换成 XML 表示，通常序列化（保存）到磁盘。我还讨论过另一种方向的转换，即把 Java 对象转换成 XML， 然后使用转换的 XML（可以通过网络连接发送出去，或者作为应用程序中另一个消费 XML 的组件的输入）。这都是非常有效和实用的数据绑定的用例，但是还没有包括所有的可能性。本文和下一期文章将介绍另一种方法，即使用 XPath 技术进行数据绑定。

如果您使用数据绑定很长时间了，通常会提供一个约束集（比如 XML 模式或 DTD），用 API 生成表示该约束集的类。然后使用这些类加载 XML 数据，将其中的数据序列化为 XML。这是一种完善的解决方案，但是并非惟一的不使用 SAX 或 DOM 等底层 API 从 XML 文档中读取数据的方法。XPath，您可能听说过这种规范，就是另一种方法。即使您没有 听说过 XPath，也可能在某些时候已经用到过它。通过本文，您将了解 XPath 是什么，知道如何使用它，看看它为什么像一种数据绑定 API，甚至可以漂亮地完成其他数据绑定任务很难实现的工作。

总是为他人作嫁衣……

XPath 是最常用而不为人知的 XML 技术之一。它实际上是最 常用的 XML 技术 —— XML 转换必不可少的组成部分。在将来的 Web 中它也起着重要的作用，因为它对 XLink 和（特别是） XPointer 至关重要。甚至 XForms 也暗中要用到它。

那么人们为什么不把 XPath 看作一种独立的技术呢？很大程度上是因为其他语言中独立处理 XPath 的 API 还刚刚出现。但是如果使用过 XSLT 或 XPointer，或者处理过更先进的 XML Schema，那么您可能已经走到前面了。

XPath 在 XSLT 中的作用

如果使用过 XSLT，几乎可以肯定曾经看到过 XPath 而且至少在一定程度上看着面熟，即使您并没有意识到。看一看 清单 1，这是一个非常简单的 XSL 样式表的一部分。


清单 1. XSL 样式表中的 XPath 
												
														

														
<xsl:template match="address">
 <h1>Addresses</h1>
 <hr />
 <table>
  <tr><th>Street</th><th>City</th><th>State</th><th>Zip Code</th></tr>
  <xsl:apply-templates select="address" />
 </table>
</xsl:template>
<xsl:template match="address" />
 <tr>
  <td><xsl:value-of select="street" /></td>
  <td><xsl:value-of select="city" /></td>
  <td><xsl:value-of select="state" /></td>
  <td><xsl:value-of select="zipCode" /></td>
 </tr>
</xsl:template>

比方说，当您看到 select="address" 或者 select="zipCode" 的时候，您看到的就是应用中的 XPath。包围在引号中的文本就是 XPath 表达式，尽管非常简单，要让样式表工作却是不可或缺的。

实际上，即使编写最简单的 XML 转换，如果样式表中没有 select 会怎么样？根本不可能！这是因为 XPath 是 XML 转换从而也是 XSLT 的完整的一部分。如果您认为自己是一位 XSL 专家，您可能比自己认为的更熟悉 XPath。

XPointer 中的 XPath

XPointer 是另一种大量使用 XPath 的 API，尽管不像 XSL 那么常用，但是也逐渐展露头角。清单 2 展示了一篇文档中指向另一篇文档的链接。


清单 2. XPointer 上下文中 XPath 的用法 
												
														

														
<link xmlns:xlink="http://www.w3.org/2000/xlink" 
      xlink:type="simple" 
      xlink:href="cd.xml#xpointer(
      /cds/cd[@title='August and Everything After'])">

要考虑的一些问题

注意指向 XML 文档的一部分的 XPath 代码例子。XPath 表达式没有涉及到元素或属性，而是直接包含对这些 XML 结构名称的引用。这应该让您想起数据绑定。

这是一段稍微复杂的 XPath。它选择了根元素 cds 中的 cd 元素，该元素有一个 title 属性等于 August and Everything After，这些内容都在 cd.xml 文档中。讨论这些似乎有点为时过早，但是先不要担心语法。关键是要看到 XPointer 和 XSL 一样大量使用了 XPath，事实上没有它 XPointer 就无法存在。再说一次，XPath 是用于选择数据的重要组件。

在 XForms 中使用 XPath

XForms 是一种相对较新的 XML 技术，比不上 XSL 普及，甚至还比不上 XPointer 或 XLink。但是仍然值得提一下，因为它在 input 元素的 ref 属性中使用 XPath 表达式。可以设置一个 input 并将其绑定到 XML 文档中的特定元素（或属性），如 清单 3 所示。


清单 3. XForms 组件使用 XPath 引用绑定到表单的 XML 文档 
												
														

														
<input ref="xhtml:html/body/xhtml:p[@id='greentea']/
   xhtml:description" />

清单 3 中的 XForms 语句将输入控件绑定到 XHTML 文档的特定元素。在这里 XPath 同样是指定具体元素的关键。后面将提到它允许使用一些非常高级的选择条件。

在很大程度上 XForms 是一种尚未得到支持的技术，但是当使用 XForms 的时候，现在学习的 XPath 是一种很好的工具。将这些关于 XSL、XLink 和 XInclude 的知识结合起来就够了！


回页首


选择内容：基础

现在您已经确信 XPath 非常有用而且无处不在了，下面开始学习语法吧。如果刚接触 XPath，本课程将帮助您开始学习和领会 XPath 的结构。如果是一位 XSL 或 XLink 和 XPointer 老手，也可了解为什么 要构造那些奇怪的路径。您可能已经知道获取感兴趣的数据的其他方法，也许是更好的方法。

首先要认识到称 XPath 为一种语言有点过于郑重其事。它实际上是选择和处理 XML 文档中的内容的一种语法。即使在 XPath 中使用的函数和运算符也都与选择有关。在 XPath 中不会创建变量，比方说不可能运行 一个 XPath 程序。没有这些东西。如果您开始认识到 XPath 是一种巧妙的、有益的选择 XML 元素和属性的方法，然后使用选择的值，您就已经领先于大多数 XML 开发人员了。XPath 不是要对 XML 做 什么事情，而是要从 XML 中取得一些内容。

选择元素

设置上下文

设置上下文不是 XPath 的工作。事实上，根本不能 用 XPath 设置上下文。相反，要用其他使用 XPath 在文档中导航的 API 来设置上下文。比如，XSLT 根据应用的模板设置上下文，XForms（一般来说）每次都从根上下文开始。因此理解上下文更多的是需要了解使用 XPath 的 API，而不是 XPath 本身。

对于 XPath 来说第一步是找到一个引用元素的句柄。可是在选择元素之前需要理解当前上下文。上下文就是在 XML 文档中的位置。比方说，您可能在根元素上，那根元素就是上下文。当然也可能在第一个 person 元素的第二个 address 元素上。在开始移动和选择内容之前，需要知道上下文。

只要理解了上下文，就可以掌握 XPath 语法了。以 清单 4 中的 XHTML 文档为例。


清单 4. Head First Lounge 的 XHTML 
												
														

														
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; 
        charset=ISO-8859-1" />
    <title>Head First Lounge Elixirs</title>
    <link type="text/css" rel="stylesheet" href="../lounge.css" />
  </head>
  <body>
    <h1>Our Elixirs</h1>
    <h2>Green Tea Cooler</h2>
    <p class="greentea">
     <img src="../images/green.jpg" alt="Green Tea Cooler" />
     Chock full of vitamins and minerals, this elixir
     combines the healthful benefits of green tea with
     a twist of chamomile blossoms and ginger root.
    </p>
    <h2>Raspberry Ice Concentration</h2>
    <p class="raspberry">
     <img src="../images/lightblue.jpg" 
         alt="Raspberry Ice Concentration" />
     Combining raspberry juice with lemon grass,
     citrus peel and rosehips, this icy drink
     will make your mind feel clear and crisp.
    </p>

    <h2>Blueberry Bliss Elixir</h2>
    <p class="blueberry">
     <img src="../images/blue.jpg" alt="Blueberry Bliss Elixir" />
     Blueberries and cherry essence mixed into a base
     of elderflower herb tea will put you in a relaxed
     state of bliss in no time.
    </p>
    <h2>Cranberry Antioxidant Blast</h2>
    <p>
     <img src="../images/red.jpg" alt="Cranberry Antioxidant Blast" />
     Wake up to the flavors of cranberry and hibiscus
     in this vitamin C rich elixir.
    </p>
    <p>
     <a href="../lounge.html">Back to the Lounge</a>
    </p>
  </body>
</html>

如果在 清单 4 中的上下文是 html 元素，就可以直接使用名称选择一个子元素。比如选择 body 元素可使用 XPath 表达式 body。如果想访问嵌套在 body 中的 h1 元素则使用 body/h1。如果认为这有点类似于目录路径，那么就对了。选择元素使用 元素名/子元素名 这样的形式。

不过在前进之前要认识到 XPath 表达式可能返回多个 元素。结果元素集称为节点集。（事实上，用 XPath 选择的所有实体 —— 元素、属性和值 —— 都称为节点。）比如下面的路径：

												body/p

清单 4 中 body 有五个不同的 p 子元素，因此那个表达式返回包含五个节点的节点集（正如您所期望的，不 只是第一个 p 元素）。注意，有时候您得到了预期的结果，但是很可能比您打算 要求的多。

还有更多需要注意的地方。现在给出的表达式仅仅返回实际的元素。可能还要获得这些节点的值。如果需要元素的值（假设元素包含文本数据），需要使用 text() 函数。要获得第一个 h1 的文本，应使用 body/h1/text()，对于清单 4 将返回 Our Elixirs。

选择属性

当然可以选择的不仅仅是元素。前面已经提到还可以选择属性。选择属性的时候要在属性名前使用 @ 符号，其他方面和元素都一样。

再回到 清单 4 这个例子，可以使用 head/meta/@http-equiv 返回 meta 元素 http-equiv 属性的值。类似地，head/link/@type 返回 link 元素的 type 属性。

必须知道，选择属性的时候您得到的是它的值，而不像元素那样返回节点。因此对于属性选择器，返回值（虽然不确切但是很有用）是一个值，对于一个元素则是一个节点集（包含一个节点）。

在文档中移动

目前为止看到的都是理想的情况，特别是使用文档的根作为上下文比较简单。但是显然情况并非总是如此。这正是目录结构的真正有用的地方。要从当前上下文移动到上一级，只要使用 .. 运算符。比方说，假设上下文是 body 元素，现在需要获得网页的标题（包含在文档 head 下的 title 元素中），可以使用 ../head/title/text()。如果您开始感觉到就像是改变 UNIX 或 Mac OS X 终端上的目录，这就对了！

如果上下文是 body 中第二个 p 的 img 元素，要得到标题该怎么办呢？可以使用 ../../../head/title/text()。但是数这些 ../ 很快就变得单调乏味了。因此能直接跳到根元素就好了，再想一想 UNIX，使用 / 返回到根元素就毫不奇怪了。同样的选择器更简单的形式为 /html/head/title/text()。虽然没有缩短，但是更清楚了。有了 ../ 和 / 之后，基本上就能移动到需要的任何地方了。

多重选择

考虑到使用一个 XPath 表达式可以选择多个节点，事情就更有趣了。您可以使用对应多个节点的简单表达式，比如 /html/body/h2 来进行多重选择。但是也可使用通配符 进一步精化这些选择。XPath 中有三个统配符：

  • * 与任何元素匹配，无论元素名是什么
  • node() 与所有的节点类型匹配（元素、文本节点、注释、属性，等等）
  • @* 与所有的属性节点匹配，无论属性名是什么

比如，可以使用 /html/body/* 选择 body 元素的所有直接子元素。也可用 /html/head/meta/@* 选择 meta 标记的所有属性。

所有这些情况下，要记住您得到的是一个节点集，因此不应该满足于处理某个值就结束（除非您已经选择了一个属性，稍后要讲到）。但是，只要使用方法、函数或模板处理多个节点，这些技术就很重要。


回页首


更有趣的东西

基本的东西很好，但有时候还需要点特别的让您身边的同事眼花缭乱的东西，或者需要一点特殊的 功能。这种情况下这些基础可能就不够了。虽然很难巨细无遗地介绍 XPath，但下面给出一些高级技巧，可以帮助您在 XPath 应用程序中取得需要的节点（或节点集）。

更大的一般性

到目前为止，看到的路径都是选择一个节点，并假设您知道该节点在何处。比方说，您知道 title、img 或 p 在文档中什么位置，只需要导航到这些元素。但有时候可能希望打破这些结构，仅仅撷取某种元素而不管其位置（或者无论给定的起始上下文的位置）。为此可使用后代选择器。

后代选择器用双斜线 // 表示。使用它告诉 XPath 选择所有指定的节点，无论嵌套得多深。比如这个简单的特定于 XHTML 的 XPath：

												/html/body//table

XPath 选择嵌套在 XHTML 的 body 元素中的所有table 元素，不论直接嵌套在 body 中（如 /html/body/table），还是嵌套了多层（如 /html/body/table/tr/td/table）。这种情况下，嵌套的 table 和顶层 table 同时被选中。

不是很合 XML 的风格

在标准 XML 术语中，属性不属于 元素，而是与元素关联，有时候也说在元素上。但是，XPath 不能处理元素及其属性之间的关系。因此只能尽自己最大的努力：将属性看作是属于它们所在的元素。因此选择 p 的 class 属性要使用 p/@class。要访问属性所在的元素，可使用 @class/..。实际上是从属性上移 一层而选择元素。从技术上说这不是很好的 XML，但却是完全正确的 XPath。

当与属性结合使用的时候就变得很有趣了（使用 @）。比方说，假设要选择具有 id 属性的所有元素。可使用 //@id，首先跳回根元素然后选择文档中的所有 id 属性。但是实际上要访问的是元素而不是属性，因此需要从属性上移一层到包含这些属性的元素：

												//@id/..

您应该尝试结合这些不同的方法，会看到一些很有意思的结果。

匹配条件

假设有一个条件希望作为匹配的基础，比如需要 class 属性值为 greentea 的 p 元素。如果知道如何使用方括号，这一点在 XPath 中很容易做到。下面是一个例子：

												
														
/html/body/p[class="greentea"]

方括号用于指定条件，可使用 = 甚至 < 和 >。也许要用一个范围更广的表达式：

												
														
//p[class="greentea"]

明白了吗？甚至还能更进一步，选择属于 greentea 类的所有 元素而不论其元素类型是什么：

												
														
//@class[.="greentea"]/..

这个表达式可能看起来有点奇怪，但很容易解释。首先，// 意味着从根元素开始选择所有的元素（与后面的选择器及条件匹配）而不论其嵌套的位置。然后 @class 选择文档中所有的 class 属性。后面的 [.="greentea"] 有点神秘。="greentea" 部分容易理解，它用 greentea 匹配等式左侧的值。在这里就是 .，这个标志还没有见到过。但是再想一想目录，.. 选择父节点（或者父目录），. 则选择当前节点。因此 //@class[.="greentea"] 选择值为 greentea 的所有 class 属性。然后再移动到这些属性所在的元素：

												
														
//@class[.="greentea"]/..

现在看起来有点不可思议，但是应该熟悉这类奇怪的表达式。当需要访问特定的元素、属性或节点集时它们很有用。

计算

随着越来越多的使用属性选择器，最终将与处理节点一样经常地使用值（来自属性）。如果处理过非常典型的 XML，一定会遇到数字。XML 文档常常把数字值放在属性中（有时候在元素中）。因此这一节讨论 /people/person[firstname = "John"]/@born 和 /people/person/numChildren/text() 这类表达式的结果（当然，使用元素表示子女的个数不够典型，不过就用下面的例子吧）。

这时候您会发现 XPath 的计算能力很有用。可以像其他编程语言中那样使用 +、- 和 *。此外 div 用于除法，mod 则表示求模（两数相除的余数）。比如，假设 XML 文档中包含用四位数表示的出生年份，现在需要改成两位数的形式，首先用下面的表达式取得实际的出生年份：

												
														
/people/person/birthdate/@year

这样就得到了出生年份（可能是 1976 或者 1945）。然后只需要减去 1900：

												
														
(/people/person/birthdate/@year) - 1900

当然这种方法很有限，新千年出生的孩子和那些历史人物都会造成这一公式的失败。因此应该用 mod： 

												
														
(/people/person/birthdate/@year) mod 100

（顺便说一下，应该告诉那些研究 Y2K 的人您省略了年份的前两位数。）

字符串技巧

最后，XPath 还提供了一些很棒的字符串处理功能。XML 基本上都是文本，属性值和元素中的数据通常是文本，因此不用奇怪 XPath 支持某些字符串操作。下面仅仅是 XPath 提供的处理字符串的少数函数：

  • string() 将数据转换成字符串格式，如果还不是字符串的话。
  • starts-with(full-string, start-string) 返回一个 Boolean 值，检查 full-string 是否以 start-string 开始。
  • contains(full-string, contains-string) 返回一个 boolean 值，检查 full-string 是否包含 contains-string。
  • string-length(string) 返回 string 的长度。
  • normalize-space(string) 去掉 string 两端和内部的空格。

大部分函数的功能都很明确。starts-with("McLaughlin", "Mc") 返回 true，contains("McLaughlin", "augh") 同样如此。string-length("Brett") 显然返回 5，normalize-space(" Brett McLaughlin ") 则返回 "Brett McLaughlin"。是不是很简单？当然这些可用于所有 XPath 表达式的返回值，比如 /html/body/p[class='greentea']。因此要获取 清单 4 中 p 的文本可用 normalize-space()：

												
														
normalize-space(/html/body/p[class='greentea'])

更妙的是可用 string() 取出多个元素的文本。比如，如果希望取得 清单 4 所示 XHTML 中所有p 元素的所有 文本，可用：

												normalize-space(string(//p))

分析最后一个例子可以了解很多内容：

  1. //p 选择文档中所有的 p 元素，无论其位于何处。
  2. string(//p) 获取这些元素的内容组成一个大字符串。但是字符串中包含很多无用的空白，因此还要进一步处理。
  3. normalize-space(string(//p)) 规范化内容中的空白字符，得到您希望的文本。


回页首


这是一篇关于数据绑定的文章吗？

现 在您可能已经忘记正在阅读的是一篇关于数据绑定的文章。但是先不要忙于跟过去几年中您读过的其他 X* 文档和 API 比较。您读到的实际上是另一种数据绑定方法。考虑这样一种观点，数据绑定是在 Java 代码中保留 XML 文档逻辑（或者语义，如果您喜欢的话）意义。如果 XML 文档中的 address 元素包含 street、city 和 state 子元素，想要用 getAddress().getStreet() 这样的形式得到这些元素的值，比如：

												
														
Address address = getAddress();
System.out.println(address.getCity() + ", " + address.getState());

这就是某种基本的数据绑定形式。但是在 XPath 中也能做到同样的事！可以利用 address/street/text() 或者 /person[last-name="Gosling"]/address[@type="work"]/city 这样的 XPath 表达式来得到街道名。初看起来与前一个例子不同，但是它仍然合理地使用了 XML 数据，您要的是 person、address 和 street 而不是第一个子元素、第二个文本节点 或者属性。这一点至关重要。XPath 按照逻辑而不是结构来处理 XML。基本上数据绑定也是如此，按照逻辑处理数据，而不用担心其结构。

为了避免误导，需要指出使用 XPath 仍然需要对结构有所了解。比如，@ 运算符只用于属性，因此必须知道 type（地址的一部分）用元素还是属性表示。在传统的数据绑定中，只需要调用 getAddress().getType() 而不需要管结构的层次。但是，这点小小的代价是值得的，因为不需要处理大量的生成类、额外的类路径问题、等待封送和解除封送处理以及传统数据绑定的其他缺点。

只 剩下这个等式中需要在 Java 语言中增加的部分：接受 XML 文档和 XPath 表达式，以 Java 友好的方式获得表达式的结果。这些内容将在第 2 部分介绍，很快就要把 XPath 与 Java 编程中其他以 XML 为中心的工具一起使用了。很多情况下您会发现，与使用生成类和 JAXB 这样的 API 的工具相比，XPath 是一种更好的 数据绑定工具。


回页首


参考资料





回页首


关于作者

Brett McLaughlin 的照片

Brett McLaughlin 从 Logo 时代就开始使用计算机。（还记得那个小三角吗？）近年来他已经成为 Java 技术和 XML 社区最知名的作家和程序员之一。他曾经在 Nextel Communications 实现过复杂的企业系统，在 Lutris Technologies 编写应用程序服务器，最近在 O'Reilly Media, Inc. 继续撰写和编辑这方面的图书。在他的新书 Head Rush Ajax 中，Brett 与畅销书作家 Eric 及 Beth Freeman 为 Ajax 带来了获奖的创新方法 Head First。最近的著作 Java 1.5 Tiger: A Developer's Notebook 是关于这一 Java 技术新版本的第一本书籍，经典著作 Java and XML 仍然是在 Java 语言中使用 XML 技术的权威图书。



Vincent Chen 2006-03-18 20:47 发表评论
]]>HTML 的未来，第 1 部分: Web Hypertext Application Technology Working Group 改进 HTML 的方法http://www.blogjava.net/Vencent/articles/35971.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 12:46:00 GMThttp://www.blogjava.net/Vencent/articles/35971.htmlhttp://www.blogjava.net/Vencent/comments/35971.htmlhttp://www.blogjava.net/Vencent/articles/35971.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35971.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35971.html级别: 初级

Edd Dumbill, 主席, XTech Conference

2005 年 12 月 29 日

本 系列包括两篇文章，Edd Dumbill 分析了 Web 作者、浏览器开发人员和标准组织所期望的 HTML 未来趋势各种方式。介绍了 WHATWG 阐述的渐进式方法和 W3C 所提议的 XHTML 的大清洗式的方法。此外，作者还考察了 W3C 最新的 Rich Client Activity。本文是第 1 部分，Edd 主要讨论 WHARWG 开发的两种规范：Web Applications 1.0 (HTML5) 和 Web Forms 2.0。

HTML 不是一种很好的制作网页的语言。但却是形成 Web 的一种很好的语言。

HTML 易学易用，再加上浏览器的 查看源代码 功能，引发了 Web 令人瞠目结舌的迅速普及。万维网联盟（W3C）对 HTML 标准化的参与，保证了所有的 Web 浏览器都或多或少地实现了同样的方言。CSS 的出现，作为最佳实践的基于标准的 Web 设计的普及也改变了 HTML 的混乱状态，同时为用户和开发人员带来了更好的 Web 体验。

您可能已经了解这些。结果是 Web 可能已经对您的生活或生意带来正面的影响。但事实仍然是 HTML 并不是一种很好的语言。比方说，为什么 HTML 要设置 H1 到 H6 这些标题？谁会使用包含六层的标题结构？为什么在这个 3D 图形加速卡和复杂用户界面的时代，Web 页面却要让用户用笨拙的文本框和单选按钮来输入？

因此毫不奇怪，各种不同的组织再次迫切地要求改进 HTML，使 Web 发布和 Web 应用程序使用现代用户界面提供的更多技术。这些人有谁呢？粗略地说可分为三类。首先是利用现有技术进行改造的那些人。这就是 Asynchronous JavaScript and XML (Ajax) 所宣扬的：使用 JavaScript 和浏览器 XMLHttpRequest 对象建立动态的用户界面。取得的效果是惊人的，但这不是进步的标准方式。

另外两类人关注未来的改进。W3C 根据各种供应商（不仅仅是桌面浏览器制造者）的需要，提出了 XHTML 2.0。XHTML 2.0 被看作是革命性的一步。相反，Web Hypertext Application Technology Working Group (WHATWG) 则提出了一套递增式的规范，改进 HTML 从而为浏览器增加了最迫切需要的功能。一些 WHATWG 特性已经在 Apple 的 Safari 浏览器和 Mozilla Firefox 1.5 中实现了。（关于 W3C 和 WHTAWG 的更多信息请参阅 参考资料。）

这两期文章将讨论 W3C 和 WHATWG 的工作。Ajax 已经在 developerWorks 的其他文章（请参阅 参考资料）中讨论过了。虽然还没有引起最初 HTML 引入 W3C 时所爆发的大规模的标准之争，但这两个组织对 HTML 走向何方并非总是一致的。我将解释和评论这两种方法。

WHATWG、HTML 5 和 Web Forms 2.0

就像其网页上所宣称的那样，WHATWG 是 “Web 浏览器生产厂商和一些相关团体形成的一个松散的、非正式的协作组织，这些团体希望发展一些新的技术，从而开发人员可以在互联网上编写并部署应用。这里有两点特别值得关注：WHATWG 的主要参与者是浏览器（Mozilla、Opera）制造商，他们改进的目标是创建 Web 应用程序。

WHATWG 的标志性规范的代号是 HTML5，但更为人所知的名称是 Web Applications 1.0（请参阅 参考资料）。HTML5 的目标是保持和当前 HTML 标准 HTML 4.01 以及 HTML 的 XML 版本 XHTML 1.0 向后兼容。该规范继续了 W3C HTML 所致力的 HTML 和 XHTML 的融合，虽然它提出实现的方法可能不同。

除了 HTML5，Web Forms 2.0 规范（请参阅 参考资料）也寻求解决开发人员对当前 HTML 表单的不满之处。目前的表单省略了普通桌面应用程序的很多基本特性，比如验证和更丰富的小部件。

那么 HTML5 中有什么呢？一句话，很多。Web Applications 1.0 规范仍然在演化之中，提到的有些特性比另一些开发得更完善。下面是对这些新特性的简要说明：

  • 新的布局元素，包括日历控件、地址卡、灵活的数据网格、标尺和进度条、拖放、菜单
  • 对文档对象模型（DOM）的编程扩展，包括服务器发送的 DOM 事件
  • 事实标准 XMLHttpRequest 对象的正式化，它是 Ajax 通信的核心
  • 基于 canvas 元素的动态位图图像

可以看到其中很多源自目前 Web 上用 JavaScript 一次性实现的特性。事实上，最近 Ajax 工具箱的流行已经引起了标尺、日历等控件的泛滥。


回页首


画布

HTML5 特性（即 Web 浏览器的一部分）的传统实现目前还仅限于上述少数技术。其中最知名的是 canvas 元素。Firefox 1.5 和 Apple 的 Safari 浏览器也实现了 canvas。

虽然 W3C 的 Scalable Vector Graphics (SVG) 语言已经提供了在浏览器中显示图形的一种方式，但 canvas 采用了不同的方法。不是像 SVG 那样实现一种声明性文档，它提供了一个空白面供 JavaScript 在上面绘图。这种命令式的绘图模型更类似于 OpenGL 风格的绘制，而不是声明性的 Web。

图 1 显示了一个简单的 canvas 示例的截屏图。（请参阅 参考资料，可用 Apple 的 Safari 浏览器或 Firefox 1.5 的预览版来查看。）当用户把鼠标移到该图形上时，图形慢慢地放大。这个例子表明，实现用户界面需要的所有成分 ——绘制、用户输入事件和定时器 —— 都已经就位。


图 1. 交互式画布示例的截屏
交互式画布示例的截屏

通过实现一个简单的 3D 迷宫，canvas 应用程序已经离最明显的目标（游戏！）只有一步之遥了，如 图 2 所示。（实际的迷宫请参阅 参考资料。）


图 2. 简单的迷宫游戏
简单的迷宫游戏

为了了解如何对 canvas 编程，请看一些简单的代码。清单 1 显示了一个很容易理解的例子，它的结果如 图 3 所示。


清单 1. 简单的 canvas 例子 
												
														

														
<html>
  <head>
    <title>Canvas demo</title>
    <script type="text/javascript">
      function draw () {
        var canvas = document.getElementById ('hello');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
          ctx.fillRect (25, 25, 50, 50);
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 2px solid red; }
    </style>
  </head>
  <body onload="draw ();">
    <canvas id="hello" width="100" height="100"></canvas>
  </body>
</html>


图 3. 清单 1 的结果
清单 1 的结果

因为 canvas 没有提供任何声明性语义，很可能更多地用于用户界面实现领域而不是其他方面。canvas 令人感兴趣的一点是作为新的浏览器界面元素和特性的原型基础。最好的例子是 Antoine Quint 使用 canvas 部分实现了 SVG（请参阅 参考资料）。使用 Quint 的方法，要呈现内嵌 SVG 的 HTML 文件，可以增加两行代码导入其 JavaScript SVG 呈现引擎。图 4 显示了使用该方法呈现的类似的老虎图像。


图 4. 使用 JavaScript 和 canvas 元素呈现的 SVG 老虎图像
使用 JavaScript 和 canvas 元素呈现的 SVG 老虎图像

时间将证明 canvas 是否会成为主流的 Web 设置。它的功能和 Java applet 有些类似，但是其 JavaScript 接口更容易使用，也更容易与其他浏览器元素交互。


回页首


Web Forms 2.0

WHATWG 表单规范的版本号表明它的目标是以 HTML4 中的表单规范为基础。与 Web Applications (HTML5) 规范不同，这是个成熟的规范。Web Forms 2.0 的范围也更狭窄，仅仅着眼于改进浏览器中提供的表单控件。

这次对表单的修订增加了什么呢？其中包括：

  • 验证结构允许浏览器在提交表单前做更多的检查。新的属性，包括 required、min 和 max。
  • 验证的 DOM 支持，为表单元素增加了 validity 属性和新的 invalid 事件。
  • 对表单元素自动完成的控制，允许文档作者指明是否让浏览器记住字段值并自动填充。预定义的值可通过 list 属性传递。
  • autofocus 属性指定加载文档时哪一个表单元素拥有输入焦点。
  • inputmode 属性允许对存放文本的表单元素提示适当的语言输入模式。
  • 文件上传控制的改进，可以指定文件类型，限制文件大小。
  • 模板化表单元素的循环。
  • 新的输入控件包括：datetime、number、range、email 和 url。增加了限制输入值的模式（pattern）。

Web Forms 规范比 HTML5 更加一致，已经出现了一些实现：

  • Opera 9 的 beta 版包括 Web Forms 2.0 支持
  • 开放源码 Web Forms 项目为 Internet Explorer 提供了 DHTML+Behaviors 实现

W3C 为下一代表单提供的答案是 XForms（请参阅 参考资料）。 XForms 和 Web Forms 2.0 不同，根据传递的 XML 文档开发了一种新的浏览器-服务器交互模型。相反，Web Forms 2.0 是对现有表单模型的改良，目的是使现在的浏览器表单更好用。这两种规范针对不同的需求，虽然存在明显的共同之处。正如 Web Forms 规范所指出的：

本规范尝试增加 XForms 的一些功能，并尽量减少对现有的、被广泛实现的表单模型的影响。如果需要，向后兼容、易于编辑、易于实现要优先于理论的纯粹性。


回页首


其他实现

canvas 是浏览器实现的主要 WHATWG 特性。HTML5 的其他部分仍然处在初级阶段，可能永远不会完全实现。

但是，Web Applications 和 Web Forms 规范可能显示出最初没有预料到的重要性。近几个月中，出现了一些功能全面的项目，用于为 Web 应用程序开发用户界面工具箱。这些实现使用 HTML 再加上 JavaScript 技术或者 Flash。其中多数可能已经认识到 “重新发明轮子” 是毫无意义的，开始考虑使 WHATWG 规范标准化，比方说其正式实现。


回页首


结束语

由于明显的需求和规范的完整性，Web Forms 2.0 规范很可能被实现并最终成为认可的标准。事实上 Web Forms 2.0 已经提交给 W3C 请求评论，就像是 WHATWG 合作者的资产负债表和构造块。

但是，仅仅根据 WHATWG 规范很难描绘 HTML 的未来。一些部分仅仅描述了当前的创新，如 XMLHttpRequest 和 canvas，其他部分似乎还很模糊，没有引起实现者的兴趣。此外，HTML5 的主要动机是桌面的、以应用程序为中心的应用。非 PC 设备上还没有大量使用 HTML，这也是需要发展的一个方向。

随着基于 Ajax 的浏览器界面工具箱的兴起，HTML5 中某些更深刻的想法可能已经过时了。既然有可扩展的工具箱使用，开发人员何必在文档中使用有限的一组控件呢？更丰富的 Web 界面更有可能通过市场而不是委员会而实现标准化。

我高兴地看到已经通常实现但还没有标准化的技术如 canvas 和 XMLHttpRequest 的进展，希望能够改进这些重要特性的互操作性。要使浏览器技术沿着自己的方向发展，HTML5 必须更加清晰，最好分为三个规范，分别描述目前、近期 和设想 的特性。


回页首


参考资料

学习

获得产品和技术




回页首


关于作者


Edd Dumbill 是 Web 和 XML 技术 XTech 会议的主席，Web 和 XML 技术的常设评论员和开放源码开发人员。


Vincent Chen 2006-03-18 20:46 发表评论
]]>让你的 XSLT 如虎添翼 -- 浅谈 XSLT 扩展http://www.blogjava.net/Vencent/articles/35970.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 12:45:00 GMThttp://www.blogjava.net/Vencent/articles/35970.htmlhttp://www.blogjava.net/Vencent/comments/35970.htmlhttp://www.blogjava.net/Vencent/articles/35970.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35970.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35970.html 马晨 , 软件开发专家

2006 年 1 月 16 日

其实 XSLT 能够做的事情很多，绝对超乎你的想象。除了格式转换，XSLT 还能完成一些看起来和格式转换完全无关的工作。比如说文件访问或者是数据库查询等等。而这一切都要归功于 XSLT 扩展（XSLT Extension）。

XSLT 是一种基于规则的格式转换语言。在许多人眼里,它的功能就是将一种格式的 xml 文件转换成另外一种格式的 xml 文件，仅此而已。不过，事实真是这样吗？

其实 XSLT 能够做的事情很多，绝对超乎你的想象。除了格式转换，XSLT 还能完成一些看起来和格式转换完全无关的工作。比如说文件访问或者是数据库查询等等。而这一切都要归功于 XSLT 扩展（XSLT Extension）。

根 据 XSLT 1.0 的规范，符合标准的 XSLT 引擎应该支持 XSLT 扩展。也就是允许用户自定义 XSLT 的扩展元素（extension elements）和函数(extension functions)。今天我们所看到的主流 XSLT 引擎都按照国际标准，提供了自己的扩展方式。而开源软件中的 saxaon 和 xalan，在这方面走得更远。

Saxon 和 xalan 都是基于 java 开发的 XSLT 引擎，为它们编写扩展自然也基于 java。一般只要以下 3 步就可以完成一个扩展了。

1. 编写一个 java 类，在这个类里面设计好扩展功能，并以静态方法的形式提供给XSLT 引擎调用。

2. 在 XSLT 文件中，声明一个自定义的命名空间（namespace）,该命名空间指出了类的位置

3. 在 XSLT 文件中，在适当的地方，调用扩展即可。

接下来让我们看个具体的例子。

foo_txt.xml 是一个待处理的 XML 文件，其中包含了<filename>和<content>两个元素。现在希望通过 XSLT 处理后，能将 <content> 的内容写入名称为 <filename> 的文件中。


图表 1:foo_txt.xml 
												
														
<?xml version="1.0"?>
<document>
	<filename>foo.txt</filename>
	<content>Hello,World!</content>
</document>

由于这里牵涉到针对文件的操作，因此这个任务必须通过功能扩展来完成。让我们对照着前文提到的 3 步法，来看看 saxon 是怎么来做的。


图表 2:foo_txt_saxon.xsl 
												
														
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"	
	xmlns:user="java:com.pear.utils.FileUtil">    

  	<xsl:template match="document">
		<xsl:value-of select="user:output(string(filename),string(content))"/>
  	</xsl:template>

</xsl:stylesheet>

图表 2

第一步，应该是提供用户编写的自定义java类。由于篇幅关系，这里不再给出源码，请看本文的参考部分，在那里提供了源码下载。

第二步，在XSLT文件开始，通过"xmlns:user='java:com.pear.utils.FileUtil'"命令，我们定义了一个命名空间。

最后，在处理XML节点的过程中，我们通过"user：output"成功地调用了用户自定义扩展函数。从而在XSLT中实现了文件写入功能。

看了saxon的做法之后，如果依样画葫芦的对xalan也来一遍，那么就太没意思了。幸亏xalan提供了一套更有趣的方法。

先直接看看xalan版本的处理文件吧。


图表 3:foo_txt_xalan.xsl


<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"        
	xmlns:xalan="http://xml.apache.org/xalan"
	xmlns:user="http://www.mac.home">

	<xalan:component prefix="user" functions="output">
	<xalan:script lang="javascript">      

		function output(filename,content)
		{
			var a=new java.io.PrintWriter(filename);
			a.print(content);
			a.close();
			return "Finished!";
      		}

    	</xalan:script>
  	</xalan:component>

  	<xsl:template match="document">
		<xsl:value-of select="user:output(string(filename),string(content))"/>
  	</xsl:template>

</xsl:stylesheet>

注意到它和saxon的版本有什么不同吗？对了，很明显，用户自定义的函数直接在处理文件中就实现了。而且是用javascript来完成的。那么好处在哪儿呢？答案很简单，就是开发人员可以抛开java的编译环境，直接设计自己的 XSLT 功能扩展了。

除了开发语言换成了javascript 外，其它流程和 saxon 的版本还是挺像的。所以就不再详细解释了。

不 过值得一提的是，光有javascript还是不够的。在 xalan 版本中，细心的人一定会发现，真正起作用的部分，实际上是一个名字为 PrintWriter 的 java 类。也就是说 javascript 实际上只是一个流程控制者，正是依靠着 java sdk 强大的类库，XSLT 才能如虎添翼，去完成不可能的任务。

那么是不是只有自己写扩展才能解决问题呢？答案当然是否定的。saxon和xalan早就为我们预制了很多公用的扩展功能。我们只要采用拿来主义就可以了。下面我以数据库扩展为例，进一步向你展示XSLT扩展的魅力。

采用 saxon 引擎时，我们引入了几个新的 XSLT 扩展元素，例如 sql:connect,sql:query。通过这些扩展元素，我们可以连接数据库，并执行查询。

比如在下例中，我们可以利用 saxon 提供的 sql 扩展去访问 Informix 数据库。步骤如下：首先我们利用sql:connect建立和数据库的连接，连接使用的参数预先已经定义好了。

其次，我们用sql:query进行查询。查询的字段和查询的条件，均以参数的形式出现。

查询成功之后，利用标准的XSLT元素进行格式解析，并生成HTML格式的表格。

最后，通过sql:close关闭连接。至此整个处理结束。


foo_sql_query.xml

<?xml version="1.0"?>
<query>
	<table>FOO</table>
	<columns>username,birthdate</columns>
	<condition/>
</query>


foo_sql_saxon_query.xsl
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                version="1.0"
                xmlns:sql="java:/net.sf.saxon.sql.SQLElementFactory"
		xmlns:saxon="http://saxon.sf.net/"
                extension-element-prefixes="saxon sql">  

<xsl:param name="driver" select="'com.informix.jdbc.IfxDriver'"/>
<xsl:param name="database"
select="'jdbc:informix-sqli://192.168.0.1:5000/testDB:
INFORMIXSERVER=pcsnet;user=pcs;password=abc'"/>  
<xsl:param name="user" select="'pcs'"/>
<xsl:param name="password" select="'abc'"/>


<xsl:template match="/">
	<xsl:variable name="connection" as="java:java.sql.Connection"
	xmlns:java="http://saxon.sf.net/java-type">
	<sql:connect driver="{$driver}" database="{$database}" user="{$user}" 
	password="{$password}"/>
	</xsl:variable>
        <HTML>
        <HEAD>
		Table of <xsl:value-of select="/query/table"/>
        </HEAD>
        <BODY>
		<TABLE border="1">
			<xsl:variable name="dbtable">
				<sql:query connection="$connection" table="{/query/table}"
				column="{/query/columns}"/>
			</xsl:variable>
			<TR>
				<xsl:if test="string-length(/query/columns)>0">
	  			<xsl:call-template name="getcolumns">
					<xsl:with-param name="columns" select="/query/columns"/>
				</xsl:call-template>
				</xsl:if>
          		</TR>
			<xsl:apply-templates select="$dbtable/row"/>
          		<xsl:text>
</xsl:text>
        	</TABLE>
      	</BODY>
    	</HTML>
	<sql:close connection="$connection"/> 
</xsl:template>

  <xsl:template name="getcolumns">
	<xsl:param name="columns"/>
		<xsl:if test="string-length($columns)>0">
		<TH>
			<xsl:choose>
				<xsl:when test="contains($columns,',')">
					<xsl:value-of select="substring-before($columns,',')"/>
				</xsl:when>
				<xsl:otherwise>
					<xsl:value-of select="$columns"/>
				</xsl:otherwise>
			</xsl:choose>
		</TH>
		<xsl:call-template name="getcolumns">
			<xsl:with-param name="columns" select="substring-after($columns,',')"/>
		</xsl:call-template>
		</xsl:if>
  </xsl:template>

  <xsl:template match="row-set">
	<xsl:apply-templates select="row"/>
  </xsl:template>

  <xsl:template match="row">
        <TR>
          <xsl:apply-templates select="col"/>
        </TR>
  </xsl:template>

  <xsl:template match="col">
    	<TD>
      	 <xsl:value-of select="text()"/>
    	</TD>
  </xsl:template>
</xsl:stylesheet>

采用xalan引擎时，流程和saxon差不多，不过它还是使用扩展函数来完成数据连接和查询的功能。


foo_sql_xalan_query.xsl


<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                version="1.0"
                xmlns:sql="org.apache.xalan.lib.sql.XConnection"
                extension-element-prefixes="sql">  

<xsl:param name="driver" select="'com.informix.jdbc.IfxDriver'"/>
<xsl:param name="database" select=
"'jdbc:informix-sqli://192.168.0.1:5000/testDB:INFORMIXSERVER=pcsnet;user=pcs;password=abc'"/>  


<xsl:variable name="query">
	select <xsl:value-of select="/query/columns"/> from <xsl:value-of select="/query/table"/>
</xsl:variable>

<xsl:template match="/">
  	<xsl:variable name="connection"  select="sql:new($driver,$database)"/>
        <HTML>
        <HEAD>
		Table of <xsl:value-of select="/query/table"/>
        </HEAD>
        <BODY>
		<TABLE border="1">
			<xsl:variable name="table" select='sql:query($connection, $query)'/>
			<TR>
		        	<xsl:for-each select="$table/sql/metadata/column-header">
            			<TH><xsl:value-of select="@column-label"/></TH>
          			</xsl:for-each>
          		</TR>

  			<xsl:apply-templates select="$table/sql/row-set"/>

          		<xsl:text>
</xsl:text>
        	</TABLE>
      	</BODY>
    	</HTML>
	<xsl:variable name="close" select="sql:close($connection)"/> 
</xsl:template>

  <xsl:template match="row-set">
	<xsl:apply-templates select="row"/>
  </xsl:template>

  <xsl:template match="row">
        <TR>
          <xsl:apply-templates select="col"/>
        </TR>
  </xsl:template>

  <xsl:template match="col">
    	<TD>
      	 <xsl:value-of select="text()"/>
    	</TD>
  </xsl:template>
</xsl:stylesheet>

saxon和xalan都是通过jdbc连接数据库的，所以读者如果手头没有informix,只要更换不同的数据库驱动，以及对应的数据库连接参数，就可以在自己的机器上检验效果了。

以上的这些案例只是揭开了XSLT扩展的神秘面纱，至于怎么去发掘它的潜力，就留给富有创造力的读者去完成吧。





回页首


参考资料

  1. 关于saxon 的相关资料，请参阅Saxonic（http://www.saxonica.com）
  2. 关于xalan 的相关资料，请参阅 Apache.org (http://xml.apache.org/xalan-j)
  3. 关于在xalan中增加对于javascript的支持，请参阅Bean Scripting Framework (http://jakarta.apache.org/bsf/index.html) 和 Rhino （http://www.mozilla.org/rhino）
  4. 关于XSLT的相关资料，请参阅W3C.org(http://www.w3.org/Style/XSL/)
  5. 程序清单下载：samplecode.rar




回页首


关于作者


马晨是上海浦东发展银行温州支行的软件开发专家。自 2000 年来已经在多个平台上开发过不同的应用。目前的工作方向主要侧重于基于 xml 和 javascript 的应用开发。在业余时间喜欢各种运动，尤其喜欢和朋友在周末打打羽毛球。你可以通过电子邮件（pearma@gmail.com）和他联系。



Vincent Chen 2006-03-18 20:45 发表评论
]]>实用数据绑定: 使用 XPath 作为数据绑定工具，第 2 部分：使用 JAXP API 执行 XPath 查询http://www.blogjava.net/Vencent/articles/35969.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 12:44:00 GMThttp://www.blogjava.net/Vencent/articles/35969.htmlhttp://www.blogjava.net/Vencent/comments/35969.htmlhttp://www.blogjava.net/Vencent/articles/35969.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35969.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35969.html阅读全文

Vincent Chen 2006-03-18 20:44 发表评论
]]>3、面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序http://www.blogjava.net/Vencent/articles/35961.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 10:58:00 GMThttp://www.blogjava.net/Vencent/articles/35961.htmlhttp://www.blogjava.net/Vencent/comments/35961.htmlhttp://www.blogjava.net/Vencent/articles/35961.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35961.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35961.html级别: 中级

Philip McCarthy , 软件开发顾问, 独立咨询顾问


2005 年 10 月 20 日

在 Web 应用程序开发中，页面重载循环是最大的一个使用障碍，对于 Java&#8482; 开发人员来说也是一个严峻的挑战。在这个系列中，作者 Philip McCarthy 介绍了一种创建动态应用程序体验的开创性方式。Ajax（异步 javascript 和 XML）是一种编程技术，它允许为基于 Java 的 Web 应用程序把 Java 技术、XML 和 javascript 组合起来，从而打破页面重载的范式。
Ajax（即异步 javascript  和 XML）是一种 Web 应用程序开发的手段，它采用客户端脚本与 Web 服务器交换数据。所以，不必采用会中断交互的完整页面刷新，就可以动态地 更新 Web 页面。使用 Ajax，可以创建更加丰富、更加动态的 Web 应用程序用户界面，其即时性与可用性甚至能够接近本机桌面应用程序。

Ajax 不是一项技术，而更像是一个 模式 —— 一种识别和描述有用的设计技术的方式。Ajax 是新颖的，因为许多开发人员才刚刚开始知道 它，但是所有实现 Ajax 应用程序的组件都已经存在若干年了。它目前受到重视是因为在 2004 和 2005 年出现了一些基于 Ajax 技术的 非常棒的动态 Web UI，最著名的就是 Google 的 GMail 和 Maps 应用程序，以及照片共享站点 Flickr。这些用户界面具有 足够的开创性，有些开发人员称之为“Web 2.0”，因此对 Ajax 应用程序的兴趣飞速上升。

在这个系列中，我将提供使用 Ajax 开发应用程序需要的全部工具 。在第一篇文章中，我将解释 Ajax 背后的概念，演示为基于 Java  的 Web 应用程序创建 Ajax 界面的基本步骤。我将使用代码示例演示让 Ajax 应用程序如此动态的服务器端 Java 代码和客户端 javascript。最后，我将指出 Ajax 方式的一些不足，以及在创建 Ajax 应用程序时应当考虑的一些更广的可用性和访问性问题。

更好的购物车

可以用 Ajax 增强传统的 Web 应用程序，通过消除页面装入从而简化交互。为了演示这一点，我采用一个简单的购物车示例，在向里面添加项目 时，它会动态更新。这项技术如果整合到在线商店，那么用户可以持续地浏览和向购物车中添加项目，而不必在每次点击之后都等候完整的页面更新。虽然这篇文章 中的有些代码特定于购物车示例，但是演示的技术可以应用于任何 Ajax 应用程序。清单 1 显示了购物车示例使用的有关 HTML 代码，整篇文章中 都会使用这个 HTML。


清单1. 购物车示例的有关片断

<!-- Table of products from store's catalog, one row per item -->
<th>Name</th> <th>Description</th> <th>Price</th> <th></th>
...
<tr>
  <!-- Item details -->
  <td>Hat</td> <td>Stylish bowler hat</td> <td>$19.99</td>
  <td>
    <!-- Click button to add item to cart via Ajax request -->
    <button onclick="addToCart('hat001')">Add to Cart</button>
  </td>
</tr>
...

<!-- Representation of shopping cart, updated asynchronously -->
<ul id="cart-contents">

  <!-- List-items will be added here for each item in the cart -->
  
</ul>

<!-- Total cost of items in cart displayed inside span element -->
Total cost: <span id="total">$0.00</span>


Ajax 往返过程

Ajax 交互开始于叫作 XMLHttpRequest 的 javascript 对象。顾名思义，它允许客户端脚本执行  HTTP 请求，并解析 XML 服务器响应。Ajax 往返过程的第一步是创建 XMLHttpRequest 的实例。在  XMLHttpRequest 对象上设置请求使用的 HTTP 方法（GET 或 POST）以及目标 URL。

现在，您还记得 Ajax 的第一个 a 是代表 异步（asynchronous） 吗？在发送 HTTP 请求时，不想让浏览器挂着等候服务器 响应。相反，您想让浏览器继续对用户与页面的交互进行响应，并在服务器响应到达时再进行处理。为了实现这个要求，可以在 XMLHttpRequest  上注册一个回调函数，然后异步地分派 XMLHttpRequest。然后控制就会返回浏览器，当服务器响应到达时，会调用回调函数。

在 Java Web 服务器上，请求同其他 HttpServletRequest 一样到达。在解析了请求参数之后，servlet 调用必要的应用程序逻辑，把响应序列化成 XML，并把 XML 写入 HttpServletResponse。

回到客户端时，现在调用注册在 XMLHttpRequest 上的回调函数，处理服务器返回的 XML 文档。最后，根据服务器返回的数据，用 javascript 操纵页面的 HTML DOM，把用户界面更新。图 1 是 Ajax 往返过程的顺序图。


图 1. Ajax 往返过程

现在您对 Ajax 往返过程有了一个高层面的认识。下面我将放大其中的每一步骤，进行更详细的观察。如果过程中迷了路，请回头看图 1 —— 由于 Ajax 方式的异步性质，所以顺序并非十分简单。


分派 XMLHttpRequest

我将从 Ajax 序列的起点开始：创建和分派来自浏览器的 XMLHttpRequest。不幸的是，不同的浏览器创建 XMLHttpRequest 的方法各不相同。清单 2 的 javascript 函数消除了这些依赖于浏览器的技巧，它可以检测当前浏览器要使用的正确方式，并返回一个可以使用的 XMLHttpRequest。最好是把它当作辅助代码：只要把它拷贝到 javascript 库，并在需要 XMLHttpRequest 的时候使用它就可以了。


清单 2. 创建跨浏览器的 XMLHttpRequest

/*
 * Returns a new XMLHttpRequest object, or false if this browser
 * doesn't support it
 */
function newXMLHttpRequest() {

  var xmlreq = false;

  if (window.XMLHttpRequest) {

    // Create XMLHttpRequest object in non-Microsoft browsers
    xmlreq = new XMLHttpRequest();

  } else if (window.ActiveXObject) {

    // Create XMLHttpRequest via MS ActiveX
    try {
      // Try to create XMLHttpRequest in later versions
      // of Internet Explorer

      xmlreq = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (e1) {

      // Failed to create required ActiveXObject

      try {
        // Try version supported by older versions
        // of Internet Explorer

        xmlreq = new ActiveXObject("Microsoft.XMLHTTP");

      } catch (e2) {

        // Unable to create an XMLHttpRequest with ActiveX
      }
    }
  }

  return xmlreq;
}
  
 


稍后我将讨论处理那些不支持 XMLHttpRequest 的浏览器的技术。目前，示例假设清单 2 的 newXMLHttpRequest 函数总能返回 XMLHttpRequest 实例。

返回示例的购物车场景，我想要当用户在目录项目上点击 Add to Cart 时启动 Ajax 交互。名为 addToCart() 的 onclick 处理函数负责通过 Ajax 调用来更新购物车的状态（请参阅 清单 1）。正如清单 3 所示，addToCart() 需要做的第一件事是通过调用清单 2 的 newXMLHttpRequest() 函数得到 XMLHttpRequest 对象。接下来，它注册一个回调函数，用来接收服务器响应（我稍后再详细解释这一步；请参阅 清单 6）。

因为请求会修改服务器上的状态，所以我将用 HTTP POST 做这个工作。通过 POST 发送数据要求三个步骤。第一，需要打开与要通信的服 务器资源的 POST 连接 —— 在这个示例中，服务器资源是一个映射到 URL cart.do 的 servlet。然后，我在  XMLHttpRequest 上设置一个头，指明请求的内容是表单 编码的数据。最后，我用表单编码的数据作为请求体发送请求。

清单 3 把这些步骤放在了一起。


清单 3. 分派 Add to Cart XMLHttpRequest

/*
 * Adds an item, identified by its product code, to the shopping cart
 * itemCode - product code of the item to add.
 */
function addToCart(itemCode) {

  // Obtain an XMLHttpRequest instance
  var req = newXMLHttpRequest();

  // Set the handler function to receive callback notifications
  // from the request object
  var handlerFunction = getReadyStateHandler(req, updateCart);
  req.onreadystatechange = handlerFunction;
  
  // Open an HTTP POST connection to the shopping cart servlet.
  // Third parameter specifies request is asynchronous.
  req.open("POST", "cart.do", true);

  // Specify that the body of the request contains form data
  req.setRequestHeader("Content-Type", 
                       "application/x-www-form-urlencoded");

  // Send form encoded data stating that I want to add the 
  // specified item to the cart.
  req.send("action=add&item="+itemCode);
}


这就是建立 Ajax 往返过程的第一部分，即创建和分派来自客户机的 HTTP 请求。接下来是用来处理请求的 Java servlet 代码。


servlet 请求处理

用 servlet 处理 XMLHttpRequest，与处理普通的浏览器 HTTP 请求一样。可以用  HttpServletRequest.getParameter() 得到在 POST 请求体中发送的表单编码数据。Ajax 请求被放进与来自应 用程序的常规 Web 请求一样的 HttpSession 中。对于示例购物车场景来说，这很有用，因为这让我可以把购物车状态封装在  JavaBean 中，并在请求之间在会话中维持这个状态。

清单 4 是处理 Ajax 请求、更新购物车的简单 servlet 的一部分。Cart bean 是从用户会话中获得的，并根据请求参数更新 它的状态。然后 Cart 被序列化成 XML，XML 又被写入 ServletResponse。重要的是把响应的内容类型设置为  application/xml，否则 XMLHttpRequest 不会把响应内容解析成 XML DOM。


清单 4. 处理 Ajax 请求的 servlet 代码

public void doPost(HttpServletRequest req, HttpServletResponse res)
                        throws java.io.IOException {

  Cart cart = getCartFromSession(req);

  String action = req.getParameter("action");
  String item = req.getParameter("item");
  
  if ((action != null)&&(item != null)) {

    // Add or remove items from the Cart
    if ("add".equals(action)) {
      cart.addItem(item);

    } else if ("remove".equals(action)) {
      cart.removeItems(item);

    }
  }

  // Serialize the Cart's state to XML
  String cartXml = cart.toXml();

  // Write XML to response.
  res.setContentType("application/xml");
  res.getWriter().write(cartXml);
}

 


清单 5 显示了 Cart.toXml() 方法生成的示例 XML。它很简单。请注意 cart 元素的 generated 属性，它是 System.currentTimeMillis() 生成的一个时间戳。


清单 5. Cart 对象的XML 序列化示例 

<?xml version="1.0"?>
<cart generated="1123969988414" total="$171.95">
  <item code="hat001">
    <name>Hat</name>
    <quantity>2</quantity>
  </item>
  <item code="cha001">
    <name>Chair</name>
    <quantity>1</quantity>
  </item>
  <item code="dog001">
    <name>Dog</name>
    <quantity>1</quantity>
  </item>
</cart>

 


如果查看应用程序源代码（可以从 下载 一节得到）中的 Cart.java，可以看到生成 XML 的方式只是把字符串添加在一起。虽然对这个示例来说足够了，但是对于从 Java 代码生成 XML 来说则是最差的方式。我将在这个系列的下一期中介绍一些更好的方式。

现在您已经知道了 CartServlet 响应 XMLHttpRequest 的方式。下一件事就是返回客户端，查看如何用 XML 响应更新页面状态。


用 javascript 进行响应处理

XMLHttpRequest 的 readyState 属性是一个数值，它指出请求生命周期的状态。它从 0（代表“未初始化”）变化到 4 （代表“完成”）。每次 readyState 变化时，readystatechange 事件就触发，由 onreadystatechange 属 性指定的事件处理函数就被调用。

在 清单 3 中已经看到了如何调用 getReadyStateHandler() 函数创建事件处理函数。然后把这个事件处理函数分配给 onreadystatechange 属性。getReadyStateHandler() 利用了这样一个事实：函数是 javascript  中的一级对象。这意味着函数可以是其他函数的参数，也可以创建和返回其他函数。getReadyStateHandler() 的工作是返回一个函数，检 查 XMLHttpRequest 是否已经完成，并把 XML 响应传递给调用者指定的事件处理函数。清单 6 是  getReadyStateHandler() 的代码。


清单 6. getReadyStateHandler() 函数

/*
 * Returns a function that waits for the specified XMLHttpRequest
 * to complete, then passes its XML response to the given handler function.
 * req - The XMLHttpRequest whose state is changing
 * responseXmlHandler - Function to pass the XML response to
 */
function getReadyStateHandler(req, responseXmlHandler) {

  // Return an anonymous function that listens to the 
  // XMLHttpRequest instance
  return function () {

    // If the request's status is "complete"
    if (req.readyState == 4) {
      
      // Check that a successful server response was received
      if (req.status == 200) {

        // Pass the XML payload of the response to the 
        // handler function
        responseXmlHandler(req.responseXML);

      } else {

        // An HTTP problem has occurred
        alert("HTTP error: "+req.status);
      }
    }
  }
}

 

按此在新窗口浏览图片 HTTP 状态码

在清单 6 中，检查 XMLHttpRequest 的 status 属性以查看请求是否成功完成。status 包含服务器响应的  HTTP 状态码。在执行简单的 GET 和 POST 请求时，可以假设任何大于 200 （OK）的码都是错误。如果服务器发送重定向响应（例如  301 或 302），浏览器会透明地进行重定向并从新的位置获取资源；XMLHttpRequest 看不到重定向状态码。而且，浏览器会自动添加  Cache-Control: no-cache 头到所有 XMLHttpRequest，这样客户代码永远也不用处理 304（未经修改）服务器响 应。
 
 
关于 getReadyStateHandler()

getReadyStateHandler() 是段相对复杂的代码，特别是如果您不习惯阅读 javascript 的话。但是通过把这个函数放在 javascript 库中，就可以处理 Ajax 服务器响应，而不必处理 XMLHttpRequest 的内部细节。重要的是要理解如何在自己的代码中使用 getReadyStateHandler()。

在 清单 3  中看到了 getReadyStateHandler() 像这样被调用：handlerFunction =  getReadyStateHandler(req, updateCart)。在这个示例中，getReadyStateHandler() 返回的 函数将检查在 req 变量中的 XMLHttpRequest 是否已经完成，然后用响应的 XML 调用名为 updateCart 的函数。

提取购物车数据

清单 7 是 updateCart() 本身的代码。函数用 DOM 调用检查购物车的 XML 文档，然后更新 Web 页面（请参阅 清单 1）， 反映新的购物车内容。这里的重点是用来从 XML DOM 提取数据的调用。cart 元素的 generated 属性是在 Cart 序列化为  XML 时生成的一个时间戳，检查它可以保证新的购物车数据不会被旧的数据覆盖。Ajax 请求天生是异步的，所以这个检查可以处理服务器响应未按次序 到达的情况。


清单 7. 更新页面，反映购物车的 XML 文档

function updateCart(cartXML) {

 // Get the root "cart" element from the document
 var cart = cartXML.getElementsByTagName("cart")[0];

 // Check that a more recent cart document hasn't been processed
 // already
 var generated = cart.getAttribute("generated");
 if (generated > lastCartUpdate) {
   lastCartUpdate = generated;

   // Clear the HTML list used to display the cart contents
   var contents = document.getElementById("cart-contents");
   contents.innerHTML = "";

   // Loop over the items in the cart
   var items = cart.getElementsByTagName("item");
   for (var I = 0 ; I < items.length ; I++) {

     var item = items[I];

     // Extract the text nodes from the name and quantity elements
     var name = item.getElementsByTagName("name")[0]
                                               .firstChild.nodevalue;
                                               
     var quantity = item.getElementsByTagName("quantity")[0]
                                               .firstChild.nodevalue;

     // Create and add a list item HTML element for this cart item
     var li = document.createElement("li");
     li.appendChild(document.createTextNode(name+" x "+quantity));
     contents.appendChild(li);
   }
 }

 // Update the cart's total using the value from the cart document
 document.getElementById("total").innerHTML = 
                                          cart.getAttribute("total");
}

 


到此，整个 Ajax 往返过程完成了，但是您可能想让 Web 应用程序运行一下查看实际效果（请参阅 下载 一节）。这个示例非常简单，有很多需要改进之处。例如，我包含了从购物车中清除项目的服务器端代码，但是无法从 UI 访问它。作为一个好的练习，请试着在应用程序现有的 javascript 代码之上构建出能够实现这个功能的代码。


使用 Ajax 的挑战

就像任何技术一样，使用 Ajax 也有许多出错的可能性。我目前在这里讨论的问题还缺乏容易的解决方案，但是会随着 Ajax 的成熟而改进。随着开发人员社区增加开发 Ajax 应用程序的经验，将会记录下最佳实践和指南。

XMLHttpRequest 的可用性

Ajax 开发人员面临的一个最大问题是：在没有 XMLHttpRequest 可用时该如何响应？虽然主要的现代浏览器都支持  XMLHttpRequest，但仍然有少数用户的浏览器不支持，或者浏览器的安全设置阻止使用 XMLHttpRequest。如果开发的 Web  应用程序要部署在企业内部网，那么可能拥有指定支持哪种浏览器的权力，从而可以认为 XMLHttpRequest 总能使用。但是，如果要部署在公共  Web 上，那么就必须当心，如果假设 XMLHttpRequest 可用，那么就可能会阻止那些使用旧的浏览器、残疾人专用浏览器和手持设备上的轻 量级浏览器的用户使用您的应用程序。

所以，您应当努力让应用程序“平稳降级”，在没有 XMLHttpRequest 支持的浏览器中也能够工作。在购物车的示例中，把应用程序降级的 最好方式可能是让 Add to Cart 按钮执行一个常规的表单提交，刷新页面来反映购物车更新后的状态。Ajax 的行为应当在页面装入的时候就通 过 javascript 添加到页面，只有在 XMLHttpRequest 可用时才把 javascript 事件处理函数附加到每个 Add to Cart 按钮。另一种方式是在用户登录时检测 XMLHttpRequest 是否可用，然后相应地提供应用程序的 Ajax 版本或基于表单的普通版本。

可用性考虑

关于 Ajax 应用程序的某些可用性问题比较普遍。例如，让用户知道他们的输入已经注册了可能是重要的，因为沙漏光标和 spinning 浏览 器的常用反馈机制“throbber”对 XMLHttpRequest 不适用。一种技术是用“Now updating...”类型的信息替换  Submit 按钮，这样用户在等候响应期间就不会反复单击按钮了。

另一个问题是，用户可能没有注意到他们正在查看的页面的某一部分已经更新了。可以使用不同的可视技术，把用户的眼球带到页面的更新区域，从而缓解这 个问题。由 Ajax 更新页面造成的其他问题还包括：“破坏了”浏览器的后退按钮，地址栏中的 URL 也无法反映页面的整个状态，妨碍了设置书签。请 参阅 参考资料 一节，获得专门解决 Ajax 应用程序可用性问题的文章。

服务器负载

用 Ajax 实现代替普通的基于表单的 UI，会大大提高对服务器发出的请求数量。例如，一个普通的 Google Web 搜索对服务器只有一 个请求，是在用户提交搜索表单时出现的。而 Google Suggest 试图自动完成搜索术语，它要在用户输入时向服务器发送多个请求。在开发  Ajax 应用程序时，要注意将要发送给服务器的请求数量以及由此造成的服务器负荷。降低服务器负载的办法是，在客户机上对请求进行缓冲并且缓存服务器 响应（如果可能的话）。还应该尝试将 Ajax Web 应用程序设计为在客户机上执行尽可能多的逻辑，而不必联络服务器。

处理异步

非常重要的是，要理解无法保证 XMLHttpRequest 会按照分派它们的顺序完成。实际上，应当假设它们不会按顺序完成，并且在设计应用程序时把这一点记在心上。在购物车的示例中，使用最后更新的时间戳来确保新的购物车数据不会被旧的数据覆盖（请参阅 清单 7）。这个非常基本的方式可以用于购物车场景，但是可能不适合其他场景。所以在设计时请考虑如何处理异步的服务器响应。


结束语

现在您对 Ajax 的基本原则应当有了很好的理解，对参与 Ajax 交互的客户端和服务器端组件也应当有了初步的知识。这些是基于 Java  的 Ajax Web 应用程序的构造块。另外，您应当理解了伴随 Ajax 方式的一些高级设计问题。创建成功的 Ajax 应用程序要求整体考虑，从  UI 设计到 javascript 设计，再到服务器端架构；但是您现在应当已经武装了考虑其他这些方面所需要的核心 Ajax 知识。

如果使用这里演示的技术编写大型 Ajax 应用程序的复杂性让您觉得恐慌，那么有好消息给您。由于 Struts、Spring 和  Hibernate 这类框架的发展把 Web 应用程序开发从底层 Servlet API 和 JDBC 的细节中抽象出来，所以正在出现简化  Ajax 开发的工具包。其中有些只侧重于客户端，提供了向页面添加可视效果的简便方式，或者简化了对 XMLHttpRequest 的使用。有些则 走得更远，提供了从服务器端代码自动生成 Ajax 接口的方式。这些框架替您完成了繁重的任务，所以您可以采用更高级的方式进行 Ajax 开发。我在 这个系列中将研究其中的一些。

Ajax 社区正在快速前进，所以会有大量有价值的信息涌现。在阅读这个系列的下一期之前，我建议您参考 参考资料 一节中列出的文章，特别是如果您是刚接触 Ajax 或客户端开发的话。您还应当花些时间研究示例源代码并考虑一些增强它的方式。

在这个系列的下一篇文章中，我将深入讨论 XMLHttpRequest API，并推荐一些从 JavaBean 方便地创建 XML 的方式。我还将介绍替代 XML 进行 Ajax 数据传递的方式，例如 JSON（javascript Object Notation）轻量级数据交换格式。

下载

描述 名字 大小  下载方法 
Sample code j-ajax1.zip 8 KB  FTP 
按此在新窗口浏览图片 
按此在新窗口浏览图片 关于下载方法的信息 按此在新窗口浏览图片 按此在新窗口浏览图片 获取 Adobe® Reader® 

posted on 2006-02-19 10:51 草儿 阅读(4) 评论(0)  编辑 收藏收藏至365K

Vincent Chen 2006-03-18 18:58 发表评论
]]>Ajax 简介http://www.blogjava.net/Vencent/articles/35960.html<font color='GREEN'>Vincent Chen</font><font color='GREEN'>Vincent Chen</font>Sat, 18 Mar 2006 10:57:00 GMThttp://www.blogjava.net/Vencent/articles/35960.htmlhttp://www.blogjava.net/Vencent/comments/35960.htmlhttp://www.blogjava.net/Vencent/articles/35960.html#Feedback0http://www.blogjava.net/Vencent/comments/commentRss/35960.htmlhttp://www.blogjava.net/Vencent/services/trackbacks/35960.html 1、Ajax 简介

理解 Ajax 及其工作原理，构建网站的一种有效方法
 
级别: 初级

Brett McLaughlin  , 作家，编辑, O'Reilly and Associates


2006 年 1 月 04 日

Ajax 由 HTML、javascript&#8482; 技术、DHTML 和 DOM 组成，这一杰 出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总 体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpRequest 对象。
五年前，如果不知道 XML，您就是一只无人重视的丑小鸭。十八个月前，Ruby 成了关注的中心，不知道 Ruby 的程序员只能坐冷板凳了。今天，如果想跟上最新的技术时尚，那您的目标就是 Ajax。

但是，Ajax 不仅仅 是一种时尚，它是一种构建网站的强大方法，而且不像学习一种全新的语言那样困难。

但在详细探讨 Ajax 是什么之前，先让我们花几分钟了解 Ajax 做 什么。目前，编写应用程序时有两种基本的选择：

桌面应用程序 
Web 应用程序
两者是类似的，桌面应用程序通常以 CD 为介质（有时候可从网站下载）并完全安装到您的计算机 上。桌面应用程序可能使用互联网下载更新，但运行这些应用程序的代码在桌面计算机上。Web 应用程序运行在某处的 Web 服务器上 —— 毫不奇怪， 要通过 Web 浏览器访问这种应用程序。

不过，比这些应用程序的运行代码放在何处更重要的是，应用程序如何运转以及如何与其进行交互。桌面应用程序一般很快（就在您的计算机上运行，不用等 待互联网连接），具有漂亮的用户界面（通常和操作系统有关）和非凡的动态性。可以单击、选择、输入、打开菜单和子菜单、到处巡游，基本上不需要等待。

另一方面，Web 应用程序是最新的潮流，它们提供了在桌面上不能实现的服务（比如 Amazon.com 和 eBay）。但是，伴随着 Web 的强大而出现的是等待，等待服务器响应，等待屏幕刷新，等待请求返回和生成新的页面。

显然这样说过于简略了，但基本的概念就是如此。您可能已经猜到，Ajax 尝试建立桌面应用程序的功能和交互性，与不断更新的 Web 应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件，不过是在 Web 应用程序中。

还等什么呢？我们来看看 Ajax 如何将笨拙的 Web 界面转化成能迅速响应的 Ajax 应用程序吧。

老技术，新技巧

在谈到 Ajax 时，实际上涉及到多种技术，要灵活地运用它必须深入了解这些不同的技术（本系列的头几篇文章将分别讨论这些技术）。好消息是您可 能已经非常熟悉其中的大部分技术，更好的是这些技术都很容易学习，并不像完整的编程语言（如 Java 或 Ruby）那样困难。

按此在新窗口浏览图片  Ajax 的定义

顺便说一下，Ajax 是 Asynchronous javascript and XML（以及 DHTML 等）的缩写。这个短语是 Adaptive Path 的 Jesse James Garrett 发明的（请参阅 参考资料），按照 Jesse 的解释，这不是 个首字母缩写词。
 
 
下面是 Ajax 应用程序所用到的基本技术：

HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。 
javascript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。 
DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。 
文档对象模型 DOM 用于（通过 javascript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。
我们来进一步分析这些技术的职责。以后的文章中我将深入讨论这些技术，目前只要熟悉这些组件和技术就可以了。对这些代码越熟悉，就越容易从对这些技术的零散了解转变到真正把握这些技术（同时也真正打开了 Web 应用程序开发的大门）。

XMLHttpRequest 对象

要了解的一个对象可能对您来说也是最陌生的，即 XMLHttpRequest。这是一个 javascript 对象，创建该对象很简单，如清单 1 所示。


清单 1. 创建新的 XMLHttpRequest 对象

<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>


下一期文章中将进一步讨论这个对象，现在要知道这是处理所有服务器通信的对象。继续阅读之前，先停下来想一想：通过 XMLHttpRequest 对象与服务器进行对话的是 javascript 技术。这不是一般的应用程序流，这恰恰是 Ajax 的强大功能的来源。

在一般的 Web 应用程序中，用户填写表单字段并单击 Submit 按钮。然后整个表单发送到服务器，服务器将它转发给处理表单的脚本（通常是  PHP 或 Java，也可能是 CGI 进程或者类似的东西），脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的  HTML，也可能是确认页面，或者是具有根据原来表单中输入数据选择的某些选项的页面。当然，在服务器上的脚本或程序处理和返回新表单时用户必须等待。 屏幕变成一片空白，等到服务器返回数据后再重新绘制。这就是交互性差的原因，用户得不到立即反馈，因此感觉不同于桌面应用程序。

Ajax 基本上就是把 javascript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填写表单时，数据发送给一些 javascript 代码而不是 直接发送给服务器。相反，javascript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说，javascript 代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说 javascript 代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。

然后，服务器将数据返回 javascript 代码（仍然在 Web 表单中），后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。javascript  代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预！这就是 XMLHttpRequest 的强大之处。它可以根据需要自行 与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验，但是背后又拥有互联网的全部强 大力量。

加入一些 javascript

得到 XMLHttpRequest 的句柄后，其他的 javascript 代码就非常简单了。事实上，我们将使用 javascript 代码完成非常基本的任务：

获取表单数据：javascript 代码很容易从 HTML 表单中抽取数据并发送到服务器。 
修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。 
解析 HTML 和 XML：使用 javascript 代码操纵 DOM（请参阅 下一节），处理 HTML 表单服务器返回的 XML 数据的结构。
对于前两点，需要非常熟悉 getElementById() 方法，如 清单 2 所示。


清单 2. 用 javascript 代码捕获和设置字段值

// Get the value of the "phone" field and stuff it in a variable called phone
var phone = document.getElementById("phone").value;

// Set some values on a form using an array called response
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];


这里没有特别需要注意的地方，真是好极了！您应该认识到这里并没有非常复杂的东西。只要掌握了 XMLHttpRequest，Ajax 应用程序的其他部分就是如 清单 2 所示的简单 javascript 代码了，混合有少量的 HTML。同时，还要用一点儿 DOM，我们就来看看吧。

以 DOM 结束

最后还有 DOM，即文档对象模型。可能对有些读者来说 DOM 有点儿令人生畏，HTML 设计者很少使用它，即使 javascript 程序员也不大用到它，除非要完成某项高端编程任务。大量使用 DOM 的是 复杂的 Java 和 C/C++ 程序，这可能就是 DOM 被认为难以学习的原因。

幸运的是，在 javascript 技术中使用 DOM 很容易，也非常直观。现在，按照常规也许应该说明如何使用 DOM，或者 至少要给出一些示例代码，但这样做也可能误导您。即使不理会 DOM，仍然能深入地探讨 Ajax，这也是我准备采用的方法。以后的文章将再次讨论  DOM，现在只要知道可能需要 DOM 就可以了。当需要在 javascript 代码和服务器之间传递 XML 和改变 HTML 表单的时候，我们再深入研究 DOM。没有它也能做一些有趣的工作，因此现在就把 DOM 放到一边吧。


获取 Request 对象

有了上面的基础知识后，我们来看看一些具体的例子。XMLHttpRequest 是 Ajax 应用程序的核心，而且对很多读者来说可能还比较陌生，我们就从这里开始吧。从 清单 1 可以看出，创建和使用这个对象非常简单，不是吗？等一等。

还记得几年前的那些讨厌的浏览器战争吗？没有一样东西在不同的浏览器上得到同样的结果。不管您是否相信，这些战争仍然在继续，虽然规模较小。但令人 奇怪的是，XMLHttpRequest 成了这场战争的牺牲品之一。因此获得 XMLHttpRequest 对象可能需要采用不同的方法。下面我将详 细地进行解释。

使用 Microsoft 浏览器

Microsoft 浏览器 Internet Explorer 使用 MSXML 解析器处理 XML（可以通过 参考资料 进一步了解 MSXML）。因此如果编写的 Ajax 应用程序要和 Internet Explorer 打交道，那么必须用一种特殊的方式创建对象。

但并不是这么简单。根据 Internet Explorer 中安装的 javascript 技术版本不同，MSXML 实际上有两种不同的版本，因此必须对这两种情况分别编写代码。请参阅 清单 3，其中的代码在 Microsoft 浏览器上创建了一个 XMLHttpRequest。


清单 3. 在 Microsoft 浏览器上创建 XMLHttpRequest 对象

var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}

 


您对这些代码可能还不完全理解，但没有关系。当本系列文章结束的时候，您将对 javascript 编程、错误处理、条件编译等有更深的了解。现在只要牢牢记住其中的两行代码：

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

和

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");。

这两行代码基本上就是尝试使用一个版本的 MSXML 创建对象，如果失败则使用另一个版本创建该对象。不错吧？如果都不成功，则将  xmlHttp 变量设为 false，告诉您的代码出现了问题。如果出现这种情况，可能是因为安装了非 Microsoft 浏览器，需要使用不同的 代码。

处理 Mozilla 和非 Microsoft 浏览器

如果选择的浏览器不是 Internet Explorer，或者为非 Microsoft 浏览器编写代码，就需要使用不同的代码。事实上就是 清单 1 所示的一行简单代码：

var xmlHttp = new XMLHttpRequest object;。

这行简单得多的代码在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中，创建了 XMLHttpRequest 对象。

结合起来

关键是要支持所有 浏览器。谁愿意编写一个只能用于 Internet Explorer 或者非 Microsoft 浏览器的应用程序呢？或者 更糟，要编写一个应用程序两次？当然不！因此代码要同时支持 Internet Explorer 和非 Microsoft 浏览器。清单 4 显示了这样的代码。


清单 4. 以支持多种浏览器的方式创建 XMLHttpRequest 对象

/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

 


现在先不管那些注释掉的奇怪符号，如 @cc_on，这是特殊的 javascript 编译器命令，将在下一期针对 XMLHttpRequest 的文章中详细讨论。这段代码的核心分为三步：

建立一个变量 xmlHttp 来引用即将创建的 XMLHttpRequest 对象。 
尝试在 Microsoft 浏览器中创建该对象： 
尝试使用 Msxml2.XMLHTTP 对象创建它。 
如果失败，再尝试 Microsoft.XMLHTTP 对象。
如果仍然没有建立 xmlHttp，则以非 Microsoft 的方式创建该对象。
最后，xmlHttp 应该引用一个有效的 XMLHttpRequest 对象，无论运行什么样的浏览器。

关于安全性的一点说明

安全性如何呢？现在浏览器允许用户提高他们的安全等级，关闭 javascript 技术，禁用浏览器中的任何选项。在这种情况下， 代码无论如何都不会工作。此时必须适当地处理问题，这需要单独的一篇文章来讨论，要放到以后了（这个系列够长了吧？不用担心，读完之前也许您就掌握了）。 现在要编写一段健壮但不够完美的代码，对于掌握 Ajax 来说就很好了。以后我们还将讨论更多的细节。

Ajax 世界中的请求/响应

现在我们介绍了 Ajax，对 XMLHttpRequest 对象以及如何创建它也有了基本的了解。如果阅读得很仔细，您可能已经知道与服务器上的 Web 应用程序打交道的是 javascript 技术，而不是直接提交给那个应用程序的 HTML 表单。

还缺少什么呢？到底如何使用 XMLHttpRequest。因为这段代码非常重要，您编写的每个 Ajax 应用程序都要以某种形式使用它，先看看 Ajax 的基本请求/响应模型是什么样吧。

发出请求

您已经有了一个崭新的 XMLHttpRequest 对象，现在让它干点活儿吧。首先需要一个 Web 页面能够调用的 javascript 方法（比如当用户输入文本或者从菜单中选择一项时）。接下来就是在所有 Ajax 应用程序中基本都雷同的流程：

从 Web 表单中获取需要的数据。 
建立要连接的 URL。 
打开到服务器的连接。 
设置服务器在完成后要运行的函数。 
发送请求。
清单 5 中的示例 Ajax 方法就是按照这个顺序组织的：


清单 5. 发出 Ajax 请求

function callServer() {
  // Get the city and state from the web form
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  // Only go on if there are values for both fields
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;

  // Build the URL to connect to
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

  // Open a connection to the server
  xmlHttp.open("GET", url, true);

  // Setup a function for the server to run when it's done
  xmlHttp.onreadystatechange = updatePage;

  // Send the request
  xmlHttp.send(null);
}

 


其中大部分代码意义都很明确。开始的代码使用基本 javascript 代码获取几个表单字段的值。然后设置一个 PHP 脚本作为链接的目标。要注意脚本 URL 的指定方式，city 和 state（来自表单）使用简单的 GET 参数附加在 URL 之后。

然后打开一个连接，这是您第一次看到使用 XMLHttpRequest。其中指定了连接方法（GET）和要连接的 URL。最后一个参数如果设为  true，那么将请求一个异步连接（这就是 Ajax 的由来）。如果使用 false，那么代码发出请求后将等待服务器返回的响应。如果设为  true，当服务器在后台处理请求的时候用户仍然可以使用表单（甚至调用其他 javascript 方法）。

xmlHttp（要记住，这是 XMLHttpRequest 对象实例）的 onreadystatechange 属性可以告诉服务器在运行完 成 后（可能要用五分钟或者五个小时）做什么。因为代码没有等待服务器，必须让服务器知道怎么做以便您能作出响应。在这个示例中，如果服务器处理完了请 求，一个特殊的名为 updatePage() 的方法将被触发。

最后，使用值 null 调用 send()。因为已经在请求 URL 中添加了要发送给服务器的数据（city 和 state），所以请求中不需要发送任何数据。这样就发出了请求，服务器按照您的要求工作。

如果没有发现任何新鲜的东西，您应该体会到这是多么简单明了！除了牢牢记住 Ajax 的异步特性外，这些内容都相当简单。应该感激 Ajax 使您能够专心编写漂亮的应用程序和界面，而不用担心复杂的 HTTP 请求/响应代码。

清单 5  中的代码说明了 Ajax 的易用性。数据是简单的文本，可以作为请求 URL 的一部分。用 GET 而不是更复杂的 POST 发送请求。没有 XML 和要添加的内容头部，请求体中没有要发送的数据；换句话说，这就是 Ajax 的乌托邦。

不用担心，随着本系列文章的展开，事情会变得越来越复杂。您将看到如何发送 POST 请求、如何设置请求头部和内容类型、如何在消息中编码  XML、如何增加请求的安全性，可以做的工作还有很多！暂时先不用管那些难点，掌握好基本的东西就行了，很快我们就会建立一整套的 Ajax 工具库。

处理响应

现在要面对服务器的响应了。现在只要知道两点：

什么也不要做，直到 xmlHttp.readyState 属性的值等于 4。 
服务器将把响应填充到 xmlHttp.responseText 属性中。
其 中的第一点，即就绪状态，将在下一篇文章中详细讨论，您将进一步了解 HTTP 请求的阶段，可能比您设想的还多。现在只要检查一个特定的值（4）就可以 了（下一期文章中还有更多的值要介绍）。第二点，使用 xmlHttp.responseText 属性获得服务器的响应，这很简单。清单 6 中的示例方法可供服务器根据 清单 5 中发送的数据调用。


清单 6. 处理服务器响应

function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
}

 


这些代码同样既不难也不复杂。它等待服务器调用，如果是就绪状态，则使用服务器返回的值（这里是用户输入的城市和州的 ZIP 编码）设置 另一个表单字段的值。于是包含 ZIP 编码的 zipCode 字段突然出现了，而用户没有按任何按钮！这就是前面所说的桌面应用程序的感觉。快速响 应、动态感受等等，这些都只因为有了小小的一段 Ajax 代码。

细心的读者可能注意到 zipCode 是一个普通的文本字段。一旦服务器返回 ZIP 编码，updatePage() 方法就用城市/州的  ZIP 编码设置那个字段的值，用户就可以改写该值。这样做有两个原因：保持例子简单，说明有时候可能希望 用户能够修改服务器返回的数据。要记住这两 点，它们对于好的用户界面设计来说很重要。


连接 Web 表单

还有什么呢？实际上没有多少了。一个 javascript 方法捕捉用户输入表单的信息并将其发送到服务器，另一个 javascript 方法监听和处理响应，并在响应返回时设置字段的值。所有这些实际上都依赖于调用 第一个 javascript 方法，它启动了整个过程。最明显的办法是在 HTML 表单中增加一个按钮，但这是 2001 年的办法，您不这样认为吗？还是像 清单 7 这样利用 javascript 技术吧。


清单 7. 启动一个 Ajax 过程

<form>
 <p>City: <input type="text" name="city" id="city" size="25" 
       onChange="callServer();" /></p>
 <p>State: <input type="text" name="state" id="state" size="25" 
       onChange="callServer();" /></p>
 <p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>

 


如果感觉这像是一段相当普通的代码，那就对了，正是如此！当用户在 city 或 state 字段中输入新的值时，callServer() 方法就被触发，于是 Ajax 开始运行了。有点儿明白怎么回事了吧？好，就是如此！

结束语

现在您可能已经准备开始编写第一个 Ajax 应用程序了，至少也希望认真读一下 参考资料 中的那些文章了吧？但可以首先从这些应用程序如何工作的基本概念开始，对 XMLHttpRequest 对象有基本的了解。在下一期文章中，您将掌握这个对象，学会如何处理 javascript 和服务器的通信、如何使用 HTML 表单以及如何获得 DOM 句柄。

现在先花点儿时间考虑考虑 Ajax 应用程序有多么强大。设想一下，当单击按钮、输入一个字段、从组合框中选择一个选项或者用鼠标在屏幕上拖动时，Web 表单能够立刻作出响应会是什么情形。想一想异步 究竟意味着什么，想一想 javascript 代码运行而且不等待 服务器对它的请求作出响应。会遇到什么样的问题？会进入什么样的领域？考虑到这种新的方法，编程的时候应如何改变表单的设计？

如果在这些问题上花一点儿时间，与简单地剪切/粘贴某些代码到您根本不理解的应用程序中相比，收益会更多。在下一期文章中，我们将把这些概念付诸实践，详细介绍使应用程序按照这种方式工作所需要的代码。因此，现在先享受一下 Ajax 所带来的可能性吧。


按此在新窗口浏览图片  
按此在新窗口浏览图片
 [URL=http://www-128.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#main]回页首[/URL] 
 

参考资料 

学习

您可以参阅本文在 developerWorks 全球站点上的 英文原文。


Adaptive Path  是一家领先的用户界面设计公司，仔细阅读他们的网站可以更多地了解 Ajax。 


如果关心 Ajax 一词的来历，请看一看 Jesse James Garrett 和他的 Ajax 文章（比如 这一篇）。 


可以先了解下一期文章的主题 XMLHttpRequest 对象，请阅读 关于 XMLHttpRequest 对象的这篇文章。 


如果使用 Internet Explorer，可以访问 Microsoft Developer Network 的 XML Developer Center。 


面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序 （developerWorks，2005 年 9 月）介绍了这种革新方法，它解决了页面重新加载难题，可以创建动态的 Web 应用程序体验。 


面向 Java 开发人员的 Ajax: Ajax 的 Java 对象序列化 （developerWorks，2005 年 10 月）介绍了在 Ajax 应用程序中对数据进行序列化的五种方法。 


Using Ajax with PHP and Sajax （developerWorks，2005 年 10 月），这篇教程针对那些对开发丰富 Web 应用程序感兴趣的人，介绍了使用 Ajax 和 PHP 动态更新内容。 


Call SOAP Web services with AJAX, Part 1: Build the Web services client （developerWorks，2005 年 10 月）介绍了如何使用 Ajax 设计模式实现基于 Web 浏览器的 SOAP Web 服务客户机。 


XML 问题: 超越 DOM （developerWorks，2005 年 5 月）详细阐述了如何使用文档对象模型来构建动态 Web 应用程序。 


Build apps with Asynchronous javascript with XML, or AJAX （developerWorks，2005 年 11 月）演示了如何使用 Ajax 构造支持实时检验的 Web 应用程序。 


面向 Java 开发人员的 Ajax: 结合 Direct Web Remoting 使用 Ajax  （developerWorks，2005 年 11 月）演示了如何实现 Ajax 的繁琐细节的自动化处理。 


OSA Foundation 有一个 wiki 调查了 AJAX/javascript 库。 


XUL Planet 的 对象参考部分 详细介绍了 XMLHttpRequest 对象（更不用说其他各种 XML 对象了，如 DOM、CSS、HTML、Web Service 以及 Windows 和 Navigation 对象）。 


关于 AJax 的基本原理，请阅读 策略白皮书。 


请看看 Flickr.com 上展示的一些很棒的 Ajax 应用程序。 


Google 的 GMail 是另一个利用 Ajax 的革命性 Web 应用程序的例子。 


Head Rush Ajax  （O'Reilly Media, Inc.，2006 年 2 月）包含了本文以及本系列文章所述的内容（还有更多），并采用了创新的获奖格式 Head First。 


javascript: The Definitive Guide ，第 4 版（O'Reilly Media, Inc.，2001 年 11 月）是关于 javascript 语言和使用动态网页的好资料。 


developerWorks Web 体系结构专区 专门发表关于各种基于 Web 的解决方案的文章。



Vincent Chen 2006-03-18 18:57 发表评论
]]>