27、Struts Dojo 插件与 AJAX 开发指南

alice7model

于 2025-11-16 15:55:51 发布

阅读量9

点赞数

CC 4.0 BY-SA版权

分类专栏： Struts 2实战精要文章标签： Struts Dojo插件 AJAX开发 Dojo框架

本文链接：https://blog.youkuaiyun.com/alice7model/article/details/155041312

Struts 2实战精要专栏收录该内容

31 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

Struts Dojo 插件与 AJAX 开发指南

1. 登录示例与零配置特性

在开始介绍 Struts Dojo 插件之前，先来看一个简单的登录示例。以下是登录输入页面 login-input.jsp 的代码：

<%@ taglib prefix="s" uri="/struts-tags" %> 
<html> 
<head> 
<title>Login</title> 
<style type="text/css">@import url(css/main.css);</style> 
</head> 
<body> 
<div id="global" style="width:400px"> 
    <h3>Enter your user name and password</h3> 
    <s:form action="login.action"> 
        <s:textfield name="userName" label="User Name"/> 
        <s:password name="password" label="Password"/> 
        <s:submit value="Login"/> 
    </s:form> 
</div> 
</body> 
</html>

登录成功页面 login-success.jsp 的代码如下：

<html> 
<head> 
<title>CodeBehind</title> 
</head> 
<body> 
You're logged in. 
</body> 
</html>

要测试这个应用程序，将浏览器指向 http://localhost:8080/app26b/login-input.action 。这里涉及到 Struts 的零配置特性，它可以将 URL 与动作类进行匹配，但该特性不能匹配动作和结果，对于后者则需要使用 CodeBehind 插件。

2. AJAX 概述

AJAX 是由 Adaptive Path 的 Jesse James Garrett 为 JavaScript 和 XML 这两项旧技术创造的名称。AJAX 应用程序可以异步连接到服务器，收集更多数据并显示在当前网页上，从而实现无需刷新页面即可显示新信息。Google 的 Gmail 和 Google Maps 应用程序率先普及了这一策略。不过，Google 并非第一个充分利用 XMLHttpRequest 对象的，微软在 Internet Explorer 5 中添加了该对象，经验丰富的开发者发现了利用其优势的方法，随后 Mozilla 浏览器也有了自己版本的该对象。在 XMLHttpRequest 出现之前，人们使用 DHTML、HTML 框架和内联框架来实现页面无刷新更新。

然而，尽管客户端技术有所进步，但编写 JavaScript 代码（即 AJAX 应用程序）仍然具有挑战性。最大的挑战是浏览器兼容性，因为每个浏览器对 JavaScript 的实现略有不同，即使是同一浏览器在不同操作系统中对 JavaScript 的解释也可能不同。因此，需要在各种操作系统和浏览器中测试脚本，并编写多个版本的代码以确保在所有浏览器中都能正常工作。

3. Dojo 框架的作用

Dojo 是一个开源的 JavaScript 框架，Struts Dojo 插件集成了 Dojo 工具包，并提供自定义标签，使开发者可以轻松构建 AJAX 组件。即使对 JavaScript 一无所知，也可以使用该插件进行 AJAX 开发，但掌握 JavaScript 会更有助于发挥 AJAX 的强大功能。

Dojo 解决了跨浏览器环境中事件管理的难题，它提供了一种统一的事件处理方式。Dojo 允许将 JavaScript 函数与事件连接起来，创建事件处理程序。其 connect 方法用于连接事件和函数， disconnect 方法用于断开连接。Dojo 的事件对象是 JavaScript 事件对象的规范化版本，在所有支持的浏览器中提供统一的接口，避免了不同浏览器之间的差异。

此外，Dojo 支持基于主题的消息传递系统，实现匿名事件通信。可以将网页中原本互不了解的元素连接起来。一个主题类似于互联网邮件列表，任何对主题感兴趣的元素都可以订阅该主题，并在其他元素发布消息时收到通知。在 Dojo 0.4 中，发布主题的方法如下：

dojo.event.topic.publish(topicName, arguments)

订阅主题的方法如下：

Dojo.event.topic.subscribe(topicName, functionName)

Struts Dojo 插件的标签使处理主题更加容易，大多数标签可以在不使用 JavaScript 代码的情况下订阅和发布主题。例如， a 标签有 errorNotifyTopics 属性，用于列出标签引发错误时要发布的主题； div 标签有 startTimerListenTopics 属性，用于接受会导致渲染的 div 元素启动内部计时器的主题列表。

4. 使用 Struts Dojo 插件的步骤

要使用 Struts Dojo 插件的标签，需要遵循以下步骤：
1. 在 JSP 文件的顶部添加标签库指令：

<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>

将 Struts Dojo 插件复制到 WEB-INF/lib 目录中。
在每个 JSP 中编写 head 标签。

5. `head` 标签

head 标签用于渲染下载 Dojo 文件并配置 Dojo 的 JavaScript 代码，每个使用其他 Struts Dojo 标签的 JSP 都必须添加该标签。其属性如下表所示：
| 名称 | 数据类型 | 默认值 | 描述 |
| ---- | ---- | ---- | ---- |
| baseRelativePath | String | /struts/dojo | Dojo 分发文件夹的路径 |
| cache | boolean | true | 指示浏览器是否应缓存 Dojo 文件 |
| compressed | boolean | true | 指示是否应使用 Dojo 文件的压缩版本 |
| debug | boolean | false | 指示 Dojo 是否应处于调试模式 |
| extraLocales | String | | 以逗号分隔的 Dojo 要使用的语言环境列表 |
| locale | String | | 覆盖 Dojo 的语言环境 |
| parseContent | boolean | false | 指示是否解析整个文档以查找小部件 |

在开发模式下，建议将 debug 属性设置为 true ， cache 属性设置为 false ， compressed 属性设置为 false ，示例如下：

<sx:head debug="true" cache="false" compressed="false" />

在生产环境中，通常使用默认设置：

<sx:head/>

6. `div` 标签

div 标签用于渲染一个可以动态加载内容的 HTML div 元素，渲染后的 div 元素还具有内部计时器，可定期重新加载其内容。例如，可以使用该标签实现广告轮播，而无需编写编程代码。其属性如下表所示：
| 名称 | 数据类型 | 默认值 | 描述 |
| ---- | ---- | ---- | ---- |
| afterNotifyTopics | String | | 请求成功后要发布的以逗号分隔的主题 |
| autoStart | boolean | true | 是否自动启动计时器 |
| beforeNotifyTopics | String | | 请求前要发布的以逗号分隔的主题 |
| closable | boolean | false | 当 div 在选项卡面板中时是否显示关闭按钮 |
| delay | integer | | 在获取内容之前必须经过的毫秒数 |
| errorNotifyTopics | String | | 请求失败后要发布的以逗号分隔的主题 |
| errorText | String | | 请求失败时要显示的文本 |
| executeScripts | boolean | false | 指示是否执行获取内容中的 JavaScript 代码 |
| formFilter | String | | 用于过滤表单字段的函数 |
| formId | String | | 其字段将作为请求参数传递的表单的标识符 |
| handler | String | | 进行请求的 JavaScript 函数 |
| highlightColor | String | | 用于突出显示 targets 属性中指定元素的颜色 |
| highlightDuration | integer | 2000 | targets 属性中指定元素突出显示的持续时间（毫秒） |
| href | String | | 调用以获取内容的 URL |
| indicator | String | | 在进行请求时将显示的元素的标识符 |
| javascriptTooltip | boolean | false | 指示是否使用 JavaScript 生成工具提示 |
| listenTopics | String | | 将触发远程调用的主题 |
| loadingText | String | Loading… | 在获取内容时显示的文本 |
| notifyTopics | String | | 请求前后以及发生错误时要发布的以逗号分隔的主题 |
| openTemplate | String | | 用于打开渲染的 HTML 的模板 |
| parseContent | boolean | true | 是否解析返回的内容以查找小部件 |
| preload | boolean | true | 页面加载时是否加载内容 |
| refreshOnShow | boolean | false | 当 div 变为可见时是否加载内容（仅在 div 在选项卡面板中时生效） |
| separateScripts | boolean | true | 是否在每个标签唯一的单独作用域中运行脚本 |
| showErrorTransportText | boolean | true | 是否显示错误 |
| showLoadingText | boolean | false | 是否在目标上显示加载文本 |
| startTimerListenTopics | String | | 将启动计时器的主题 |
| stopTimerListenTopics | String | | 将停止计时器的主题 |
| transport | String | XMLHttp Transport | 进行请求的传输方式 |
| updateFreq | integer | | 内容更新的频率（毫秒） |

以下是 div 标签的三个示例：
- 示例 1 ： Div1.jsp 页面使用 div 标签每三秒更新一次自身内容。

<%@ taglib prefix="sx" uri="/struts-dojo-tags" %> 
<html> 
<head> 
<title>Div</title> 
<sx:head/> 
</head> 
<body> 
<sx:div 
        cssStyle="border:1px solid black;height:75px;width:100px" 
        href="ServerTime.action" 
        updateFreq="3000" 
        highlightColor="#cecdee"> 
       Server time will be displayed here 
</sx:div> 
</body> 
</html>

要测试这个示例，将浏览器指向 http://localhost:8080/app27a/Div1.action 。
- 示例 2 ： Div2.jsp 页面中的 div 标签的 startTimerListenTopics 属性设置为订阅 startTimer 主题，点击提交按钮将发布该主题，从而启动 div 的内部计时器。

<%@ taglib prefix="s" uri="/struts-tags" %> 
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %> 
<html> 
<head> 
<title>Div</title> 
<sx:head/> 
</head> 
<body> 
<sx:div 
        cssStyle="border:1px solid black;height:75px;width:100px" 
        href="ServerTime.action" 
        updateFreq="2000" 
        autoStart="false" 
        startTimerListenTopics="startTimer" 
        highlightColor="#ddaaba"> 
     Server time will be displayed here 
</sx:div> 
<s:submit theme="simple" value="Start timer" 
       onclick="dojo.event.topic.publish('startTimer')" 
/> 
</body> 
</html>

要测试这个示例，将浏览器指向 http://localhost:8080/app27a/Div2.action ，然后点击“Start timer”按钮。
- 示例 3 ： Div3.jsp 页面中的 div 标签每两秒发布一个 updateCounter 主题，订阅该主题的函数会更新计数器并更改另一个 div 标签的内容。

<%@ taglib prefix="s" uri="/struts-tags" %> 
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %> 
<html> 
<head> 
<title>Div</title> 
<sx:head/> 
<script type="text/javascript"> 
var counter = 1; 
dojo.event.topic.subscribe("updateCounter", function(event, widget){ 
       dojo.byId("counter").innerHTML = 
            "The server has been hit " + counter++ + " times"; 
}); 
</script> 
</head> 
<body> 
<sx:div 
        cssStyle="border:1px solid black;height:75px;width:100px" 
        href="ServerTime.action" 
        updateFreq="2000" 
        afterNotifyTopics="updateCounter" 
        highlightColor="#ddaaba"> 
     Server time will be displayed here 
</sx:div> 
<div id="counter"> 
</div> 
</body> 
</html>

要测试这个示例，将浏览器指向 http://localhost:8080/app27a/Div3.action 。

7. `a` 标签

a 标签用于渲染一个 HTML 锚点，点击该锚点时会发起 AJAX 请求。其 targets 属性用于指定将显示 AJAX 响应的元素（通常是 div 元素）。如果该标签嵌套在表单中，点击时将提交表单。 a 标签的属性如下表所示：
| 名称 | 数据类型 | 默认值 | 描述 |
| ---- | ---- | ---- | ---- |
| afterNotifyTopics | String | | 请求成功后要发布的以逗号分隔的主题 |
| ajaxAfterValidation | boolean | false | 指示验证成功后是否进行异步请求（仅在 validate 属性设置为 true 时生效） |
| beforeNotifyTopics | String | | 请求前要发布的以逗号分隔的主题 |
| errorNotifyTopics | String | | 请求失败后要发布的以逗号分隔的主题 |
| errorText | String | | 请求失败时要显示的文本 |
| executeScripts | boolean | false | 指示是否执行获取内容中的 JavaScript 代码 |
| formFilter | String | | 用于过滤表单字段的函数 |
| formId | String | | 其字段将作为请求参数传递的表单的标识符 |
| handler | String | | 进行请求的 JavaScript 函数 |
| highlightColor | String | | 用于突出显示 targets 属性中指定元素的颜色 |
| highlightDuration | integer | 2000 | targets 属性中指定元素突出显示的持续时间（毫秒） |
| href | String | | 调用以获取内容的 URL |
| indicator | String | | 在进行请求时将显示的元素的标识符 |
| javascriptTooltip | boolean | false | 指示是否使用 JavaScript 生成工具提示 |
| listenTopics | String | | 将触发远程调用的主题 |
| loadingText | String | Loading… | 在获取内容时显示的文本 |
| notifyTopics | String | | 请求前后以及发生错误时要发布的以逗号分隔的主题 |
| openTemplate | String | | 用于打开渲染的 HTML 的模板 |
| parseContent | boolean | true | 是否解析返回的内容以查找小部件 |
| separateScripts | boolean | true | 是否在每个标签唯一的单独作用域中运行脚本 |
| showErrorTransportText | boolean | true | 是否显示错误 |
| showLoadingText | boolean | false | 是否在目标上显示加载文本 |
| targets | String | | 其内容将被更新的元素的以逗号分隔的标识符 |
| transport | String | XMLHttp Transport | 进行请求的传输方式 |
| validate | boolean | false | 是否执行 AJAX 验证 |

例如， A.jsp 页面可以使用 a 标签填充 div1 和 div2 元素。

综上所述，Struts Dojo 插件通过集成 Dojo 框架，为开发者提供了强大而便捷的 AJAX 开发能力。通过使用插件提供的自定义标签，开发者可以轻松构建动态、交互性强的 Web 应用程序，同时避免了处理复杂的 JavaScript 和浏览器兼容性问题。无论是新手还是有经验的开发者，都能从该插件中受益，提高开发效率和应用程序的质量。

Struts Dojo 插件与 AJAX 开发指南

8. 开发与部署注意事项

在使用 Struts Dojo 插件进行 AJAX 开发时，有一些开发和部署方面的注意事项需要关注。

8.1 版本问题

Struts Dojo 插件中集成的 Dojo 版本为 0.4，这是一个较旧的版本，相比当前的版本 1.01 速度较慢。并且 Dojo 1.0 及更高版本与 0.4 版本不兼容，这意味着使用当前插件编写的代码在未来插件更新时可能无法正常工作。不过，预计 Struts Dojo 插件的下一个版本会引入 Dojo 1.01 或更高版本。

8.2 开发环境配置

在开发模式下，为了方便调试和代码阅读，建议对 head 标签的属性进行相应设置。将 debug 属性设置为 true ，这样 Dojo 会在页面底部显示警告和错误消息；将 cache 属性设置为 false ，避免浏览器缓存 Dojo 文件，确保每次加载的都是最新代码；将 compressed 属性设置为 false ，使用未压缩的 Dojo 文件，方便查看和调试代码。示例如下：

<sx:head debug="true" cache="false" compressed="false" />

在生产环境中，为了提高页面加载速度，建议使用默认设置：

<sx:head/>

9. 总结与展望

Struts Dojo 插件为开发者提供了一种简单有效的方式来创建 AJAX 应用程序。通过集成 Dojo 框架，它解决了跨浏览器兼容性和事件管理的难题，使开发者可以专注于业务逻辑的实现。

9.1 插件优势总结

简化开发 ：提供自定义标签，无需编写大量 JavaScript 代码即可构建 AJAX 组件。
跨浏览器兼容性 ：Dojo 的规范化事件对象和统一的接口，避免了不同浏览器之间的差异。
主题消息传递系统 ：基于主题的消息传递系统实现了匿名事件通信，增强了组件之间的交互性。

9.2 未来发展方向

随着 Dojo 框架的不断发展，Struts Dojo 插件有望引入更新版本的 Dojo，以提供更好的性能和更多的功能。同时，开发者可以期待插件在处理复杂 AJAX 场景时更加高效和稳定。

10. 操作流程总结

为了帮助开发者更好地理解和使用 Struts Dojo 插件，下面总结了使用该插件的操作流程：
1. 添加标签库指令 ：在 JSP 文件的顶部添加以下标签库指令：

<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>

复制插件到项目 ：将 Struts Dojo 插件复制到 WEB-INF/lib 目录中。
编写 head 标签 ：在每个使用 Struts Dojo 标签的 JSP 中编写 head 标签，并根据开发或生产环境进行相应的属性设置。
使用自定义标签 ：根据需求使用 div 、 a 等自定义标签构建 AJAX 组件，并设置相应的属性。

11. 流程图

下面是使用 Struts Dojo 插件开发 AJAX 应用程序的基本流程图：

graph TD;
    A[开始] --> B[添加标签库指令];
    B --> C[复制插件到项目];
    C --> D[编写 head 标签];
    D --> E[使用自定义标签];
    E --> F[开发与调试];
    F --> G[部署到生产环境];
    G --> H[结束];

12. 常见问题解答

在使用 Struts Dojo 插件过程中，可能会遇到一些常见问题，以下是一些解答：
- 问题 1：为什么我的 AJAX 请求没有成功？
- 解答：检查 href 属性指定的 URL 是否正确，服务器是否正常响应。同时，查看 errorNotifyTopics 属性指定的主题，是否有错误消息发布。
- 问题 2：如何在开发模式下调试 Dojo 代码？
- 解答：将 head 标签的 debug 属性设置为 true ，这样 Dojo 会在页面底部显示警告和错误消息，帮助你定位问题。
- 问题 3：Dojo 0.4 版本与新版本不兼容怎么办？
- 解答：关注 Struts Dojo 插件的更新，等待引入新版本的 Dojo。在更新之前，尽量避免使用新版本 Dojo 中不兼容的特性。