利用 Dojo Toolkit 使用 web 服务（1）
|
- UID
- 1066743
|
利用 Dojo Toolkit 使用 web 服务（1）
本文是关于使用 web 服务的 — 简单服务和 RESTful web 服务 — 使用 Dojo Toolkit。为了更好地理解本文，您需要在您的系统进行以下安装和配置：
- 一个文本编辑器或集成开发环境（IDE）
（本文使用 Eclipse JavaScript IDE。） - 一个 web 服务器
Dojo Toolkit 概述随着人们对构建更好的 Rich Internet Applications (RIAs) 的关注。JavaScript 架构的出现使得 web 开发人员可以将它们的应用程序开发得更具吸引力。
预先包装的 JavaScript 库拥有诸多优点。第一，使用在不同浏览器和不同平台上验证过的代码可以极大地减少在许多不同浏览器上验证功能需要的测试次数，因而也减少了代码中缺陷。第二，使用已编写且测试的代码节省了大量时间，使您可以更快地完成您的应用程序。
试试 Rational Application Developer 下载 的免费试用版，它可以帮助开发人员快速地设计、开发、测试、分析和部署高质量的 Java™、Java Platform、Enterprise Edition (Java EE)、Web 2.0、service-oriented architecture (SOA) 和门户网站应用程序。Rational Application Developer 包括一些特性，可以快速构建关于显示 Java EE 和 web 技术的技巧、自动控制代码版本、构建和测试以及支持今天快节奏软件交付需要的灵活的软件开发。
Dojo Toolkit（见 ）是一个 JavaScript 代码集合，提供主要功能。Dojo 提供一些 JavaScript 方法，您可以用来让元素具有动画效果，使其淡入淡出，以及进行 Ajax 调用。
本文是关于使用 Dojo Toolkit 以及 Ajax 和 RESTful web 服务的，目的是为您的用户提供较好的共享和一个更好的用户体验。本文提供一个自动完成的示例，填满文本框来根据用户类型匹配结果。这个用户搜索的用户交互模式已经作为一个普通的 — 但流畅的 — 方法出现，为您的用户提供更好的搜索。
Ajax 概述Ajax 是一个用来描述一个组合技术的术语，在加载用户 web 页面时用来调用（异步）服务器。这项技术在今天的 web 页中无处不在，在提供丰富的 Web 体验方面起着重要的作用。
在本文的示例中，每一次用户只要修改文本框中的文本内容，JavaScript 代码都会进行一个服务器调用来获取参考值。一方面，这个附加函数将产生一些流量。另一方面，如果用户通过提交整个表单进行重复的搜索，该技术将节省很多流量。
创建项目本例使用最新版 Eclipse 以及已安装的 JavaScript 工具。这些工具提供改进功能来编辑 JavaScript 和 HTML 页面。
根据下面步骤创建一个项目，然后利用这个项目创建几个 HTML 文件，来完成这个示例：
- 使用 File > New > Project 创建一个新的静态 web 项目。
- 选择 Web\Static Web Project 并单击 Next.
- 输入您的项目名称（例如，MyDojoExample ）。
- 单击 New Runtime。
- 从列表中选择 New Server，然后选择 Create a new local server 复选框。
- 根据服务器列表中显示输入服务器名称，然后输入您想要发布文件的目录名。通常，这应该是一个目录位置，您可以在其中发布用户的 web 文件。
- 在 Static Web Project 向导中单击 Next。
- 让上下文根路径同项目名称保持一致，并将 web 目录文件夹命名为 WebContent。
- 单击 Finish。Eclipse 为您创建了新项目。
当您向您的项目添加文件时，Eclipse 自动将文件发布到为服务器配置的目录下。您可以通过在该项目中创建您的第一个 HTML 文件（是一个 index.html 文件）来了解这些，您需要修改该文件来包含实例所用的搜索框。
按照以下步骤创建新 HTML 文件：
- 在您的新项目中选择 WebContent 文件夹，然后用备用鼠标按钮打开上下文菜单。
- 从菜单中选择 New > HTML file。
- 在 File name 字段输入文件名，然后单击 Next 来查看 HTML 模板选择器。
- 对于这个示例，选择 New XHTML File (1.0 strict) 选项，然后单击 Finish 按钮。
新文件看起来像清单 1 这样。
清单1. 新 index.html 文件1
2
3
4
5
6
7
8
9
10
11
12
| <?xml version="1.0" encoding="UTF-8" ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>
</body>
</html>
|
现在，您已经有一个静态 web 项目和一个 HTML 页了，是时候向 HTML 页中添加一个输入控件了。HTML 文件包含一些 div 标记，定位输入控件并使建议选项容易些。结果生成清单 2 所示的 HTML 文件。
清单 2. 有控件的 index.html 文件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <?xml version="1.0" encoding="UTF-8" ?>
<!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">
<head>
<title>Test web page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>
<body>
<div id="wrapper">
<form>
<div id="search"><input id="searchBox" type="text"
maxlength="2048" name="criteria" title="Search" onkeyup="update()" /></div>
<div id="suggestions"></div>
</form>
</div>
</body>
</html>
|
在这一点上，与空白版本有很大的区别。大部分工作可以通过使用 web 页中的 JavaScript 代码完成。 |
|
|
|
|
|
