然而我倒并不排斥Flash应用，包括AIR，我觉得很多优秀的应用用起来非常不错。究竟是什么令我在开发上如此排斥Flash呢？我仔细分析了一下，想到以下问题：

当时Flash不是开放的。当时Flash只能使用Macromedia Flash来制作，几乎没有其他够用的工具（我记得有个Swiss）。随着Flash的标准开放，现在情况改变了，有不少的第三方工具。不过因为当时Flash的不开放，让我错过了。

当时Flash在其他平台上的支持非常差。当然，现在已经好很多了。不过即使现在，Flash在Linux下的实现还是有些问题，CPU占用率非常高。Flash曾经是没有Linux开发工具的，现在也没有多少，当然后来Adobe推出了Flex for Linux，结果最近看一则新闻说因为Flex for Linux用得太少，所以Adobe要停止维护Flex for Linux了。这样看来，如果要跨平台，无论是开发时还是运行时，Flash比起html+js还是差一些。

过去Flash主要作为动画来使用，文件非常庞大，那时候也很少使用动态加载。现在用Flex做客户端应用非常方便，但是Flex相对于HTML来说，还是过于庞大。同样的，Flex开发套件也太庞大了，尤其是如果把Java也算进去的话。而我使用HTML/JS可以需要用文本编辑器和一个浏览器。

Flash并非事实上的标准，网站可以不使用Flash，却不能不使用HTML。现在主流的浏览器，都支持JavaScript，却不一定有Flash。

其实我认为我害怕使用Flash最关键的是在于我在开发上的思维转变，过去我很喜欢很酷很眩的特效，觉得有了这些东西，程序肯定就很牛B。但后来我意识到这种想法是幼稚的，这些特效都是浮云，要先抓住问题本质，要去掉这些复杂的外观，直接呈现内容。而如果不需要特效，Flash比起html + js就没有明显的优势了，而我更喜欢html+js的简洁快速。

～～～～～～～～～～～～～～～～～～～～～～～～

Flash作为RIA，目前是如日中天，AIR也是相当流行，但实际上是杀机四伏。

微软也推出了Silverlight与Flash直面竞争。

由于JavaScript的发展，各种JavaScript特效框架的出现，过去需要使用Flash才能实现的很多特效现在可以直接使用js实现，直接消除了一部分对于Flash的需求。

JavaScript的一些工具包，也能实现很多窗体控件，使开发简单，如extjs dojo jquery-ui等，除了IDE上支持不够。这对于Flash的Flex框架也是一种威胁。

Adobe的AIR还比较聪明，没有完全把赌注押在Flash上，兼容了html+js的开发，Mozilla已经推出了Prism来竞争，而Prism的最强大的地方莫过于既有的Web应用可以直接运行在Prism上。

其实对Flash最大的威胁来自于HTML5：

• 过去JavaScript一直有跨域的问题，而且对长连接支持有些问题，HTML5中的Websocket为Ajax提供了更强大的通讯能力，Flash的优势又进一步减弱了。
• 利用HTML5中canvas，JavaScript就可以进行高速的2D图形绘制，这也是抢了Flash的市场。
• HTML5支持离线存储Dom Stoarge，Flash的又一个特性被直接支持

以上这些标准组件在某些浏览器中已经被支持了，Flash对于浏览器毕竟只是第三方支持，但是HTML5的这些东西将来可都是直接在浏览器核心中的。

我想还有一个不得不提的就是3D了，Flash现在也可以实现3D，但是Flash的3D效果只能算普通，效率也比较低，做复杂的3D应用是不适合的。在这方面，Java Applet却可以调用OpenGL，效率就不在同一个层次上了。而最近Google为Chrome推出的o3d，也是Flash强劲的对手。

所以，我觉得Flash未来的好日子有限。

首先，必须要在创建这个Hash类的结构时，将JSClass中的”call”字段设置为相应的函数，如下：

static
JSBool call_hash(JSContext *cx, JSObject *obj, uintN argc, jsval *argv,
jsval *rval){
/* here the obj refers to the global object, not the callee itself */
*rval = JSVAL_NULL;
return JS_TRUE;
}

static
JSClass hash_class = {
"Hash", JSCLASS_HAS_PRIVATE,
JS_PropertyStub, JS_PropertyStub, JS_PropertyStub, JS_PropertyStub,
JS_EnumerateStub, JS_ResolveStub, JS_ConvertStub,
finalize_hash,
0,
0,
call_hash,
0,
0,
0,
0,
0
};

现在，这里有一个很关键的问题便是如何在SpiderMonkey调用call_hash函数的时候，能够让call_hash函数知道被调用的对象（callee）是谁。然而，Mozilla的官方文档并没有对此作出任何解释。于是我在邮件列表中问了这个问题，有人给出了一个很特别的技巧——引擎调用call函数的时候，argv[-2]便是被调用者本身。

在把玩了Spidermonkey一段时间之后，我还是打算放弃spidermonkey，虽然这是一个很成熟很强大的脚本引擎，但是他的API还是有些混乱的，从本文的这个问题的解决方案就可以看得出来。

函数式JavaScript编程指南

简介

你是否知道JavaScript其实也是一个函数式编程语言呢？本指南将教你如何利用JavaScript的函数式特性。

要求：你应当已经对JavaScript和DOM有了一个基本的了解。

写这篇指南的目的是因为关于JavaScript编程的资料太多了但是极少的资料提到了JavaScript的函数式特性。在本指南中，我只会讲解这些基本知识而不会深入其它的函数式语言或这是Lambda算子。

你可以点击所有的例子然后你所看到的代码就会被执行，这样就可以令指南变得具有交互性。你也可以使用这个沙箱来尝试。

第一课 —— 匿名函数

我们将首先介绍匿名函数。一个匿名函数就是一个没有名字的函数。
你可以认为他们是一次性函数。当你只需要用一次某个函数式，他们就特别有用。通过使用匿名函数，没有必要把函数一直放在内存中，所以使用匿名函数更加有效率。

例Example:

下面两个函数处理同样的事情，而average在给z赋值结束之后一直保留——但匿名函数则不会。

function average(x,y) {
  return (x+y)/2;
}
var z = average(1,3);
alert(z);

var z = function(x,y) {
      return (x+y)/2;
    } (1,3);
alert(z);

这很自然得引出了我们下面的一节课函数作为值。

第二课 – 函数作为值

事实上，我们一般在JavaScript中声明函数的方式可以看作是一个简化了的语法（也就是语法糖，syntactic sugar）。

例：

下面两个表达式其实完全一样。所以左边的表达式仅仅是右边的简写。

function average(x,y) {
  return (x+y)/2;
}
alert( average(1,3) );

var average = function(x,y) {
  return (x+y)/2;
}
alert( average(1,3) );

从这里可以得出一个结论，函数是一个值就像字符串、数字或数组一样。这还出现几个问题：

我是否可以把函数作为参数传递？

可以，见下面的例子。

是否可以实时生成函数？

当然了，这是一个高级的主题，它可以通过eval函数来完成。小提示：看看本页面的源代码。

例：

这个例子演示了如何把函数作为参数传递。

var applyFun = function (f,x,y) { return f(x,y); };

var add = function(x,y) {
  return x+y;
};

alert( applyFun(add,3,4) ); // 7

第三课 – 两种方式调用函数

在JavaScript中，有两种调用函数的方式。一般的方式是把参数放在括号中，如alert(42)。另一种方式是同时把函数和参数都放在括号中，如(alert)(42)。

例：

alert(42);

(alert) (42);

(function(x) { alert(x-13); }) (55);

为什么函数两边的括号很重要：如果你写了括号，那么在括号中的代码就会被先计算。在计算之后，括号所在的地方就会有一个值。这个值可能是一个字符串、一个数字或一个函数。

第四课 – “短路”条件调用

现在我们将学习如何使用“短路”条件调用。使用这个方法可以缩短源代码同时代码也变得更加可读。

例：

这个语法并不是用在左表达式上，而是用在右表达式上。

var f = false; var t = true;var z;
if(f)
  z = 4;
else if(t)
  z = 2;
alert(z);

var f = false; var t = true;
var z = (f && 4) || (t && 2);
alert(z);

第五课 – 它好在哪里

OK，现在我们已经学习了一些函数式JavaScript的内容。那么它好在哪里？函数式JavaScript编程之所以很重要有三条主要的理由：

1. 它有助于写出模块化和可服用的代码。
2. 它对事件处理程序非常有效。
3. 它很有趣！

在下面的篇幅中，我会给出更多关于前两条理由的信息

1. 模块化和可复用的代码

现在你已经知道如何将函数作为值使用，那么你也应该试试！一个很好的例子是数组内建的sort方法。预定义的sort()把所有的对象转换成字符串并把他们按照词语的顺序排序。但如果我们有用户自定义的对象或者数字那么它就不是很有用了。于是这个函数可以让你给他一个进行比较的函数作为参数，如sort(compareFunction)。这个方法让我们甚至不用接触实际的sort方法。

例:

var myarray = new Array(6,7,9,1,-1);
var sortAsc = function(x,y) { return x-y; };
var sortDesc = function(x,y) { return y-x; };
myarray.sort(sortDesc);
alert(myarray);

myarray.sort(sortAsc);
alert(myarray);

2. 事件处理程序

对事件处理程序使用函数式编程也许是最直观的函数作为值得应用了。既然这样我们马上就演示一个例子。

简单的例子：;ie

现在有一个Button类，带一个自定义的onclick行为。

function Button(clickFunction) {
	this.button = document.createElement("button");
	this.button.appendChild(document.createTextNode("Press me!"));
	this.button.onclick = clickFunction;
}
var bt = new Button(function() { alert("42"); });

function Button(value) {
	this.value = value;
	this.button = document.createElement("button");
	this.button.appendChild(document.createTextNode("test"));
}

this.button.onclick = function() { alert(this.value); };

this.button.onclick = (function(v) {
			return function() { alert(v); };
			}) (this.value);

乍一看感觉像Flash做的，其实他只用了200行JavaScript代码！

当然，该游戏还是基于 Prototype 1.6 以及Scriptaculous 1.8

看看DIGG上的评论

基本信息

• 【英文名】Professional JavaScript for Web Developers
• 【作者】Nicholas C. Zakas
• 【译者】曹力 张欣
• 【ISBN】7115152098
• 【出版时间】2006-9-15
• 【页码】670
• 【原出版社】Wrox
• 【简介】本书从最早期Netscape浏览器中的Javascript开始讲起，直到当前它对XML和Web服务的具体支持，展示了如何充分利用这种功能强大的语言开发自己的应用程序，以解决当今Web开发者面对的商业问题。
• 活动主页

译者序

亲爱的读者：

当您从书架上拿出这本书的时候，我想您肯定对Ajax技术有着浓厚的兴趣，而本书也正是您的正确选择。本书的作者Nicholas C. Zakas用通俗易懂的语言，将JavaScript的诞生、现在的状况、未来的发展和与其紧密相关的各种技术一一详尽地叙述出来，刚学JavaScript的朋友，可以按部就班成为高手，而已经是高手的朋友，则可以将本书作为参考手册。

第1章讲述了JavaScript的起源，给大家一个关于JavaScript正确的认知。

第2~5章详细介绍了JavaScript语言本身，揭示了一些JavaScript不为认知的语言特点。

第6~9章介绍了JavaScript和浏览器进行交互的一些基础知识和一些进阶知识，如DOM的基础、正则表达式。

第10~13章介绍了一些更加高级的JavaScript技巧，这些技巧可以构建良好的客户端逻辑，包括表格排序、拖动等。

第14章关于错误处理的内容，既有如何编程处理JavaScript错误，也包含了如何调试JavaScript的方法，而调试一直是JavaScript的弱项。

第16、17章讲述了利用JavaScript进行客户端到服务器的同学，不仅仅介绍了现在的Ajax技术的基础XML HTTP Request，还介绍了曾经出现过的一些方法。第17章更明确的介绍了如何调用Web服务。

第19章，介绍了如何考虑生产环境中JavaScript所需要注意的一些事情，如安全性、性能等。

第20章，展望了JavaScript未来的发展。

本书除了介绍了JavaScript的各个方面外，更难得的是，作者更涵盖了现今各个流行浏览器之间在这些方面的区别，并帮助读者，解决这些问题。

本书第1～5章由张欣翻译，第6～20章由曹力翻译，全书由张欣统稿、润色及审校。还要感谢全体工作人员的努力才将本书完成。

我们深深地感我们的家人和朋友。在翻译过程中，他们给予了我们莫大的关心、支持和帮助。

限于我们的水平，翻译过程中的疏漏和错误再作难免，请广大读者批评指正。

曹力
2006年于东南大学

目录

第1章  JavaScript是什么 1
1.1  历史简述 1
1.2  JavaScript实现 2
1.2.1  ECMAScript 3
1.2.2  DOM 5
1.2.3  BOM 8
1.3  小结 8
第2章  ECMAScript基础 9
2.1  语法 9
2.2  变量 10
2.3  关键字 12
2.4  保留字 12
2.5  原始值和引用值 13
2.6  原始类型 13
2.6.1  typeof运算符 14
2.6.2  Undefined类型 14
2.6.3  Null类型 15
2.6.4  Boolean类型 15
2.6.5  Number类型 15
2.6.6  String类型 17
2.7  转换 18
2.7.1  转换成字符串 18
2.7.2  转换成数字 19
2.7.3  强制类型转换 20
2.8  引用类型 22
2.8.1  Object类 22
2.8.2  Boolean类 23
2.8.3  Number类 23
2.8.4  String类 24
2.8.5  instanceof运算符 28
2.9  运算符 28
2.9.1  一元运算符 28
2.9.2  位运算符 32
2.9.3  Boolean运算符 37
2.9.4  乘性运算符 40
2.9.5  加性运算符 41
2.9.6  关系运算符 42
2.9.7  等性运算符 43
2.9.8  条件运算符 45
2.9.9  赋值运算符 45
2.9.10  逗号运算符 46
2.10  语句 46
2.10.1  if语句 46
2.10.2  迭代语句 47
2.10.3  有标签的语句 48
2.10.4  break语句和continue语句 48
2.10.5  with语句 50
2.10.6  switch语句 50
2.11  函数 51
2.11.1  无重载 53
2.11.2  arguments对象 53
2.11.3  Function类 54
2.11.4  闭包 56
2.12  小结 57
第3章  对象基础 58
3.1  面向对象术语 58
3.1.1  面向对象语言的要求 58
3.1.2  对象的构成 59
3.2  对象应用 59
3.2.1  声明和实例化 59
3.2.2  对象引用 59
3.2.3  对象废除 59
3.2.4  早绑定和晚绑定 60
3.3  对象的类型 60
3.3.1  本地对象 60
3.3.2  内置对象 70
3.3.3  宿主对象 75
3.4  作用域 75
3.4.1  公用、受保护和私有作用域 75
3.4.2  静态作用域并非静态的 76
3.4.3  关键字this 76
3.5  定义类或对象 78
3.5.1  工厂方式 78
3.5.2  构造函数方式 80
3.5.3  原型方式 80
3.5.4  混合的构造函数/原型方式 81
3.5.5  动态原型方法 82
3.5.6  混合工厂方式 83
3.5.7  采用哪种方式 84
3.5.8  实例 84
3.6  修改对象 86
3.6.1  创建新方法 86
3.6.2  重定义已有方法 87
3.6.3  极晚绑定 88
3.7  小结 88
第4章  继承 89
4.1  继承机制实例 89
4.2  继承机制的实现 90
4.2.1  继承的方式 90
4.2.2  一个更实际的例子 96
4.3  其他继承方式 100
4.3.1  zInherit 100
4.3.2  xbObjects 104
4.4  小结 108
第5章  浏览器中的JavaScript 109
5.1  HTML中的JavaScript 109
5.1.1  〈script/〉标签 109
5.1.2  外部文件格式 110
5.1.3  内嵌代码和外部文件 111
5.1.4  标签放置 111
5.1.5  隐藏还是不隐藏 113
5.1.6  〈noscript/〉标签 113
5.1.7  XHTML中的改变 114
5.2  SVG中的JavaScript 116
5.2.1  SVG基础 116
5.2.2  SVG中的〈script/〉标签 117
5.2.3  SVG中的标签放置 118
5.3  BOM 119
5.3.1  window对象 119
5.3.2  document对象 130
5.3.3  location对象 133
5.3.4  navigator对象 135
5.3.5  screen对象 136
5.4  小结 137
第6章  DOM基础 138
6.1  什么是DOM？ 138
6.1.1  XML简介 138
6.1.2  针对XML的API 141
6.1.3  节点的层次 141
6.1.4  特定语言的DOM 144
6.2  对DOM的支持 145
6.3  使用DOM 145
6.3.1  访问相关的节点 145
6.3.2  检测节点类型 146
6.3.3  处理特性 147
6.3.4  访问指定节点 148
6.3.5  创建和操作节点 150
6.4  HTML DOM特征功能 155
6.4.1  让特性像属性一样 155
6.4.2  table方法 156
6.5  遍历DOM 158
6.5.1  NodeIterator 158
6.5.2  TreeWalker 163
6.6  测试与DOM标准的一致性 165
6.7  DOM Level 3 166
6.8  小结 166
第7章  正则表达式 167
7.1  正则表达式支持 167
7.1.1  使用RegExp对象 168
7.1.2  扩展的字符串方法 169
7.2  简单模式 170
7.2.1  元字符 170
7.2.2  使用特殊字符 170
7.2.3  字符类 172
7.2.4  量词 174
7.3  复杂模式 177
7.3.1  分组 177
7.3.2  反向引用 178
7.3.3  候选 179
7.3.4  非捕获性分组 180
7.3.5  前瞻 181
7.3.6  边界 182
7.3.7  多行模式 183
7.4  理解RegExp对象 184
7.4.1  实例属性 184
7.4.2  静态属性 185
7.5  常用模式 186
7.5.1  验证日期 187
7.5.2  验证信用卡号 188
7.5.3  验证电子邮件地址 192
7.6  小结 193
第8章  检测浏览器和操作系统 194
8.1  navigator对象 194
8.2  检测浏览器的方式 194
8.2.1  对象/特征检测法 194
8.2.2  user-agent字符串检测法 195
8.3  user-agent字符串简史 196
8.3.1  Netscape Navigator 3.0与 IE3.0 196
8.3.2  Netscape Communicator 4.0与IE 4.0 197
8.3.3  IE 5.0及更高版本 198
8.3.4  Mozilla 198
8.3.5  Opera 200
8.3.6  Safari 201
8.3.7  结语 201
8.4  浏览器检测脚本 201
8.4.1  方法学 202
8.4.2  第一步 202
8.4.3  检测Opera 204
8.4.4  检测Konqueror/Safari 206
8.4.5  检测IE 208
8.4.6  检测Mozilla 209
8.4.7  检测Netscape Communicator       4.x 210
8.5  平台/操作系统检测脚本 211
8.5.1  方法学 211
8.5.2  第一步 212
8.5.3  检测Windows操作系统 212
8.5.4  检测Macintosh操作系统 214
8.5.5  检测Unix操作系统 214
8.6  全部脚本 215
8.7  例子：登录页面 219
8.8  小结 224
第9章  事件 225
9.1  今天的事件 225
9.2  事件流 226
9.2.1  冒泡型事件 226
9.2.2  捕获型事件 227
9.2.3  DOM事件流 228
9.3  事件处理函数/监听函数 229
9.3.1  IE 230
9.3.2  DOM 231
9.4  事件对象 232
9.4.1  定位 233
9.4.2  属性/方法 233
9.4.3  相似性 235
9.4.4  区别 238
9.5  事件的类型 240
9.5.1  鼠标事件 240
9.5.2  键盘事件 244
9.5.3  HTML事件 246
9.5.4  变化事件 251
9.6  跨平台的事件 252
9.6.1  EventUtil对象 252
9.6.2  添加/删除事件处理函数 252
9.6.3  格式化event对象 254
9.6.4  获取事件对象 258
9.6.5  示例 259
9.7  小结 260
第10章  高级DOM技术 261
10.1  样式编程 261
10.1.1  DOM样式的方法 263
10.1.2  自定义鼠标提示 264
10.1.3  可折叠区域 265
10.1.4  访问样式表 266
10.1.5  最终样式 270
10.2  innerText和innerHTML 271
10.3  outerText和outerHTML 273
10.4  范围 274
10.4.1  DOM中的范围 274
10.4.2  IE中的范围 284
10.4.3  范围在实际中的应用 288
10.5  小结 288
第11章  表单和数据完整性 289
11.1  表单基础 289
11.2  对〈form/〉元素进行脚本编写 291
11.2.1  获取表单的引用 291
11.2.2  访问表单字段 291
11.2.3  表单字段的共性 292
11.2.4  聚焦于第一个字段 292
11.2.5  提交表单 293
11.2.6  仅提交一次 294
11.2.7  重置表单 295
11.3  文本框 295
11.3.1  获取/更改文本框的值 296
11.3.2  选择文本 297
11.3.3  文本框事件 298
11.3.4  自动选择文本 298
11.3.5  自动切换到下一个 299
11.3.6  限制textarea的字符数 300
11.3.7  允许/阻止文本框中的字符 301
11.3.8  使用上下按键操作数字文本 306
11.4  列表框和组合框 308
11.4.1  访问选项 309
11.4.2  获取/更改选中项 309
11.4.3  添加选项 310
11.4.4  删除选项 311
11.4.5  移动选项 312
11.4.6  重新排序选项 313
11.5  创建自动提示的文本框 313
11.5.1  匹配 314
11.5.2  内部机制 314
11.6  小结 316
第12章  表格排序 317
12.1  起点——数组 317
12.2  对单列的表格排序 319
12.2.1  比较函数 320
12.2.2  sortTable()函数 320
12.3  对多列表格进行排序 323
12.3.1  比较函数生成器 323
12.3.2  修改sortTable()方法 324
12.3.3  逆序排列 325
12.3.4  对不同的数据类型进行排序 327
12.3.5  高级排序 330
12.4  小结 334
第13章  拖放 335
13.1  系统拖放 335
13.1.1  拖放事件 336
13.1.2  数据传输对象dataTransfer 341
13.1.3  dragDrop()方法 345
13.1.4  优点及缺点 346
13.2  模拟拖放 346
13.2.1  代码 347
13.2.2  创建放置目标 349
13.2.3  优点及缺点 352
13.3  zDragDrop 352
13.3.1  创建可拖动元素 352
13.3.2  创建放置目标 353
13.3.3  事件 353
13.3.4  例子 354
13.4  小结 355
第14章  错误处理 356
14.1  错误处理的重要性 356
14.2  错误和异常 357
14.3  错误报告 358
14.3.1  IE（Windows） 358
14.3.2  IE（MacOS） 359
14.3.3  Mozilla（所有平台） 359
14.3.4  Safari（MacOS） 360
14.3.5  Opera 7（所有平台） 361
14.4  处理错误 362
14.4.1  onerror事件处理函数 362
14.4.2  try...catch语句 365
14.5  调试技巧 370
14.5.1  使用警告框 370
14.5.2  使用Java控制台 371
14.5.3  将消息写入JavaScript控制台 （仅限Opera 7+） 372
14.5.4  抛出自定义错误 372
14.5.5  JavaScript校验器 373
14.6  调试器 374
14.6.1  Microsoft Script Debugger 374
14.6.2  Venkman 376
14.7  小结 383
第15章  JavaScript中的XML 384
15.1  浏览器中的XML DOM支持 384
15.1.1  IE中的XML DOM支持 384
15.1.2  Mozilla中XML DOM支持 388
15.1.3  通用接口 393
15.2  浏览器中的XPath支持 403
15.2.1  XPath简介 403
15.2.2  IE中的XPath支持 404
15.2.3  Mozilla中的XPath支持 404
15.3  浏览器中的XSLT支持 408
15.3.1  IE中的XSLT支持 410
15.3.2  Mozilla中XSLT支持 413
15.4  小结 415
第16章  客户端与服务器端的通信 416
16.1  cookie 416
16.1.1  cookie的成分 416
16.1.2  其他安全限制 417
16.1.3  JavaScript中的cookie 417
16.1.4  服务器端的cookie 419
16.1.5  在客户端与服务器端之间传递cookie 422
16.2  隐藏框架 423
16.3  HTTP请求 426
16.3.1  使用HTTP首部 428
16.3.2  实现的复制品 429
16.3.3  进行GET请求 430
16.3.4  进行POST请求 430
16.4  LiveConnect请求 431
16.4.1  进行GET请求 431
16.4.2  进行POST请求 433
16.5  智能HTTP请求 435
16.5.1  get()方法 435
16.5.2  post()方法 438
16.6  实际使用 439
16.7  小结 439
第17章  Web服务 440
17.1  Web服务快速入门 440
17.1.1  Web服务是什么？ 440
17.1.2  WSDL 441
17.2  IE中的Web服务 443
17.2.1  使用WebService组件 444
17.2.2  WebService组件例子 445
17.3  Mozilla中的Web服务 447
17.3.1  加强的特权 447
17.3.2  使用SOAP方法 448
17.3.3  使用WSDL代理 451
17.4  跨浏览器的方案 454
17.4.1  WebService对象 454
17.4.2  Temperature 服务 456
17.4.3  使用TemperatureService对象 458
17.5  小结 458
第18章  与插件进行交互 459
18.1  为何使用插件 459
18.2  流行的插件 460
18.3  MIME类型 460
18.4  嵌入插件 461
18.4.1  加入参数 461
18.4.2  Netscape 4.x 462
18.5  检测插件 462
18.5.1  检测Netscape式插件 463
18.5.2  检测ActiveX插件 467
18.5.3  跨浏览器检测 469
18.6  Java applet 470
18.6.1  嵌入applet 470
18.6.2  在JavaScript中引用applet 471
18.6.3  创建applet 471
18.6.4  JavaScript到Java的通信 472
18.6.5  Java到JavaScript的通信 475
18.7  Flash动画 477
18.7.1  嵌入Flash动画 477
18.7.2  引用Flash动画 478
18.7.3  JavaScript到Flash的通信 478
18.7.4  Flash到JavaScript通信 481
18.8  ActiveX控件 483
18.9  小结 485
第19章  部署问题 486
19.1  安全性 486
19.1.1  同源策略 486
19.1.2  窗口对象问题 487
19.1.3  Mozilla特有的问题 488
19.1.4  资源限制 490
19.2  国际化 491
19.2.1  使用JavaScript检测语言 491
19.2.2  策略 492
19.2.3  字符串的思考 492
19.3  优化JavaScript 495
19.3.1  下载时间 495
19.3.2  执行时间 499
19.4  知识产权的问题 512
19.4.1  混淆 512
19.4.2  Microsoft Script Encoder（仅IE） 513
19.5  小结 514
第20章  JavaScript的未来 515
20.1  ECMAScript 4 515
20.1.1  Netscape的提案 515
20.1.2  实现 521
20.2  ECMAScript for XML 522
20.2.1  途径 522
20.2.2  for each..in循环 524
20.2.3  新的类 524
20.2.4  实现 532
20.3  小结 532
索引

原文地址：http://www.jadetower.org/muses/archives/000307.html

翻译：ShiningRay

我在过去的几周内一直在写JavaScript代码——使用我们的对话框系统来个性化Mozilla。假设你要求：“嘿，电脑，我要教你如何在Amazon.com上找书。首先你象这样进入Amazon，然后在这里输入你要的书的名字。点击“Go”然后……”我的困难在于对Mozilla编码使我的对话框系统可以“看”浏览器中正在进行什么然后自己可以执行这些动作。

由于Mozilla中较高的层次是用JavaScript实现的。所以我一直在废寝忘食研究它（我的Rhino book里面全是我做的书签）我写的越多，我越觉得它像Lisp。

考虑以下代码：

semanticAccepter = acceptOnlyIf(
    acceptNot(emptyTextAccepter),
    scriptFilter,
    acceptAny(
        textAccepter,
        linkAccepter,
        formRelatedElementAccepter,
        linkImageAccepter));
usefulContentOfThePage = new SemTree(semanticAccepter);

这里SemTree是一个对象，它允许你从一个HTML DOM 树中选出某些你感兴趣的节点，去掉那些你不感兴趣的节点。（根本上说，这是一个TreeWalker 类的包装器。）若要建立一个 SemTree ，你要给出一个接受器。一个接受器只是一个判断给定节点是否能被接受的一个函数：

function emptyTextAccepter(n) {
    return (n instanceof Text) && n.data.match(/^\s*$/);
}

一旦有了一些基本的接受器和筛选器，很容易就可以定义组合筛选器──一种将筛选器以特殊形式组合起来的函数：

function acceptAny() {
    var disjuncts = arguments;
    return function(n) {
        for (var i = 0; i < disjuncts.length; ++i) {
            var shouldAccept = disjuncts[i](n);
            if (shouldAccept) return shouldAccept;
        }
        return false;
    }
}

当它被调用的时候，以接受器作为参数，acceptAny返回一个新的接受器，可以接受只要是 disjuncts 能接受的那些给定节点 n。所以，semanticAccepter 中出现的acceptAny 能接受文本、链接、表单和链接中的图像。相反地，acceptOnlyIf只能接受被所有接受器组件接受的节点。acceptOnlyIf的定义类似于acceptAny：

function acceptOnlyIf() {
    var conjuncts = arguments;
    return function(n) {
        for (var i = 0; i < conjuncts.length; ++i) {
            var shouldAccept = conjuncts[i](n);
            if (shouldAccept != true) return shouldAccept;
        }
        return true;
    }
}

acceptOnlyIf和acceptAny如此相似让我纳闷是否有一个通用的方法可以将任一个组合器（像否定、短路与、短路或）变成一个组合筛选器（象acceptNot、acceptOnlyIf、acceptAny）。的确有，但JavaScript不胜任这个任务。要完成这个，我们需要更强大的武器。

将函数的能力定义得和单子的功能一样微小

通过提供第一类型函数，JavaScript迈出了进入更广阔世界的第一步。而这个世界中最具影响的便是Haskell和它的一些变体。由于接受器告诉我们是否要接受一个节点，它们应该是一个从节点到布尔值的函数。在Haskell中，我们这样写：

type Accepter = Node -> Bool

这样，否定是一个布尔到另一布尔，合取和析取是从一个布尔的列表到一个单个布尔值，这样写：

not ::  Bool  -> Bool
and :: [Bool] -> Bool
or  :: [Bool] -> Bool

组合接受器有类似的形式：

acceptNot    ::  Accepter  -> Accepter
acceptOnlyIf :: [Accepter] -> Accepter
acceptAny    :: [Accepter] -> Accepter

我们给semanticAccepter下的定义和JavaScript版的类似：

semanticAccepter = acceptOnlyIf [
    acceptNot emptyTextAccepter,
    scriptFilter,
    acceptAny [
        textAccepter,
        linkAccepter,
        formRelatedElementAccepter,
        linkImageAccepter]];

我们怎样定义一个类似acceptOnlyIf的组合器？Haskell没有像一些语言中的命令结构。取代的是递归：

acceptOnlyIf []     n = true
acceptOnlyIf (a:as) n | a n        = true
                      | otherwise  = acceptOnlyIf as n 

由于某些原因，短变量名是Haskell中的标准。n是一个节点，a是一个接受器，as是一个接受器的列表。（以’s'结尾是代表某个变量是列表的标准形式。）你上面看到的定义是正确的，但我不常用这个方法。我会使用一个优美的小函数叫map：

map :: (a -> b) -> ([a] -> [b])
map f []     = []
map f (x:xs) = f x : map xs

当传了一个函数和一个列表，map返回对列表中的每个元素执行函数后生成的列表。有了map后，acceptOnlyIf
就可以这样定义。

acceptOnlyIf as n = and (map (\a -> a n) as)

这里语法 (\a -> a n) 基本意思和JavaScript下面的一样：

function(a) {
    return a(n);
}

整个acceptOnlyIf的定义本质上说明了，“给出一个节点n，找出每个接受器对n的值，然后返回这些值的合取值（和值AND）。”有了这种定义函数的优美方法之后，它们之间的相似之处立刻显现出来了：

acceptOnlyIf as n = and (map (\a -> a n) as)
acceptAny    as n = or  (map (\a -> a n) as)

这样，泛化就是一些琐碎的事了：

liftCombiner :: ([Bool] -> Bool) -> ([Accepter] -> Accepter)
liftCombiner c as n = c (map (\a -> a n) as)
acceptOnlyIf = liftCombiner and
acceptAny    = liftCombiner or

现在我们是否可以更进一步了呢？我们是否可以也将 not搞成 acceptNot呢？and和 not的主要区别在于 and参数是一个布尔值的列表，而not只能针对单个布尔值。要更进一步泛化 liftCombiner，我们必须：

1. 找出可以描绘出基本值和列表的共同特性的结构。
2. 将这个结构应用到合成组合器的问题中.

Haskell 正好有我们所需要的。它称为单子Monad.

什么是单子？

之前就有人问过这个问题。单子到处可见。大多数结构和过程/进程像数据类型、函数、对象、、异常、I/O、副作用、同步、事务、分析器和编程语言，都可以接受单独的、原子的操作。组对（Pair）、元组（tuple）、列表、树、图——这些数据结构都有一个单子级的解释，是常常不止一个。由于是单子的东西太多了，所以很难对它们进行描述。不过我还是可以给你一个数学上的定义。但是正如“A continuation is the rest of the computation ”所说的，给出单子的定义只有在你已经对它有了一些感性的认识才有用。否则直接给出定义只会混淆你的观点。那先让我们研究一下这个谦虚的列表作为我们受到单子启发的途径。

检验结构有很多方法。其中一个方法是查看各部分是如何一起工作来组成整体的。当以这种方法分析列表的时候，我们发现它们是连接的解码：一个列表要么是空的要么是一个由一个head和一个tail组成的Cons（一种构造函数，返回一个新的列表）。head是一个列表的元素，tail则是列表的其它部分。

data LinkedList a = Nil | Cons a (List a)

若要定义列表[1, 2, 3]，我们这样写：To define the list [1, 2, 3], we write:

oneTwoThree = Cons 1 (Cons 2 (Cons 3 (Cons Nil)))

Haskell中的列表就是这样工作的。除了用[]代表 Nil和用: 代表 Cons。逗号可以用来分隔条目，可以写成这样：

oneTwoThree = 1 : (2 : (3 : []))

链表有一个很长很有名的历史。不幸的是分解材料并不会显露出单子。

另一种分析列表的方法是通过研究它是如何和其它东西相关、进行交互的。Haskell提供了“class”机制根据和它们相关联的方法来定义对象。类似于抽象数据类型和接口：

class List ls where
    nil  :: ls a
    cons :: a -> ls a -> ls a
    head :: ls a -> a
    tail :: ls a -> ls a
    map  :: (a -> b) -> (ls a -> ls b)

这是一个看似完美的列表类，但它几乎没有从分解材料中抽象出什么东西。所有的方法，除了 map，都是特定于列表的逻辑结构的，map抓住了一个较抽象的概念。它将一个函数作为参数，然后返回一个被函数处理过新的列表。回忆一下 map 对定义 acceptAny 和 acceptOnlyIf 起了多大的帮助？这很明确是个值得研究的函数。

还有哪些其它函数对列表作为一个独立于它特定实现和形态的数据结构来说是至关重要的呢？好吧，还应该有一个方法 unit来把一个单独的元素放入一个列表，而且我们还需要一个 join 来将一个列表的列表组成一个长的列表。这个类定义像这样：

class List ls where
    unit :: a -> ls a
    map  :: (a -> b) -> (ls a -> ls b)
    join :: ls (ls a) -> ls a

以下是链表的实现：

instance List [] where
    unit a = [a]
    map  f []     = []
    map  f (a:as) = f a : map f as

    join []       = []
    join [ls:lss] = ls ++ join lss

这些方法一目了然：unit将参数放入列表，map对列表中的每个元素执行函数，join将一个列表的列表连成一串。让我们确定一下串连接符（++）的定义吧：

(++) []     ls = ls
(++) (k:ks) ls = k : (ks ++ ls)
[1, 2, 3] ++ [4, 5, 6]        --> [1, 2, 3, 4, 5, 6]
unit 5                        --> [5]
map (\x -> x + x) [1, 2, 3]   --> [2, 4, 6]
join [[1], [2, 3], [4, 5, 6]] --> [1, 2, 3, 4, 5, 6]

这些函数都十分简单而且十分有用。它们确实是列表的标准成分，但就好比火药一样，如果你把它们正确地组合起来，你就能引爆一些东西：一个单子。我们等不及这个式子了：

class Monad m where
    return :: a -> m a
    (>>=)  :: m a -> (a -> m b) -> m b

就是它了。两个函数：return将一些东西放入单子中，同时（>>=），称为“绑定”，将一个单子变成另一个。我们立即来看看单子到底能做什么。不过首先为了明确起见，我们先将我们的列表实现扩展成应用一个单子：

instance Monad [] where

    return a   = [a]

    (>>=) ls f = join (map f ls)

return定义和 unit一样：将它自己放入一个列表中。绑定 (>>=)将map 和 join 组合成一个操作。首先你将函数k映射到列表 ls ，然后由于 f返回一个列表的列表，你再用 join 将结果组成单个列表。

但单子这东西有什么好处呢？设想你想要将一个列表中的所有值和另一个列表中的值相加来产生一个大的列表：

sumTwoLists [1, 2, 3] [4, 5, 6] --> [5, 6, 7, 6, 7, 8, 7, 8, 9]

JavaScript代码应该像：

function sumTwoLists(ks, ls) {
    var result = [];
    for (var i = 0; i < ks.length; ++i) {
        for (var j = 0; j < ls.length; ++j) {
            result.push(ks[i] + ls[j]);
        }
    }
    return result;
}

应用了单子我们可以这样写：

sumTwoLists ks ls = return (ks >>= \k ->
                            ls >>= \l ->
                            k + l)

代码看来很简练，但没什么特别的。幸运的是，由于单子是如此有用，所以更好的语法形式也出现很久了。我们应该这样写：

sumTwoLists ks ls = do k <- ks
                       l <- ls
                       return k + l

这称为“do notation做标记”为了明显起见。还有另一种变体，我个人喜欢叫“列表包含语法”或者“我无法相信这没有成为一个学说”：

sumTwoLists ks ls = [k + l | k <- ks, l <- ls]

不论哪种方法，都是所有的单子之上的一种较好语法。这种较好语法也许看上去像某种命令语言或什么蛇的东西（指Python语言──译注）。但我不接受其它替代语法，在Haskell中任何单子都能使用两者之一。

我们看看一个列表单子是如何工作的，但我们仅有的单子是 LinkedList。对于not，我们只需要一个直接变换值的单子就行了：一个一致单子。它不会对值做特殊的改变，仅仅直接返回值：

instance Monad Identity where
    return a  = a
    (>>=) a f = f a

现在我们终于可以完整地定义 liftCombiner了：

liftCombiner c as n = c [a n | a <- as]

现在“让组合器能工作在所有接受器上”的这个想法已经不难实现了：

acceptOnlyIf = liftCombiner and
acceptAny    = liftCombiner or
acceptNot    = liftCombiner not

最后的思考

今天我们看了如何处理组合的接受器（从节点到布尔的函数），组合器可以是任何单子。结果接受器也是单子。你认为是否有一种方法，可以让组合器组合任意单子和其它单子（除了接受器之外）？如果有，怎样做？如果没有，单子之间要有怎样的关联才能这样？

介绍异步JavaScript技术和XML（AJAX）

使用JavaScript技术，一个HTML页面可以异步地对服务器（一般是载入页面的服务器）发送请求并获取XML文档。然后JavaScript可以使用XML文档来更新或改动HTML页面的文档对象模型（DOM）。最近形成了一个术语AJAX（Asynchronous JavaScript Technology and XML）来描述这种交互模型。

AJAX其实不是很新的东西。这些技术对于Windows平台上专注于Internet Explorer的开发人员来说，已经存在好几年了。直到最近，这个技术才被作为Web远程技术或者远程脚本技术被大家了解。Web开发人员也有一段时间曾经使用过插件、Java applet和隐藏框架来模拟这种交互模型。最近发生的变化是，对XMLHttpRequest对象的支持已经成为所有平台上的主流浏览器都包括的特性了。JavaScript技术的XMLHttpRequest对象是。尽管在正式的JavaScript技术标准中并没有提到这种对象，然而今天主流的浏览器都对他提供了支持。而当代的浏览器如Firefox、Internet Explorer以及Safari在JavaScript技术和CSS的支持上有些细微的差别，但是这种差别是可以处理的。如果你要考虑支持较老的浏览器，AJAX也许就不能成为你的解决方法。

基于AJAX的客户端之所以独特的原因是客户端包含了用JavaScript嵌入的特定于页面的控制逻辑。应用JavaScript技术的页面基于事件进行交互，如文档载入、鼠标点击、焦点改变甚至是定时器。AJAX交互使得表现层逻辑更加清晰地与数据分离。一个HTML页面也可以根据需要每次读入适当的数据，而不是每次需要显示一个更改时都重新载入整个页面。AJAX要求一种不同的服务器架构来支持它这种交互模型。以前，服务器端Web应用关注于对每个导致服务器调用的客户端事件都生成HTML文档。然后客户端对每个回应都要重新读入并重新渲染完整的HTML页面。富Web应用(Rich Web Application)关注于，让一个客户端获取一个HTML文档让它表现为一个模板或者是一个容器，可以基于事件并使用从服务器端组件中获取的XML 数据来对文档注入内容。

一些AJAX交互的应用如：

• 实时表单数据检验：像用户ID、序列号、邮政编码或者是特殊的票据代码这类需要服务器端验证的数据也可以在用户提交表单之前进行验证。
• 自动补全:像电子邮件地址、姓名或城市名之类的表单数据都可以根据用户情况自动补全。
• 处理细节操作：根据一个客户端事件，一个HTML页面可以根据现存的一些数据再去获取更多详细的信息，如现在有一个产品列表，客户端可以控制查看单独的产品信息而无需刷新页面。
• 复杂的用户界面控件：像树型控件、菜单和进度条之类不要求页面刷新的控件也能实现。
• 页面内刷新数据：HTML页面可以从服务器上查询最新的数据如分数、股指、天气还有其它的特定于应用的数据。
• 服务器端通知：一个HTML页面可以通过对服务器进行定时查询来模拟一个服务器的事件通知推送，实现像通知客户端一个消息、刷新页面数据或将客户端重定向到另一个页面。

这个列表并未把所有的应用都列出来，但它已经显示了AJAX交互可以让Web应用比从前能做更多的事情。但尽管这些好处是值得关注的，这种方式也有一些缺点：

• 复杂度：服务器端开发人员必需理解，HTML客户端页面中的表现层逻辑以及生成HTML客户端页面所需的XML内容的服务器端逻辑。HTML页面开发人员必须了解JavaScript技术。如果开发新的框架和发展已有的框架来支持这种交互模型，那么AJAX应用的创建就会越来越简单。
• XMLHttpRequest对象的标准化：XMLHttpRequest对象还不是JavaScript技术标准的一部分，这就意味着根据客户端的不同，应用的行为也有所会不同。
• JavaScript技术的实现：AJAX交互极大地依赖于JavaScript技术，而由于客户端的原因JavaScript还有一些细微的差别。见QuirksMode.org来了解更多关于浏览器之间区别的内容。
• 调试:AJAX应用也难于调试，因为流程逻辑是同时嵌在客户端中和服务器上的。
• 代码可见：客户端的JavaScript可以很容易通过“查看源代码”被人看见。一个没有良好设计的AJAX应用很可能被黑客攻击或被他人剽窃。

当开发人员在使用AJAX交互模型上获得更多的经验后，AJAX技术的框架和模式就会慢慢浮现出来。现在就关注于完全通用的AJAX交互框架，还为时过早。本文和相关的解决方案将关注于在现有的Java 2平台企业版（J2EE）上如何对AJAX进行支持，像servlet，JavaServer Page（JSP）软件、JavaServer Face应用和Java标准标签库（JSTL）。

AJAX交互剖析

现在我们已经讨论了AJAX是什么以及一些高层次的问题。那现在让我们把所有的零件放在一起来展示一个具有AJAX的J2EE应用。

首先考虑一个例子。一个Web应用包括了一个静态HTML页面，或者是一个由JSP生成的HTML页面，这个JSP中还包括了一个HTML表单，它需要服务器端逻辑来对表单中的数据进行检验，而不用刷新页面。一个名为ValidateServlet服务器端组件(servlet)用来提供这种验证逻辑。图一描述了这种具有验证逻辑的AJAX交互的细节。

图1: 一个提供验证逻辑的AJAX交互

以下条目代表了图1中出来AJAX交互的过程：

1. 发生一个客户端事件。
2. 创建和配置一个XMLHttpRequest对象。
3. XMLHttpRequest对象进行一个调用。
4. ValidateServlet对请求进行处理。
5. ValidateServlet返回一个包含了结果的XML文档。
6. XMLHttpRequest对象调用callback()函数并处理结果。
7. 更新 HTML DOM。

现在让我们逐个研究这个AJAX模型的每一步。

1.发生一个客户端事件。

在一个事件发生时可以调用相应的JavaScript函数。在这里，validate()函数可以被映射到一个链接或者是表单组件的onkeyup事件上去。

每次用户在表单域中按下一个键时，表单元素将都调用validate()函数。 

2. 建立和配置一个XMLHttpRequest对象

创建和配置一个XMLHttpRequest对象

validate()函数建立了一个XMLHttpRequest对象并对象中的open函数。open函数需要两个参数：HTTP方法，可以是GET或POST; 和对象进行交互的服务器端组件的URL；一个布尔变量，表示是否要进行异步调用。API是XMLHttpRequest.open(String method, String URL, boolean asynchronous)。如果一个交互被设置为异步， (true) 那就必须指明一个回调函数。可以使用req.onreadystatechange = callback;来设置这个交互的回调函数。详细内容见第六节。

3.XMLHttpRequest对象进行调用

当收到了语句req.send(null);，就会进行一次调用。HTTPGET的情况下，内容可以是null或者留空。当调用XMLHttpRequest的这个函数时，也会对已经配置了的URL进行调用。在下面这个例子中，要发送的数据(id)将作为一个URL参数。

使用HTTPGET,两个重复的请求将返回同样的结果。当使用HTTPGET方法时，要注意URL的长度，包括已经转义的URL参数，可能会受到某些浏览器和服务器端的Web容器的限制。当发送的数据会影响到服务器端的应用程序的状态时，就应该使用HTTPPOST方法。使用HTTPPOST必须要对XMLHttpRequest对象设置一个Content-Type头，使用以下语句：

当从JavaScript中发送表单值得时候，你应该考虑对字段值进行编码。JavaScript中有一个函数escape()，应该用他来确保区域化的内容被正确编码，同时特殊字符也被正确转义。

4. ValidateServlet对请求进行处理.

一个映射到URI “validate” 的servlet将检验user ID是不是已经在数据库中存在了。

一个servlet处理一个XMLHttpRequest ，就像对待其它的HTTP请求一样。下面的例子显示了服务器从请求中抽取出id参数并检验是否被占用了。

在这个例子中，一个简单的HashMap用来存放存在的用户名。在这个例子中，我们假设用户的ID是duke。

5.ValidateServlet返回一个包含结果的XML文档

用户ID “duke” 在users HashMap的用户ID列表中出现了。将在应答中写一个包含值为invalid的message元素的XML文档。更复杂的用例将要求DOM、XSLT或其他API来生成这个应答。

开发人员必须注意两个事情。第一，Content-Type必须设为text/xml。第二，Cache-Control必须设为no-cache。XMLHttpRequest对象只会处理Content-Type为text/xml的应答，同时把将Cache-Control设为no-cache将确保浏览器不会从缓存相同的URL（包括参数）返回的应答。

6.XMLHttpRequest对象调用callback()函数并处理结果。

XMLHttpRequest对象已经配置为当有readyState改变的时候就调用callback()函数。让我们假设已经ValidateServlet调用了而且ValidateServlet是4,表示XMLHttpRequest的调用已经完成。HTTP状态代码200表示一个成功的HTTP交互。

浏览器维护了一个所显示的文档的对象形式（也就是所谓的Docuemt Object Model或DOM）。HTML页面中的JavaScript可以访问DOM，同时在页面载入完之后，可以使用API来修改DOM。

根据成功的请求，JavaScript代码可以修改HTML页面的DOM。从ValidateServlet获得的对象形式的XML文档可以通过req.responseXML在JavaScript中获得，req是一个XMLHttpRequest对象。DOM API给JavaScript提供了获取这个文档中的内容以及修改HTML页面的DOM的方法。所返回的字符串形式的XML文档可以通过req.responseText获得。现在我们看看如何在JavaScript中使用DOM API，先看以下从ValidateServlet返回的XML文档。

这个例子是一个简单的只包含了一个message元素的XML片断，里面只有一个简单的字符串valid或invalid。一个更高级的例子可以包含多于一个的消息和可以给用户看的有效的名字：

parseMessages()函数将处理一个从ValidateServlet获取的XML文档。这个函数会调用setMessage()with the，并给出message作为参数来更新HTML DOM。

7.更新HTML DOM

JavaScript技术可以使用很多API从HTML DOM中获得任何元素对象的引用。推荐的获得元素引用的方法是调用document.getElementById("userIdMessage"), "userIdMessage"是HTML文档中出现的一个元素的ID属性。有了这个元素的引用，就可以使用JavaScript来修改元素的属性、修改元素的样式、添加、删除或修改子元素。

一个常见的改变元素主体内容的方法是设置元素的innerHTML属性，如下所示：

受到影响的那部分HTML页面会立刻根据innerHTML的设置重新渲染。如果innerHTML属性包含类似<image>或者是<iframe>之类的元素，那么由那些元素所指定的内容同样会被获取并渲染。

这种途径的主要缺点是HTML元素是作为字符串硬编码在JavaScript中的。JavaScript中硬编码的HTML标记不是一种好的实践，因为它使代码难于阅读、维护和修改。我们应该考虑在JavaScript中使用DOM API来创建和修改HTML元素。把显示和JavaScript代码的字符串混在一起只会让页面更难于阅读和编辑。

另一种修改HTML DOM的方法是动态地产生新的元素并把他们作为子元素追加到目标元素，如下面的例子所示：

这个范例展示了JavaScript技术的DOM API可以用来更有目的地建立或改变一个元素。当然JavaScript的DOM AP在不同的浏览器上也可能有差别，所以你必须在开发应用程序时小心。

Java BluePrint的解决方案目录

TheJava Blueprints Solutions Catalog是用来收集J2EE技术上AJAX的最佳实践的。每个解决方案包含一个问题和方法的描述、一个设计文档和可运行的源码。这些解决方案是为了让你根据需要在自己的应用程序中复用。以下是已经提供的AJAX交互：

自动补全

自动补全提供了当用户在一个HTML表单中输入一个请求时对数据浏览的简化方式。当用户面对一大片数据时，可以在输入数据时把可能的完整形式显示给用户。然后选择其中一个完整形式可以保证用户输入的数据已经存在在服务器上。

考虑一个大公司的一个名字查找的Web应用。如图2所示，只要输入姓或名的开头几个字母就可以得到人的列表。用户可以然后就只要点击一下就可以浏览用户的详细信息。

图2：名字自动补全

进度条

在Web应用中，一个服务器端任务也可能要花一段时间去完成。这段时间很可能会超过HTTP交互的时间上限（超时）。当用户不知道这个任务什么时候才能完成时，用户很可能会重新提交一次表单或直接退出会话状态。一般来说，Web应用使用页面刷新来跟踪服务器端操作的状态，这种方式可能会让人厌烦而且也不准确。AJAX可以用来仅在一个HTML页面中跟踪服务器端操作的状态而无需刷新页面。用户可以以图形方式看到服务器端操作的进度，如图3。

图3：进度条

刷新数据

向一个HTML页面提供最新的数据或服务器消息提醒在现在的Web世界中也是十分重要的，因为现在的Web世界中数据一直不停变化。尽管它不是一个实实在在的推送技术，但它可以通过使用AJAX交互不断进行查询来模拟。当数据需要更新或者要进行提醒，HTML页面将会动态地改变。图4显示了HTML页面中的一个服务器端计数器。这个计数器会在页面后台自动更新。

图4：服务器端计数器在刷新数据

实时检验

不是所有的表单域都可以单独用JavaScript技术在客户端完成。某些表单数据要求服务器端的验证逻辑。传统和Web应用曾使用页面刷新来完成这种验证，但这可能有些让人烦。

考虑一个需要一个唯一用户ID的Web应用。使用AJAX交互，用户可以在输入的时候就知道ID是否有效（图5）。

图5：指出用户ID无效

当一个用户输入了一个无效的用户ID，应用程序禁止了提交按钮并且向用户显示了一个信息（图6）。

图6：用户ID通过验证

用户马上就能知道用户ID是可用的也是有效的。