| 本文对 AJAX（Asynchronous JavaScript And XML，异步 JavaScript 和 XML）进行了简要的介绍，并对 AJAX 如何与 Sun Java Studio Creator 2 IDE 很好地配合使用进行了说明。首先介绍了有关 AJAX（您可能会在别处看到它被写为 "Ajax"）的一些背景信息，并着重说明了 AJAX 与各种 HTML 技术之间的区别。接下来，本文从技术角度简要地介绍了 AJAX，然后对 AJAX 如何与 Java Studio Creator 2 IDE 配合使用进行了说明。 |
目录
什么是 AJAX？
AJAX 是一项正在迅速风行的技术，它可以为 Web 应用程序创建更佳的 Web 浏览器用户界面。您也许曾经在浏览 Web 站点时看到过 AJAX，它无处不在的身影，似乎让您觉察不到它的存在。当页面上发生由用户引起的更改时，通过每次更新页面的一部分来代替重新装入整个页面，AJAX 可以帮助您提高应用程序 Web 页的速度和可用性。
而且，AJAX 所使用的功能已存在于新型的 Web 浏览器中，因此不需要任何插件。为了更好地了解 AJAX，让我们来看一个包括 AJAX 技术的简单 Web 应用程序示例，然后将该技术与 HTML 和 DHTML 进行比较。
Google(TM) Suggest 是一个很好的使用 AJAX 的简单 Web 应用程序示例。请参见图 1。
 |
图 1：Ajax 示例：Google Suggest
|
下面是此应用程序的工作原理。当在输入字段中键入数据时，Google 将在一个位于输入字段下方的简短列表中提供一些用来完成输入内容的建议。例如，在图 1 中，我们键入了字母 "aja"，则应用程序将基于我们键入的内容不断地更新建议的选项列表。除了提供完成输入内容的可能条目列表之外，Google 还建议将 "ajax" 作为最适用的选项，它在输入字段中预先键入了该字符串的最后一部分 ("x")，并在列表的顶部放置了此选项。如果 "ajax" 是我们需要的条目，则只需按 Enter 键来接受 Google 提供的条目 "ajax"，而无须键入整个字符串。如果我们所需的条目是 Google 建议的 "ajanta caves"，则可以使用向下方向键移动到 "ajanta caves"，在该条目处于突出显示状态时按 Enter 键或使用鼠标单击该选项。第三种情况是：当您继续键入内容时，Google 会基于我们键入的内容不断地更新建议。
Google Suggest 使用称为 AJAX 的技术在 Web 浏览器界面中实现这些改进内容。为了更好地理解 AJAX 的含义，让我们先将它与其他两种 Web 页技术（HTML 和 DHTML）进行比较。
AJAX 和 HTML
我们可以使用一个简单的 HTML Web 应用程序（如图 2 所示），轻松地实现 Google Suggest 的功能。
 |
图 2：仅基于 HTML 模型的 Google Suggest 功能
|
在仅基于 HTML 的模型中，用户可以单击 "Suggest" 按钮来显示一个包含建议列表的新 Web 页。但是，我们刚才介绍的 AJAX 用户界面在两方面要优于仅使用 HTML 的模型：
- AJAX 界面需要更少的用户交互操作和时间。 由于用户不需要单击按钮即可获得建议，因此 AJAX 用户界面需要很少的用户操作，从而节省了用户的时间。
- AJAX 用户界面更为简单。由于不需要额外的按钮，而且用户只需使用一个页面而不是两个页面，因此 AJAX 界面更为简单。
用户通常会认为如果需要他们执行的操作越少，则完成这项任务就会越容易。另外，将所有内容都包括在一个页面上还可以减少用户交互，因为在这种情况下，用户无需单击或键入内容以转到其他页面。为了更好地说明这一点，让我们假设您正在乘飞机旅行，但是中途必须停留一小时。您是愿意继续乘坐同一架飞机还是改乘其他飞机，尤其是如果这意味着要更换候机大厅并需要通过安全检查？大多数人都会认为继续乘坐同一架飞机更方便，而不是改乘另一架飞机旅行。
总而言之，让 Web 应用程序开发者感到欣慰的是：与未采用 AJAX 技术的 HTML 应用程序相比，AJAX 提供了一项节省用户时间并简化用户界面的技术。
AJAX 和 DHTML
与简单的 HTML 应用程序相比，使用 DHTML 的 Web 应用程序也可以提供更佳的用户体验。通过 DHTML，我们可以轻松地弹出一个选项列表，它会随着用户在输入字段中键入的内容而进行动态更新。AJAX 和 DHTML 都利用了在 Web 浏览器中运行的 JavaScript 功能。
但使 AJAX 更胜一筹的是：每当用户按键时，Web 服务器都可以提供一个更新的选项列表。但在非 AJAX 的 DHTML 应用程序中，当您第一次发送页面时，您需要发送包含选项列表的数据，并且该数据必须适用于所有可能的用户输入。毫无疑问，对于大多数类似于 Google Suggest 的应用程序来说，发送所有数据以支持所有可能的用户输入几乎是不可能的。尽管在其他情况下（如词典搜索），在理论上可以发送随 Web 页提供的所有数据，但传输时间之长也会让您望而却步。通过 AJAX 技术，在浏览器中运行的 JavaScript 可以基于用户在 Web 页中的输入内容，请求并处理来自服务器的数据。
总之，AJAX 让 Web 应用程序开发者感到欣慰的另一个原因在于：它允许在用户与页面交互之后，将类似于 DHTML 的交互式 Web 页技术应用于从服务器请求的数据中。
AJAX 技术概述
许多不同的工具和技术都可以构建 Web 应用程序，其中包括 Java Studio Creator、PHP、J2EE、Ruby on Rails 和 DotNet 等。所有这些工具和技术都可以使用 AJAX，因为 AJAX Web 应用程序只需要新型的 Web 浏览器即可。并且 AJAX 不依赖于任何特定的工具、Web 应用程序框架或企业供应商。正是由于上述原因，广泛的技术社区都对使用 AJAX 产生了浓厚的兴趣。现在让我们从技术角度来了解一下 AJAX。
首先，让我们深入了解一下在 Web 应用程序中使用 AJAX 的步骤。
图 3 从用户、浏览器和服务器的角度出发，显示了随着时间的变化对包含 AJAX 的 Web 应用程序执行的处理步骤。表中的步骤是按照时间的先后顺序进行编号和排序的。
 |
图 3：包含 AJAX 处理的 Web 应用程序的 UML 序列图
|
这些步骤是某种方案（如介绍的 Google Suggest 方案）的具体实现。它们显示了如何在服务器、浏览器和用户之间按定义的顺序执行处理过程。让我们按照这些步骤出现的顺序来依次了解它们。
- Web 服务器发送包含 AJAX 组件的页面
当页面包含 AJAX 时，特定于 AJAX 的部分将被视为 AJAX 组件。AJAX 组件与 HTML 组件类似，但是它在浏览器和服务器中具有增强的 AJAX 处理功能。在 Google Suggest 中使用了改进的 HTML 输入组件，它已成为通常描述的“自动完成文本字段”的 AJAX 组件。
- 浏览器显示包含 AJAX 组件的 Web 页
虽然就为用户显示的内容而言，使用 AJAX 组件与不使用 AJAX 组件没有什么不同，但是使用该组件的优点在于，页面的 JavaScript 代码将在后台随时准备为 AJAX 处理效力。
- 用户在 Web 浏览器中为 AJAX 组件提供输入内容
以 Google Suggest 为示例来说明用户键入 "aja" 的情形。当用户一开始键入第一个字母时就进行 AJAX 处理了，或者是用户快速键入的字母会迅速结合在一起并作为一个请求发送到服务器中，用来减少服务器的负载。
- 浏览器运行 JavaScript 代码以处理用户输入
在此步骤中，JavaScript 处理用户输入的方式与处理使用 DHTML 的页面的用户输入相同。这些用户输入会产生 JavaScript 事件。例如，用户在输入字段中键入某些文本时，会调用 JavaScript 事件。在包含 AJAX 的 Web 应用程序中，这些 JavaScript 事件会请求服务器中的数据（将在下一步中介绍）。
-
浏览器根据用户输入的内容，异步请求服务器中的数据
在浏览器中运行的 JavaScript 代码向服务器发出调用，该调用与页面的常规 HTTP 请求响应处理不同步。通常，数据请求基于用户的输入内容。对于 Google Suggest 示例，数据请求包括用户键入的字符串 "aja"。
- 服务器处理并响应浏览器的数据请求
浏览器使用 HTTP 或 HTTPS URL 来请求服务器中的数据。服务器可以通过选择使用 Web 应用程序中的多项技术和框架来实现 HTTP 响应。通常情况下，浏览器请求包括参数（如 "aja"），服务器可以使用请求参数来构成响应。可以按不同的方式来设置服务器响应数据的格式，就像 HTTP 响应一样，服务器通过设置 "Content-Type" 头来表示格式。XML 是一种易于在浏览器中进行处理的响应格式。
- 浏览器使用从服务器接收的数据来更新显示
在 Google Suggest 示例中，JavaScript 代码处理从服务器返回的响应，并使用该数据来显示图 1 所示的建议列表。
- 用户选择建议选项
在此方案中，下一步是用户从步骤 7 显示的列表中进行选择或继续键入内容（如步骤 3 所示）。
- 浏览器处理用户的选择并提交页面
JavaScript 会处理用户的选择：它将为文本字段设置该选择，并关闭所显示的建议，然后，如果这是表单上的最后一个字段（在这个简单的示例中就是如此），则通过标准 HTTP 请求来提交页面。如果在表单上存在其他字段（这是通常出现的一种情况），则 JavaScript 会继续处理这些字段。实际上，在一个组件中输入内容极易产生不利的影响，这会更改同一页面上其他组件的表示，所有这些都是在没有进行完整的页面刷新时产生的。
- 服务器响应 HTTP 请求
在本示例中，Google 的服务器会基于用户的选择准备一个包含搜索结果的 Web 页。
- 浏览器显示 HTTP 响应
搜索结果页会显示在用户的 Web 浏览器中。这是本方案的最后一步。
让我们来快速总结一下 AJAX 的处理过程。在浏览器中运行的 JavaScript 将基于用户的输入内容异步请求 Web 服务器中的数据时，AJAX 的魅力就开始展现出来了。接下来会通过服务器的响应动态更新 Web 页的各个部分。所有这一切都是在无需提交页面的情况下发生的。
小结：什么是 AJAX？
- AJAX 是一种为 Web 应用程序创建更佳的 Web 浏览器用户界面的技术。
- AJAX 的应用范围很广，许多与 Web 应用程序有关的各种技术社区正积极地投身于这项技术中。
- AJAX 将使用浏览器中运行的 JavaScript 来异步获取服务器中的数据，然后更新 Web 页的某一部分。
AJAX 和 Sun Java Studio Creator 2
在 JavaOne 2005 主旨演示中，Tor Norbye 仅用了三分钟的时间就完成了诸如 Google Suggest 之类的 Web 应用程序的生成、部署以及在浏览器中的演示内容。Tor 之所以能够如此快速地完成上述操作，就是因为他在 Sun Java Studio Creator 2 IDE 中使用了支持 AJAX 的关联文本完成组件。
Java Studio Creator IDE 用于开发 Web 应用程序所使用的组件/属性/事件方法已经与 AJAX 很好地结合在一起了。Java Studio Creator 2 附带有通过 DHTML 功能改进其用户界面的组件。这些 DHTML 组件会生成在 Web 浏览器中运行的 JavaScript，这样您就无需自己来实现并测试 JavaScript 了。通过组件属性，您可以定制组件的外观和行为，其中包括在 DHTML 中实现的各个方面。通过事件，您可以轻松地为组件编写服务器应用程序代码。
Tor 的演示表明，使用 Java Studio Creator 2 及其基于组件的 Web 应用程序开发方法，可以生成具有 AJAX 用户界面改进内容的 Web 应用程序。AJAX 组件包含了在浏览器中运行的 JavaScript 来处理用户输入、并从 Web 服务器中请求数据，以及基于服务器响应对 Web 页进行更新。（此功能在技术概述部分的步骤 4 至 7 中进行了论述）。使用 AJAX 组件，您就无需开发 JavaScript 了，同样，使用目前 Java Studio Creator 提供的组件，您也可以不必实现 JavaScript 和 DHTML 了。
为帮助您了解它的工作机制，我们将发布一个附加组件库，以此作为 Java Studio Creator 2 的更新，这样您就可以使用各种样例 AJAX 组件（这些组件是 BluePrints AJAX 组件）。样例 AJAX 组件一文将向您逐步介绍这些样例并帮助您了解更多的信息。与非 AJAX 组件一样，当 AJAX 组件经过改进可以支持 Java Studio Creator 2 后，您就可以使用 AJAX 组件有效地生成 Web 应用程序。
样例还展示了一个非常重要的方面：IDE 中的事件处理程序可以非常轻松地处理异步 AJAX 请求。在 Java Studio Creator 2 中，您只需编写一个返回结果的事件处理程序，如步骤 4 至 7中所述。IDE 可以非常轻松地实现这一过程：在您准备编写事件处理程序时，只需双击组件，IDE 就会打开 Java 源代码，使光标停留在它刚创建的事件处理程序方法模板处。Tor 的示例中使用了一个请求 Web 服务的组件，但是在一般情况下，AJAX 事件处理程序可以执行不需要 Web 服务的处理。例如，AJAX 事件处理程序可以执行数据库查询并从查询中返回结果。无论 AJAX 请求的形式如何，服务器处理和浏览器用户界面设计都应该结合起来确保用户界面是一个具有响应的界面。
此外，AJAX 事件处理程序具备 JavaServer Faces 事件处理程序的所有灵活性和功能，其中包括将 AJAX 请求事件绑定到属性的功能，我们在样例 AJAX 组件一文中会提到这一点。
AJAX 组件还可以拥有在客户端和/或服务器端上进行 AJAX 处理时可能使用的属性。例如，其中一个样例包括用作 Google Maps 显示请求的参数的属性。IDE 可以很轻松地设置这些属性，就像设置其他非 AJAX 组件的属性一样。
小结：AJAX 和 Java Studio Creator
- Java Studio Creator 2 中用于开发 Web 应用程序的组件/属性/事件方法能够很好地与 AJAX 配合使用。
- 对服务器的异步 AJAX 请求可以通过返回结果的简单事件处理程序代码来实现。
- AJAX 事件处理程序代码可以像其他事件处理程序那样以常规的方式处理数据。
- 您可以在实现 AJAX 事件处理程序时创建 Web 服务，尽管不需要这样做。
- 根据组件实现的不同方式，AJAX 组件可以具有在客户端和/或服务器端上进行 AJAX 处理时可能使用的属性。
了解更多的信息
要了解与 Java Studio Creator 有关的 AJAX 技术内幕，请访问 JavaOne 2005 大会中关于 AJAX 和 J2EE 方面的内容。该会议还包括其他参考信息。
您可以执行的操作
通过阅读在 Java Studio Creator 中安装并使用 Blueprints 样例 AJAX 组件一文，可以帮助您了解 AJAX 的含义、AJAX 可以执行的操作以及 IDE 如何使用 Ajax 的信息。由于这些组件是样例组件，因此它们不适用于产品 Web 应用程序中。随着您对 Ajax 的深入了解，您可以考虑如何扩展 Web 应用程序来包含 Ajax 组件。如果您认为基于 Ajax 的用户界面改进内容对您的 Web 应用程序非常有用，请随时通过论坛向我们提出建议。
序列图
表 1 对图 3 所示的步骤进行了文字说明。
表 1. 包含 AJAX 处理的 Web 应用程序：按时间顺序执行的步骤
 |
1
|
|
|
发送包含 AJAX 组件的 Web 页 |
2
|
|
显示包含 AJAX 组件的 Web 页
|
|
3
|
为 AJAX 组件提供输入内容
|
|
|
4
|
|
运行 JavaScript 以处理用户输入 |
|
5
|
|
异步请求服务器中的数据 |
|
6
|
|
|
处理并响应数据请求 |
7
|
|
更新显示所收到的数据
|
|
8
|
从更新的显示内容中选择项
|
|
|
9
|
|
处理用户的选择并提交页面 |
|
10
|
|
|
处理并响应 HTTP 请求 |
11
|
|
显示 HTTP 响应 |
|
返回到 Sun Java Studio Creator 开发者资源页面。
| 
打印版本
