神马文学网Struts 2与AJAX（第一部分）
来源：百度文库 编辑：神马文学网 时间：2024/07/03 08:28:53
Struts 2与AJAX（第一部分）
在当今——Web 2.0概念铺天盖地的Internet环境下，简易的AJAX集成对于一个成功的WEB框架来说是不可或缺的。因此，Struts 2其中的一个重要的功能（Feature）就是“First-class AJAX support - Add interactivity and flexibility with AJAX tags that look and feel just like standard Struts tags（大意：一流的AJAX支持——通过AJAX标志增加互动性和灵活性，而且使用这些AJAX标志与普通的Struts标志同样简单）”。
实现原理
基于不重新发明轮子的原则，Struts 2并没有开发新的AJAX框架，而是使用时下Java EE平台中比较流行的AJAX框架——Dojo和DWR。
最近在Musachy Barroso等同志的无私奉献下，开发了Struts 2的JSON插件（Plugin），极大地方便了我们输出JSON结果（Result）。
JSON插件（Plugin）
在Struts 2的showcase中的AJAX部分，JSON的结果输出是通过Freemaker模板实现。这种方法在简易性和灵活性上都比不上JSON插件，所以JSON插件值得向大家五星推荐。
下面让我们看一个JSON插件的例子。
首先到以下网址http://code.google.com/p/jsonplugin/downloads/list下载JSON插件的JAR包，并将其加入你的WebContent\WEB-INF\lib下。
接下是本例子的Action代码：
package tutorial;
import java.util.ArrayList;
import java.util.List;
import com.googlecode.jsonplugin.annotations.JSON;
import com.opensymphony.xwork2.ActionSupport;
public class JsonPluginAction extends ActionSupport
{
private static final long serialVersionUID = -6784977600668791997L;
private int bookId;
private String title;
private double price;
private List comments;
private transient String secret1;
private String secret2;
@JSON(name="ISBN")
public int getBookId(){
return bookId;
}
public void setBookId(int bookId){
this.bookId = bookId;
}
public List getComments(){
return comments;
}
public void setComments(List comments){
this.comments = comments;
}
public double getPrice(){
return price;
}
public void setPrice(double price){
this.price = price;
}
public String getTitle(){
return title;
}
public void setTitle(String title){
this.title = title;
}
@Override
public String execute(){
bookId = 15645912;
title = "Max On Java";
price = 0.9999d;
comments = new ArrayList(3);
comments.add("It‘s no bad!");
comments.add("WOW!");
comments.add("No comment!");
secret1 = "You can‘t see me!";
secret2 = "I am invisible!";
return SUCCESS;
}
}
清单1 src/tutorial/JsonPluginAction.java
以上代码值得注意的是，通过@JSON的JAVA注释（Annotation），我们可以改变JSON结果的属性名称，另外带有transient修饰符与没有Getter方法的字段（field）都不会被串行化为JSON。
然后，我们来配置一下此Action，代码如下：
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
清单2 src/struts.xml
上面配置文件的“package”元素和以往不同的是，它扩展了“json-default”而不是“struts-default”。“json-default”是在jsonplugin-0.11.jar包里的struts-plugin.xml中定义的。该文件同时定义了“json”的结果类型，有兴趣的朋友可以打开此文件看看。
发布运行应用程序，在浏览器中键入：http://localhost:8080/Struts2_Ajax/JsonPlugin.action，出现下载文件对话框，原因是JSON插件将HTTP响应（Response）的MIME类型设为“application/json”。把文件下载下来，用记事本打开，内容如下：
{"ISBN":15645912,"comments":["It‘s no bad!","WOW!","No comment!"],"price":0.9999,"title":"Max On Java"}
清单3 例子1输出的JSON串
当然这还不是一个完整的AJAX的例子，下面让我们写一个HTML文件将其完成，HTML代码如下：
JSON Plugin
清单4 WebContent/JsonPlugin.html
以上代码中，我没有使用任何的AJAX的Javascript包，而是参考《Professional Javascript For Web Developer》手工创建XHR（XMLHttpRequest），并在XHR完成后使用eval()方法将JSON字符串变为JSON对象。需要注意的是，要调用eval函数时，必须使用“(”和“)”将JSON字符串括起来，否则会出错的。
打开http://localhost:8080/Struts2_Ajax/JsonPlugin.html，点击“Retrieve Book”按钮，页面如下图所示：
图1 JsonPlugin.html页面输出
Struts 2与Dojo
Dojo是开源Javascript工具包，它引了Widget的概念，方便了Javascript面向对象编程（OOP），改进Javascript的事件模型。在此我不打算对此进行深入的讲解，有兴趣的朋友的可以找网上找一些关于Dojo的资料学习。
Struts 2基于Dojo编写一些AJAX标志（在Dojo中称为Widget），要使用这些标志的AJAX功能，需要将标志的“theme”属性设为“ajax”。同时，亦需要将加入在与之间加入
名称 描述
href XHR（XMLHttpRequest）请求的地址
listenTopics 监听的Dojo话题（Topic）以触发自身，如可以在可以通过发布（Publish）相应的话题，通知
notifyTopics 完成远程调用后，发出通知，触发相应的Javascript函数或Dojo Widget
formId 需要提交到服务器的表单的ID
formFilter 过滤表单字段的Javascript函数名称
indicator 在XHR处理过程中，包含用户提示的信息的HTML元素的ID，如图片或DIV等
表1 常用的AJAX标志属性
这些标志包括：
1、
这两个标志方便了我们的调用XHR实现AJAX，所以上面的HTML如果使用了这两标志将会变得更简单，因为我们不用再去理会繁锁的XHR创建和设定的工作。下面是示例代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
JSON Plugin
value="Retrieve Book" align="left" notifyTopics="retrieveBook" />
notifyTopics="retrieveBook">Retrieve Book
![]()
src="${pageContext.request.contextPath}/images/indicator.gif"
alt="Loading" style="display:none" />
清单5 WebContent/LinkButton.jsp
可能上述代码还不够简洁，因为我将HTML格式化的工作都放在Javascript中完成。但如果你的XHR返回的是HTML片段，你可以简单地将
2、
Autocomplete是比较经典的AJAX应用，虽然谷歌已经停止使用这一功能，但就Autocompleter自身而言的确是很酷的。下面是一个
首先，我要伪造一些字符串数据，代码如下：
package tutorial;
import java.util.ArrayList;
import java.util.List;
public final class Datas{
public static final List NAMES;
static{
NAMES = new ArrayList();
NAMES.add("Alabama");
NAMES.add("Alaska");
NAMES.add("American Samoa");
NAMES.add("Arizona");
NAMES.add("Arkansas");
NAMES.add("Armed Forces Europe");
NAMES.add("Armed Forces Pacific");
NAMES.add("Armed Forces the Americas");
NAMES.add("California");
NAMES.add("Colorado");
NAMES.add("Connecticut");
NAMES.add("Delaware");
NAMES.add("District of Columbia");
NAMES.add("Federated States of Micronesia");
NAMES.add("Florida");
NAMES.add("Georgia");
NAMES.add("Guam");
NAMES.add("Hawaii");
NAMES.add("Idaho");
NAMES.add("Illinois");
NAMES.add("Indiana");
NAMES.add("Iowa");
NAMES.add("Kansas");
NAMES.add("Kentucky");
NAMES.add("Louisiana");
NAMES.add("Maine");
NAMES.add("Marshall Islands");
NAMES.add("Maryland");
NAMES.add("Massachusetts");
NAMES.add("Michigan");
NAMES.add("Minnesota");
NAMES.add("Mississippi");
NAMES.add("Missouri");
NAMES.add("Montana");
NAMES.add("Nebraska");
NAMES.add("Nevada");
NAMES.add("New Hampshire");
NAMES.add("New Jersey");
NAMES.add("New Mexico");
NAMES.add("New York");
NAMES.add("North Carolina");
NAMES.add("North Dakota");
NAMES.add("Northern Mariana Islands");
NAMES.add("Ohio");
NAMES.add("Oklahoma");
NAMES.add("Oregon");
NAMES.add("Pennsylvania");
NAMES.add("Puerto Rico");
NAMES.add("Rhode Island");
NAMES.add("South Carolina");
NAMES.add("South Dakota");
NAMES.add("Tennessee");
NAMES.add("Texas");
NAMES.add("Utah");
NAMES.add("Vermont");
NAMES.add("Virgin Islands, U.S.");
NAMES.add("Virginia");
NAMES.add("Washington");
NAMES.add("West Virginia");
NAMES.add("Wisconsin");
NAMES.add("Wyoming");
}
}
清单6 src/tutorial/Datas.java
然后是用于获取和过滤数据的Action，代码如下：
package tutorial;
import java.util.ArrayList;
import java.util.List;
import com.opensymphony.xwork2.ActionSupport;
public class AutocompleterAction extends ActionSupport{
private static final long serialVersionUID = -8201401726773589361L;
private List names;
private String start;
public void setStart(String start){
this.start = start;
}
public List getNames(){
return names;
}
@Override
public String execute(){
names = new ArrayList();
if(start == null || "".equals(start.trim())){
start = "a";
}
for(String s : Datas.NAMES){
if(s.toLowerCase().startsWith(start.toLowerCase())){
names.add(new String[]{ s, s });
}
}
return SUCCESS;
}
}
清单7 src/tutorial/AutocmpleterAction.java
上述Action会以JSON的形式返回以start开头的Datas.NAMES的中字符串，以下是此Action的配置：
names
清单8 Autocompleter Action的配置代码片段
在JSON类型结果的参数中加入“root”参数可以设定输出JSON结果的根，以上述情况为例，如果没有“root”参数，输出将为“{ "names": [ ["xxx", "xxx"]...] }”，加了之后变就会成“[ ["xxx", "xxx"]...] ”。接下来，让我们看看页面的代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
Struts 2 AJAX - Autocompleter
list="@tutorial.Datas@NAMES" />
loadOnTextChange="true" loadMinimumCount="1" indicator="indicator"
autoComplete="false" showDownArrow="false" />
![]()
src="${pageContext.request.contextPath}/images/indicator.gif"
alt="Loading" style="display:none" />
清单9 WebContent/Autocompleter.jsp
上述页面包含两个
图2 Autocompleter.jsp页面输出
3、
树是是比较常用的数据结构，因为它可以很好地体现真实世界中对象之间的关系。
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
Struts 2 AJAX - Tree
templateCssPath="/struts/tree.css" showRootGrid="true"
showGrid="true">
清单10 WebContent/Tree.jsp
因为Dojo的树控件，即使在没有设定“selector”情况下，也会自动生成一个默认的Selector，所以只要将其事件绑定到特定的事件处理函数即可。
打开http://localhost:8080/Struts2_Ajax/Tree.jsp，点击任一树节点，页面如下图所示：
图3 Tree.jsp页面输出
总结
我原本打算用一篇文章写完这个“Struts 2与AJAX”。不过在写的过程中，发现内容越来越多。如果勉强写成一篇，朋友们读起来也会很麻烦，所以我决定分开几部分，本文为第一部分。
另外，之前有的朋友建议我建一个Google的讨论组，方便大家讨论问题。我觉得这个提议非常好，一直以来都是“一人写，大家留言”，这种相对单向的方式不免有所欠缺，而且本人所知也有限，开个讨论组大家可以相互讨论，共同进步。
因为Struts2已经被创建，所以申请了“struts2cn”，有兴趣的朋友，欢迎加入。
在当今——Web 2.0概念铺天盖地的Internet环境下，简易的AJAX集成对于一个成功的WEB框架来说是不可或缺的。因此，Struts 2其中的一个重要的功能（Feature）就是“First-class AJAX support - Add interactivity and flexibility with AJAX tags that look and feel just like standard Struts tags（大意：一流的AJAX支持——通过AJAX标志增加互动性和灵活性，而且使用这些AJAX标志与普通的Struts标志同样简单）”。
实现原理
基于不重新发明轮子的原则，Struts 2并没有开发新的AJAX框架，而是使用时下Java EE平台中比较流行的AJAX框架——Dojo和DWR。
最近在Musachy Barroso等同志的无私奉献下，开发了Struts 2的JSON插件（Plugin），极大地方便了我们输出JSON结果（Result）。
JSON插件（Plugin）
在Struts 2的showcase中的AJAX部分，JSON的结果输出是通过Freemaker模板实现。这种方法在简易性和灵活性上都比不上JSON插件，所以JSON插件值得向大家五星推荐。
下面让我们看一个JSON插件的例子。
首先到以下网址http://code.google.com/p/jsonplugin/downloads/list下载JSON插件的JAR包，并将其加入你的WebContent\WEB-INF\lib下。
接下是本例子的Action代码：
package tutorial;import java.util.ArrayList;import java.util.List;import com.googlecode.jsonplugin.annotations.JSON;import com.opensymphony.xwork2.ActionSupport;public class JsonPluginAction extends ActionSupport{ private static final long serialVersionUID = -6784977600668791997L; private int bookId; private String title; private double price; private List private transient String secret1; private String secret2; @JSON(name="ISBN") public int getBookId(){ return bookId; } public void setBookId(int bookId){ this.bookId = bookId; } public List{ return comments; } public void setComments(List{ this.comments = comments; } public double getPrice(){ return price; } public void setPrice(double price){ this.price = price; } public String getTitle(){ return title; } public void setTitle(String title){ this.title = title; } @Override public String execute(){ bookId = 15645912; title = "Max On Java"; price = 0.9999d; comments = new ArrayList comments.add("It‘s no bad!"); comments.add("WOW!"); comments.add("No comment!"); secret1 = "You can‘t see me!"; secret2 = "I am invisible!"; return SUCCESS; }}清单1 src/tutorial/JsonPluginAction.java
以上代码值得注意的是，通过@JSON的JAVA注释（Annotation），我们可以改变JSON结果的属性名称，另外带有transient修饰符与没有Getter方法的字段（field）都不会被串行化为JSON。
然后，我们来配置一下此Action，代码如下：
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
清单2 src/struts.xml
上面配置文件的“package”元素和以往不同的是，它扩展了“json-default”而不是“struts-default”。“json-default”是在jsonplugin-0.11.jar包里的struts-plugin.xml中定义的。该文件同时定义了“json”的结果类型，有兴趣的朋友可以打开此文件看看。
发布运行应用程序，在浏览器中键入：http://localhost:8080/Struts2_Ajax/JsonPlugin.action，出现下载文件对话框，原因是JSON插件将HTTP响应（Response）的MIME类型设为“application/json”。把文件下载下来，用记事本打开，内容如下：
{"ISBN":15645912,"comments":["It‘s no bad!","WOW!","No comment!"],"price":0.9999,"title":"Max On Java"}
清单3 例子1输出的JSON串
当然这还不是一个完整的AJAX的例子，下面让我们写一个HTML文件将其完成，HTML代码如下：
清单4 WebContent/JsonPlugin.html
以上代码中，我没有使用任何的AJAX的Javascript包，而是参考《Professional Javascript For Web Developer》手工创建XHR（XMLHttpRequest），并在XHR完成后使用eval()方法将JSON字符串变为JSON对象。需要注意的是，要调用eval函数时，必须使用“(”和“)”将JSON字符串括起来，否则会出错的。
打开http://localhost:8080/Struts2_Ajax/JsonPlugin.html，点击“Retrieve Book”按钮，页面如下图所示：
图1 JsonPlugin.html页面输出
Struts 2与Dojo
Dojo是开源Javascript工具包，它引了Widget的概念，方便了Javascript面向对象编程（OOP），改进Javascript的事件模型。在此我不打算对此进行深入的讲解，有兴趣的朋友的可以找网上找一些关于Dojo的资料学习。
Struts 2基于Dojo编写一些AJAX标志（在Dojo中称为Widget），要使用这些标志的AJAX功能，需要将标志的“theme”属性设为“ajax”。同时，亦需要将加入在与之间加入
名称 描述
href XHR（XMLHttpRequest）请求的地址
listenTopics 监听的Dojo话题（Topic）以触发自身，如可以在可以通过发布（Publish）相应的话题，通知
notifyTopics 完成远程调用后，发出通知，触发相应的Javascript函数或Dojo Widget
formId 需要提交到服务器的表单的ID
formFilter 过滤表单字段的Javascript函数名称
indicator 在XHR处理过程中，包含用户提示的信息的HTML元素的ID，如图片或DIV等
表1 常用的AJAX标志属性
这些标志包括：
1、
这两个标志方便了我们的调用XHR实现AJAX，所以上面的HTML如果使用了这两标志将会变得更简单，因为我们不用再去理会繁锁的XHR创建和设定的工作。下面是示例代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
alt="Loading
" style="display:none" />清单5 WebContent/LinkButton.jsp
可能上述代码还不够简洁，因为我将HTML格式化的工作都放在Javascript中完成。但如果你的XHR返回的是HTML片段，你可以简单地将
2、
Autocomplete是比较经典的AJAX应用，虽然谷歌已经停止使用这一功能，但就Autocompleter自身而言的确是很酷的。下面是一个
首先，我要伪造一些字符串数据，代码如下：
package tutorial;import java.util.ArrayList;import java.util.List;public final class Datas{ public static final List static{ NAMES = new ArrayList NAMES.add("Alabama"); NAMES.add("Alaska"); NAMES.add("American Samoa"); NAMES.add("Arizona"); NAMES.add("Arkansas"); NAMES.add("Armed Forces Europe"); NAMES.add("Armed Forces Pacific"); NAMES.add("Armed Forces the Americas"); NAMES.add("California"); NAMES.add("Colorado"); NAMES.add("Connecticut"); NAMES.add("Delaware"); NAMES.add("District of Columbia"); NAMES.add("Federated States of Micronesia"); NAMES.add("Florida"); NAMES.add("Georgia"); NAMES.add("Guam"); NAMES.add("Hawaii"); NAMES.add("Idaho"); NAMES.add("Illinois"); NAMES.add("Indiana"); NAMES.add("Iowa"); NAMES.add("Kansas"); NAMES.add("Kentucky"); NAMES.add("Louisiana"); NAMES.add("Maine"); NAMES.add("Marshall Islands"); NAMES.add("Maryland"); NAMES.add("Massachusetts"); NAMES.add("Michigan"); NAMES.add("Minnesota"); NAMES.add("Mississippi"); NAMES.add("Missouri"); NAMES.add("Montana"); NAMES.add("Nebraska"); NAMES.add("Nevada"); NAMES.add("New Hampshire"); NAMES.add("New Jersey"); NAMES.add("New Mexico"); NAMES.add("New York"); NAMES.add("North Carolina"); NAMES.add("North Dakota"); NAMES.add("Northern Mariana Islands"); NAMES.add("Ohio"); NAMES.add("Oklahoma"); NAMES.add("Oregon"); NAMES.add("Pennsylvania"); NAMES.add("Puerto Rico"); NAMES.add("Rhode Island"); NAMES.add("South Carolina"); NAMES.add("South Dakota"); NAMES.add("Tennessee"); NAMES.add("Texas"); NAMES.add("Utah"); NAMES.add("Vermont"); NAMES.add("Virgin Islands, U.S."); NAMES.add("Virginia"); NAMES.add("Washington"); NAMES.add("West Virginia"); NAMES.add("Wisconsin"); NAMES.add("Wyoming"); }}清单6 src/tutorial/Datas.java
然后是用于获取和过滤数据的Action，代码如下：
package tutorial;import java.util.ArrayList;import java.util.List;import com.opensymphony.xwork2.ActionSupport;public class AutocompleterAction extends ActionSupport{ private static final long serialVersionUID = -8201401726773589361L; private List private String start; public void setStart(String start){ this.start = start; } public List{ return names; } @Override public String execute(){ names = new ArrayList if(start == null || "".equals(start.trim())){ start = "a"; } for(String s : Datas.NAMES){ if(s.toLowerCase().startsWith(start.toLowerCase())){ names.add(new String[]{ s, s }); } } return SUCCESS; }}清单7 src/tutorial/AutocmpleterAction.java
上述Action会以JSON的形式返回以start开头的Datas.NAMES的中字符串，以下是此Action的配置：
names
清单8 Autocompleter Action的配置代码片段
在JSON类型结果的参数中加入“root”参数可以设定输出JSON结果的根，以上述情况为例，如果没有“root”参数，输出将为“{ "names": [ ["xxx", "xxx"]...] }”，加了之后变就会成“[ ["xxx", "xxx"]...] ”。接下来，让我们看看页面的代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
Autocompleter
autoComplete="false" showDownArrow="false" />
alt="Loading
" style="display:none" />清单9 WebContent/Autocompleter.jsp
上述页面包含两个
图2 Autocompleter.jsp页面输出
3、
树是是比较常用的数据结构，因为它可以很好地体现真实世界中对象之间的关系。
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
Tree
showGrid="true">
清单10 WebContent/Tree.jsp
因为Dojo的树控件，即使在没有设定“selector”情况下，也会自动生成一个默认的Selector，所以只要将其事件绑定到特定的事件处理函数即可。
打开http://localhost:8080/Struts2_Ajax/Tree.jsp，点击任一树节点，页面如下图所示：
图3 Tree.jsp页面输出
总结
我原本打算用一篇文章写完这个“Struts 2与AJAX”。不过在写的过程中，发现内容越来越多。如果勉强写成一篇，朋友们读起来也会很麻烦，所以我决定分开几部分，本文为第一部分。
另外，之前有的朋友建议我建一个Google的讨论组，方便大家讨论问题。我觉得这个提议非常好，一直以来都是“一人写，大家留言”，这种相对单向的方式不免有所欠缺，而且本人所知也有限，开个讨论组大家可以相互讨论，共同进步。
因为Struts2已经被创建，所以申请了“struts2cn”，有兴趣的朋友，欢迎加入。
Struts 2与AJAX（第一部分）
Struts 2与AJAX（第二部分）
Struts 2与AJAX（第二部分）
Struts 2与AJAX（第三部分）
AJAX开发简略 (第一部分)
AJAX开发简略 (第一部分)
AJAX开发简略 (第一部分)
使用AJAX的Struts验证框架(2)
Struts 2中使用JSon ajax支持
Matrix - 与 Java 共舞 - Jakarta Struts 编程：使用Tiles框架（第三部分）
在Struts中应用Ajax
Ajax 和 REST，第 2 部分
Ajax 和 REST，第 2 部分
Ajax 和 REST，第 1 部分 (转与developerWorks 中国)
使用AJAX的Struts验证框架
使用AJAX的Struts验证框架(5)
在Struts应用中施展AJAX魔法
使用AJAX的Struts验证框架(5)
慧缘禅语（第一部分）
开发端到端的 Ajax 应用程序，第 2 部分: 实现 Ajax 客户机和服务器层
struts原理与实践（4）
struts 原理与实践（5）
struts原理与实践（6）
Struts原理与实践（1）