dojo toolkit（dojo toolkit_使用Dojo Toolkit消耗Web服务）

发布时间：2025-12-10 19:17:42 浏览次数：13

dojo toolkit_使用Dojo Toolkit消耗Web服务-

dojo toolkit_使用Dojo Toolkit消耗Web服务本文是关于使用DojoToolkit消费Web服务（简单服务和RESTfulWeb服务）的。为了充分利用本文，您需要在系统上安装并配置以下内容：文本编辑器或集成开发环境（IDE）（本文使用EclipseJavaScriptIDE。）Web服务器Dojo工具包概述随着对构建更好的富Internet应用程序（RIA）的关注日益增强，JavaScript框架…

dojo toolkit

本文是关于使用Dojo Toolkit消费Web服务（简单服务和RESTful Web服务）的。为了充分利用本文，您需要在系统上安装并配置以下内容：

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

Dojo工具包概述

随着对构建更好的富Internet应用程序（RIA）的关注日益增强，JavaScript框架应运而生，以使Web开发人员能够使其应用程序更具吸引力。

预打包JavaScript库具有许多优点。首先，使用已经在不同浏览器和不同平台上进行验证的代码可以大大减少验证许多不同浏览器上的功能所需的测试量，从而减少代码中的缺陷数量。其次，使用已经编写和测试的代码可以节省大量时间，并使您可以更快地完成应用程序。

尝试一下Rational Application Developer

下载IBMRational®Application Developer forWebSphere®软件的免费试用版，它可以帮助开发人员快速设计，开发，测试，分析和部署高质量的Java™，Java平台，企业版（Java EE），Web 2.0，服务。面向体系结构（SOA）和门户应用程序。 Rational Application Developer包含的功能可以快速构建新兴Java EE和Web技术上的技能，自动化代码验证，构建和测试，并支持敏捷软件开发，以满足当今快速发展的软件交付需求。

Dojo Toolkit（请参阅参考资料）是提供重要功能JavaScript代码的集合。 Dojo提供了JavaScript方法，可用于对元素进行动画处理，淡入和淡出以及进行Ajax调用。

本文是关于将Dojo工具包与Ajax和RESTful Web服务一起使用，以为您的用户提供更好的功能和更好的用户体验。本文提供了一个自动完成的示例，该示例填充一个文本框以匹配用户输入的结果。这种用于搜索的用户交互模式已经成为一种常见的方式（尽管很流畅），可以使用户更好地进行搜索。

Ajax概述

Ajax是一个术语，用于描述在用户的网页保持加载状态时（异步）对服务器进行调用的技术组合。在当今的网页中，这种技术已经变得相当普遍，并且在使网络体验更加丰富方面起着重要的作用。

在本文的示例中，每次用户更改文本框中的文本时，JavaScript代码都会调用服务器以获取建议值。一方面，此附加功能可能会导致大量流量。另一方面，如果用户通过发布整个表单重复搜索，则该技术实际上可以节省一些流量。

创建项目

本示例使用安装了JavaScript工具的最新版本的Eclipse。该工具提高了编辑JavaScript和HTML页面的能力。

请按照以下步骤创建一个项目，您可以使用该项目创建一些HTML文件，因此可以按照以下示例进行操作：

通过使用File> New> Project创建一个新的静态Web项目。选择“ Web \ Static Web Project” ，然后单击“ 下一步” 。输入您的项目名称（例如MyDojoExample ）。单击“ 新建运行时” 。从列表中选择“ 新服务器” ，然后选择“ 创建新的本地服务器”复选框。键入将在服务器列表中显示的服务器的名称，然后键入要在其中发布文件的目录的名称。通常，这应该是您可以在其中发布用户Web文件的目录位置。在“静态Web项目”向导上，单击“ 下一步 ”。将上下文根保留为与项目名称相同的名称，并保留Web内容文件夹名称WebContent的名称。点击完成。 Eclipse为您创建了新项目。

将文件添加到项目中时，Eclipse会自动将文件发布到为服务器配置的目录中。通过在此项目中创建第一个HTML文件（即index.html文件），您可以看到实际的效果。您将修改此文件以包括用于示例的搜索框。

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

在新项目中选择WebContent文件夹，然后使用替代鼠标按钮打开上下文菜单。从菜单中，选择新建> HTML文件 。在“ 文件名”字段中键入文件的名称 ，然后单击“ 下一步”以查看HTML模板选择器。对于此示例，选择“ 新建XHTML文件（严格要求1.0）”选项，然后单击“ 完成”按钮。

新文件将类似于清单1。

清单1.新的index.html文件

<?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>

是否还在为Ide开发工具频繁失效而烦恼，来吧关注以下公众号获取最新激活方式。亲测可用！

为防止网络爬虫，请关注公众号回复”口令”

激活idea 激活CLion DataGrip DataSpell dotCover dotMemory dotTrace GoLand PhpStorm PyCharm ReSharper ReShaC++ Rider RubyMine WebStorm 全家桶刷新

【正版授权，激活自己账号】：Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】：官方授权正版激活自己使用，支持Jetbrains家族下所有IDE…

现在您有了一个新的静态Web项目和一个HTML页面，是时候将输入控件添加到HTML页面了。 HTML文件包含一些p标记，这些标记使输入控件和建议的定位更加容易。结果是清单2中所示HTML文件。

清单2.带有控件的index.html文件

<?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><p ><form><p ><input  type="text"    maxlength="2048" name="criteria" title="Search" onkeyup="update()" /></p><p ></p></form></p></body></html>

此时，它与空白版本没有太大区别。大部分工作是通过使用网页中JavaScript代码完成的。

包括Dojo工具包

您可以通过以下两种方式之一来包含Dojo Toolkit：

使用公共托管的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.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" /><script    src="//ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"    type="text/javascript"></script></head><!-- snipped... --></html>

下载并包含Dojo Toolkit基本文件

如果你想下载和包含Dojo Toolkit的基本文件，而不是链接到它，你可以从链接的网站下载DojoJavaScript代码相关的话题。下载该文件后，可以使用File> Import将其导入Eclipse中的项目。按照惯例，最好创建一个名为js或脚本的文件夹，在其中您不仅可以放置JavaScript代码文件，还可以放置下载的文件。

要包括您下载到网页中的文件，请修改index.html使其类似于清单4。

清单4.包含对下载的dojo.js的本地引用

<script src="js/dojo.js" type="text/javascript"></script>

现在您已经有了一个基本的网页，您可以通过添加调用该服务JavaScript代码来添加更多功能。

致电服务

现在，您已经创建了index.html文件，并且Dojo JavaScript文件已链接到index.html文件中，是时候调用简单的服务向用户提出建议了。

本文提供了两个不同的示例，这些示例调用服务并获得结果。第一个示例是一个简单的服务，不一定符合典型的RESTful Web服务URL约定。 REST不是标准，但是可以通过多种方法来构造URL，以使客户端与RESTful Web服务之间具有更好的互操作性。第二个示例是使用dojox.rpc.Rest方法的简介。

使用简单的服务

由于服务的响应会根据查询字符串而变化，因此该服务确实要求您使用动态Web应用程序技术来编写它（请参阅参考资料，以了解有关动态Web应用程序的更多信息）。清单5中显示的示例是一个简单PHP脚本，其中包含一个名称数组。根据用户提供的内容，它将筛选出名称列表，并将其添加到可扩展标记语言（XML）响应中。

清单5.用PHP编写的简单服务

<?phpheader("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不是RESTful URL）。
handleAs	json，文本或xml之一。 PHP脚本以XML响应，因此在这里使用。
preventCache	如果您不想缓存数据，请使用true。缓存数据可以加快执行速度，但是如果结果是完全动态的，则不希望这样做。
加载	服务返回数据时执行的回调函数。
错误	发生错误时执行的回调函数。

正确设置参数后，将其传递给dojo.xhrGet方法。完整的代码如清单7所示。

清单7.完整JavaScript代码

<?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" /><script    src="//ajax.googleapis.com/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><p ><form><p ><input  type="text"    maxlength="2048" name="criteria" title="Search" onkeyup="update()" /></p><p ></p></form></p></body></html>

除了调用标准的Ajax风格的服务之外，您还可以使用Dojo Toolkit来调用RESTful Web服务。

使用RESTful服务

除了用于请求的HTTP方法之外，大多数RESTful Web服务都遵循约定为特定类型的请求构造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方法	范例网址
寻找对象	得到	http://www.example.com/hobbits/1
查找所有对象	得到	http://www.example.com/hobbits/
删除物件	删除	http://www.example.com/hobbits/1
创建一个对象	开机自检	http://www.example.com/hobbits/
更新一个新对象	放	http://www.example.com/hobbits/1

如果要创建RESTful Web服务的完整实现，框架可以帮助指导您构建符合RESTful URL约定的URL。请参阅相关主题，以查找有关不同语言的各种框架的更多信息。

优雅地显示结果

现在，您正在使用Dojo代码调用该服务，您可以更新p元素的内容以包括查询结果。这使用户可以在键入建议时看到建议。

要更新包含建议的p元素的值，请使用dojo.byId方法通过ID获取p的引用，并设置innerHTML属性，如清单9所示。dojo.byId方法是the的别名。传统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 ，建议将自动出现在p元素中。尽管本文没有讨论，但您应该使用级联样式表（CSS）使p元素在下拉框中很好地融合在一起，并提供基于用户输入的建议。

处理长期运行的服务

通过Web浏览器处理长期运行的服务时，有两个主要问题：

用户体验可靠性

用户体验

如果在执行服务时浏览器中没有任何明显变化，则长期运行的服务会影响用户体验。如果您的网页包含一个按钮，该按钮会进行Ajax或RESTful服务调用并显示结果，则应使用浏览器进行一些操作以向用户显示正在发生的事情。否则，您将面临用户多次提交表单或对您的网站不耐烦而离开的风险。

要解决用户体验问题，请实现动画（Dojo Toolkit具有用于这些方法的方法）或禁用“提交”按钮，以便用户无法多次提交。使用动画视觉效果（例如旋转的时钟），用户可以感觉到正在发生某些事情，并且更愿意等待该过程完成。

可靠性

使用Ajax调用预期会长时间运行的服务可能会遇到问题，但是在使用它们的情况下可能会存在一些有效情况。长期运行的服务包括聚合数据，生成文档或归档文件的服务。

在这种情况下，简单地调用服务并等待-尤其是如果服务处理时间可能超过几秒钟，不是一个好习惯。如果您的连接中断或浏览器关闭，则不一定要依靠回调机制在服务完成时触发。

如果您可以控制服务，请考虑向呼叫者返回一个唯一的标识符，为呼叫者提供以后可以向其他服务方法询问请求状态的方式。您的浏览器可以将该数字存储在本地的cookie中，或者浏览器和服务可以一起为用户保留该数字。

这种调用服务的方法使您可以在服务器端开始长时间运行的过程。在浏览器中，您可以实施轮询以向服务层询问请求的状态。（您可以为此使用Dojo Toolkit的Timer对象。）此方法为用户提供了灵活性和稳定性。

摘要

除其他外，Dojo Toolkit使您可以在Web应用程序中进行Ajax调用以提供RIA功能。使用CDN之一或自己下载Dojo Toolkit文件，您可以利用预先编写和测试的功能。

Dojo工具包提供了使用Ajax和RESTful Web服务调用纯Web服务的方法。该工具包允许您处理来自Ajax服务的JSON，XML和文本响应。

翻译自: https://www.ibm.com/developerworks/web/library/wa-aj-consume/index.html