logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

利用 Dojo Toolkit使用 web 服务

 LibraryPKU 2013-08-09

本文是关于使用 web 服务的 — 简单服务和 RESTful web 服务 — 使用 Dojo Toolkit。为了更好地理解本文，您需要在您的系统进行以下安装和配置：

  • 一个文本编辑器或集成开发环境（IDE）
    （本文使用 Eclipse JavaScript IDE。）
  • 一个 web 服务器

Dojo Toolkit 概述

随着人们对构建更好的 Rich Internet Applications (RIAs) 的关注。JavaScript 架构的出现使得 web 开发人员可以将它们的应用程序开发得更具吸引力。

预先包装的 JavaScript 库拥有诸多优点。第一，使用在不同浏览器和不同平台上验证过的代码可以极大地减少在许多不同浏览器上验证功能需要的测试次数，因而也减少了代码中缺陷。第二，使用已编写且测试的代码节省了大量时间，使您可以更快地完成您的应用程序。


Ajax 概述

Ajax 是一个用来描述一个组合技术的术语，在加载用户 web 页面时用来调用（异步）服务器。这项技术在今天的 web 页中无处不在，在提供丰富的 Web 体验方面起着重要的作用。

在本文的示例中，每一次用户只要修改文本框中的文本内容，JavaScript 代码都会进行一个服务器调用来获取参考值。一方面，这个附加函数将产生一些流量。另一方面，如果用户通过提交整个表单进行重复的搜索，该技术将节省很多流量。

回页首

创建项目

本例使用最新版 Eclipse 以及已安装的 JavaScript 工具。这些工具提供改进功能来编辑 JavaScript 和 HTML 页面。

根据下面步骤创建一个项目，然后利用这个项目创建几个 HTML 文件，来完成这个示例：

  1. 使用 File > New > Project 创建一个新的静态 web 项目。
  2. 选择 Web\Static Web Project 并单击 Next.
  3. 输入您的项目名称（例如，MyDojoExample ）。
  4. 单击 New Runtime。
  5. 从列表中选择 New Server，然后选择 Create a new local server 复选框。
  6. 根据服务器列表中显示输入服务器名称，然后输入您想要发布文件的目录名。通常，这应该是一个目录位置，您可以在其中发布用户的 web 文件。
  7. 在 Static Web Project 向导中单击 Next。
  8. 让上下文根路径同项目名称保持一致，并将 web 目录文件夹命名为 WebContent。
  9. 单击 Finish。Eclipse 为您创建了新项目。

当您向您的项目添加文件时，Eclipse 自动将文件发布到为服务器配置的目录下。您可以通过在该项目中创建您的第一个 HTML 文件（是一个 index.html 文件）来了解这些，您需要修改该文件来包含实例所用的搜索框。

按照以下步骤创建新 HTML 文件：

  1. 在您的新项目中选择 WebContent 文件夹，然后用备用鼠标按钮打开上下文菜单。
  2. 从菜单中选择 New > HTML file。
  3. 在 File name 字段输入文件名，然后单击 Next 来查看 HTML 模板选择器。
  4. 对于这个示例，选择 New XHTML File (1.0 strict) 选项，然后单击 Finish 按钮。

新文件看起来像清单 1 这样。


清单1. 新 index.html 文件
				
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www./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 文件
				
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www./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 代码完成。

回页首

包含 Dojo Toolkit

您可以以两种方式包含 Dojo Toolkit：

  • 使用一个公开托管（publicly hosted）的 Dojo 文件位置。
  • 自己下载 Dojo Toolkit JavaScript 文件然后同您的代码一并包含在其中。

哪个方法更好取决于您的需求。

使用一个公开托管文件

使用公开托管文件有两个很好的理由：

  • 使用一个内容分发网络（CDN）来简单地托管文件，对您来说减少了本地跟踪文件的需求。
  • 您可以少部署一个文件。

使用一个公开托管的文件主要优势是，如果 CDN 不可用（这种情况未必会发生，但是也有可能）您将不需要任何控件。如果由于某种原因 CDN 关闭了，您的网站也就不起作用了。如果您的内部 web 应用程序需要确保运行正常，考虑维护 Dojo 脚本文件来减少您应用程序的单点故障。

要从一个 CDN 中链接 Dojo 文件系统，修改您的 index.html 文件使其看起来如清单 3 所示。


清单 3. 包含到 Dojo CDN 位置的链接
				
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www./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" />
<script
    src="http://ajax./ajax/libs/dojo/1.5/dojo/dojo.xd.js"
    type="text/javascript"></script>
</head>
<!-- snipped... -->
</html>

下载和包含 Dojo Toolkit 基本文件

如果您想下载和包含 Dojo Toolkit 基本文件，而不是链接它，您可以从 参考资料 中链接的网站下载 Dojo JavaScript 代码。下载完这个文件之后，您可以使用 File > Import 将其导入到 Eclipse 中的项目中。按照惯例，通常创建一个名为 js 或 script 的文件夹比较好，您不仅可以将您的 JavaScript 代码放在其中，也可以将您下载的文件放在其中。

为了将您下载的文件包含到您的 Web 页，像这样修改 index.html，如清单 4 所示。


清单 4. 包含一个本地引用到已下载的 dojo.js 
				
<script src="js/dojo.js" type="text/javascript"></script>

现在您有了一个基本 web 页，您要准备添加更多的功能，通过添加调用服务的 JavaScript 代码来完成。

回页首

调用一个服务

现在您已经创建了 index.html 文件，并将 Dojo JavaScript 文件链接到您的 index.html 文件了，是时候调用一个简单服务，来为用户提供建议选项了。

本文提供两个不同的调用服务和得到结果的示例。第一个是一个简单的服务，不一定要符合常见 RESTful web 服务 URL 习惯。REST 不是一个标准，但是有很多方法可以巧妙地获取 URL，为客户端和 RESTful web 服务提供一个较好的互操作性。第二个实例是一个使用 dojox.rpc.Rest 方法的介绍。

使用一个简单服务

因为来自服务的响应根据查询字符串进行改变，服务不需要您以一个动态 web 应用程序技术写入其中（参考 参考资料，了解更多关于动态 web 应用程序的信息）。清单 5 中显示的是一个简单的 PHP 脚本，有一个名称数组。根据用户所提供的，从名称列表中过滤出来，然后将它们添加到 Extensible Markup Language (XML) 响应。


清单 5. 使用 PHP 编写一个简单的服务
				
<?php
header("Content-type: text/xml");

$data = array(
    "Bilbo Baggins",
    "Frodo Baggins",
    "Samwise (Sam) Gamgee",
    "Meriadoc (Merry) Brandybuck",
    "Peregrin (Pippin) Took");

$resultXML = '';
$resultsXML .= '<suggestions>';

foreach ($data as $d) {
    $pattern = '/'.$_GET['s'].'/';
    if (preg_match($pattern, $d)) {
        $resultsXML .= '<item>'.$d.'</item>';
    }
}

$resultsXML .= '</suggestions>';

print($resultsXML);

您可以以其他任何语言编写一个简单的脚本，返回一个类似的响应来测试 JavaScript 代码。

从 Dojo Toolkit 调用 URL 并不是很容易。如清单 6 所示简单地设置参数进行调用，然后将它们传递到服务。


清单 6. 为 dojo.xhrGet 设置参数
				
   var args = {
      url:"mockService.php?s=" + dojo.byId("searchBox").value,
      handleAs:"xml",
      preventCache:true,
      load:function(data) { 
          // handle the data...
      },
      error:function(error) { target.innerHTML = "Error:" + error; }

这些参数将在表 1 中进一步说明。


表 1. dojo.xhrGet 参数
参数说明
url此参数包括 URL（记住，这个 URL 不是一个 RESTful URL）。
handleAsjson、text 或 xml 之一。PHP 脚本使用 XML 响应，所以用在这里。
preventCache如果您不想缓存数据，使用 ture。缓存数据可以执行得更快，但是，如果结果是完全自动化的，这也不可取。
load该回调函数在服务返回数据时执行。
error该回调函数在出现错误时执行。

如果已经正确设置了参数，将它们传递到 dojo.xhrGet 方法。全部代码如清单 7 所示。


清单 7. 全部 JavaScript 代码
				
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www./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" />
<script
    src="http://ajax./ajax/libs/dojo/1.5/dojo/dojo.xd.js"
    type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    // You could move all this code to a JavaScript file and include it...
    dojo.require("dojox.xml.parser");
    
    function update() {

        if (dojo.byId("searchBox").value.length < 3 )
            return;
        
        var target = dojo.byId("suggestions");

        var args = {
                url:"mockService.php?s=" + dojo.byId("searchBox").value,
                handleAs:"xml",
                preventCache:true,
                load:function(data) { 
                    // handle the data...
                },
                error:function(error) { target.innerHTML = "Error:" + error; }
        };
        var ajaxCall = dojo.xhrGet(args);
    }
//]]>
</script>
</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>

除了调用标准 Ajax 风格服务之外，您也要使用 Dojo Toolkit 调用 RESTful web 服务。

使用一个 RESTful 服务

除了用于发送请求的 HTTP 方法之外，大部分 RESTful web 服务的 URL 构建方式都遵守为特定类型请求构建 URL 的方式。如果您构建一个符合这些传统习惯的 RESTful 服务，您可以使用 dojo.rpc.Rest 对象为您进行调用。dojo.rpc.Rest 对象进一步简化了传统服务调用。

清单 8 是一个使用 Dojo Toolkit 调用 RESTful web 服务的示例。


清单 8. 使用 dojo.rpc.Rest 调用一个 RESTful web 服务
				
// Calling this access the URL hobbits/1 (see Table 2)
var service = dojox.rpc.Rest("hobbits");
service("1");

表 2 列出了固有的 RESTful URL 和 HTTP 动作的示例，应该同每个类型的服务相匹配。注意，不是每一个浏览器都支持所有 HTTP 方法，因此您应该根据您的需要进行测试和验证，对于多数用户，使用 GET 和 POST 方法可能是最佳选择。


表 2. RESTful 传统 URL
动作HTTP 方法示例 URL
查找一个对象GEThttp://www./hobbits/1
查找所有对象GEThttp://www./hobbits/
删除一个对象DELETEhttp://www./hobbits/1
创建一个对象POSThttp://www./hobbits/
更新一个新对象PUThttp://www./hobbits/1

如果您想创建一个 RESTful web 服务的全部实现，框架有助于指导您构建符合 RESTful URL 习惯的 URL。参见 参考资料，寻找不同语言的各种框架的更多信息。

回页首

精确地显示结果

既然您将要使用 Dojo 代码调用服务，您也可以更新 div 元素的内容来包含查询结果。这使得用户可以根据其类型查看建议选项。

想要更新包含建议选项的 div 元素的值，使用 dojo.byId 方法通过 ID 获取 div 的参考资料，并如清单 9 所示设置 innerHTML 属性。dojo.byId 方法是传统 JavaScript 的 document.getElementById 方法的别名。


清单 9. 更新元素的内容
				
    // the full load function...
    load:function(data) { 
        var rootEl = data.documentElement;
        var resultHTML = "<ul>";
        for (var i = 0; i < rootEl.childNodes.length;i++) {
            resultHTML += "<li>" + 
            dojox.xml.parser.textContent(rootEl.childNodes[i]) + 
            "</li>";
        }
        resultHTML+="</ul>";
        target.innerHTML = resultHTML;
    },

现在，您的代码已经可以正常运行了，您可以在浏览器中查看您的 index.html 页。当您输入一个值时 — 例如 Bag — 建议选项将自动出现在您的 div 元素中。尽管本文并不能涵盖全部的，您也应该使用 Cascading Style Sheets (CSS) 使这些 div 整齐地排列在下拉框中，根据用户的输入提供建议选项。

回页首

处理长期运行的服务

当从一个 web 浏览器处理长期运行服务时，主要关注两方面的问题：

  • 用户体验
  • 可靠性

用户体验

在服务执行时，如果在浏览器中没有明显的改变，用户体验将受长期运行服务的影响。如果您的 web 页含有一个按钮，可以进行一个 Ajax 或 RESTful 服务调用或者显示结果，您应该利用这些浏览器来显示用户即将发生的事情。否则您将要冒这样的风险，一个用户多次提交表单或者您将对网站很不耐烦甚至离开。

为了应对用户体验问题，使用一个动画（Dojo Toolkit 有针对这些的方法）或者禁用提交按钮，使用户不能多次提交。有了动画视觉（例如，旋转时钟） ，用户可以意识到将要发生什么，更愿意等待进程完成。

可靠性

期待长期运行的服务来使用 Ajax 调用可能有问题，但是它们可能是有效的示例。长期运行服务的示例是那些聚集数据、生成文档或者存档文件示例。

在这种情况下，简单调用服务并等待 — 特别是如果服务要运行好几秒，不是一个最佳实践。如果您的连接是混乱的，或者您的浏览器关闭了，那么在服务完成时，您将不能依赖回调机制来触发。

如果您可以控制服务，可以考虑向您的调用者返回一个惟一的限定符，使用一种后来向不同服务询问请求状态的方式。您的浏览器可以将这些数字放到本地的一个 cookie 存储设备中，也可以让浏览器和服务一起来保存用户数量。

调用服务的这种方法允许您在服务器端开始长期运行的进程。在浏览器端，您可以对请求状态使用轮询来访问服务层。（您可以对此使用 Dojo Toolkit's Timer 对象），该方法为用户提供灵活性和稳定性。

回页首

结束语

除此之外，Dojo Toolkit 使您可以在您的 web 应用程序中进行 Ajax 调用，来提供 RIA 函数。不管是使用一个 CDN 或者是您自己下载 Dojo Toolkit 文件，您都可以利用预先写入的且已测试的函数的优势。

Dojo Toolkit 使用 Ajax 和 RESTful web 服务提供调用纯 web 服务的方法。这个工具包允许您处理 JSON、XML 和来自 Ajax 服务的文本响应。


参考资料

学习

获得产品和技术

讨论

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： LibraryPKU > 《J2EE》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多