在当今——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插件的例子。
首先到以下网址下载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;
publicclass jsonpluginaction extends actionsupport 
{
privatestaticfinallong serialversionuid =-6784977600668791997l;
privateint bookid;
private string title;
privatedouble price;
private list<string> comments;
privatetransient string secret1;
private string secret2;
@json(name="isbn")
publicint getbookid() {
return bookid;
}
publicvoid setbookid(int bookid) {
this.bookid = bookid;
}
public list<string> getcomments() {
return comments;
}
publicvoid setcomments(list<string> comments) {
this.comments = comments;
}
publicdouble getprice() {
return price;
}
publicvoid setprice(double price) {
this.price = price;
}
public string gettitle() {
return title;
}
publicvoid settitle(string title) {
this.title = title;
}
@override
public string execute() {
bookid =15645912;
title ="max on java";
price =0.9999d;
comments =new arraylist<string>(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;
}
}以上代码值得注意的是，通过@json的java注释（annotation），我们可以改变json结果的属性名称，另外带有transient修饰符与没有getter方法的字段（field）都不会被串行化为json。
然后，我们来配置一下此action，代码如下：
xml version="1.0" encoding="utf-8"?>
doctype struts public
"-//apache software foundation//dtd struts configuration 2.0//en"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="struts2_ajax_demo" extends="json-default">
<action name="jsonplugin" class="tutorial.jsonpluginaction">
<result type="json"/>
action>
package>
struts>
清单2 src/struts.xml
上面配置文件的“package”元素和以往不同的是，它扩展了“json-default”而不是“struts-default”。“json-default”是在jsonplugin-0.11.jar包里的struts-plugin.xml中定义的。该文件同时定义了“json”的结果类型，有兴趣的朋友可以打开此文件看看。
发布运行应用程序，在浏览器中键入：，出现下载文件对话框，原因是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代码如下：
doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>json plugintitle>
<script type="text/javascript">
var bxmlhttpsupport = (typeof xmlhttprequest !="undefined"|| window.activexobject);
if (typeof xmlhttprequest =="undefined"&& window.activexobject) {
function xmlhttprequest() {
var arrsignatures = ["msxml2.xmlhttp.5.0", "msxml2.xmlhttp.4.0",
"msxml2.xmlhttp.3.0", "msxml2.xmlhttp",
"microsoft.xmlhttp"];
for (var i=0; i < arrsignatures.length; i) {
try {
var orequest =new activexobject(arrsignatures[i]);
return orequest;
} catch (oerror) { /*ignore*/ }
}
thrownew error("msxml is not installed on your system.");
}
}
function retrievebook() {
if(bxmlhttpsupport) {
var surl = 'jsonplugin.action';
var orequest =new xmlhttprequest();
orequest.onreadystatechange =function() {
if(orequest.readystate ==4) {
var obook = eval('(' orequest.responsetext ')');
var bookholder = document.getelementbyid('bookholder');
var sbook = '<p><b>isbn: b>' obook.isbn 'p>';
sbook = ('<p><b>title: b>' obook.title 'p>');
sbook = ('<p><b>price: b>$' obook.price 'p>');
sbook = ('<b><i>comments: i>b><hr/>');
for(i =0; i < obook.comments.length; i) {
sbook = ('<p><b>#' (i 1) ' b>' obook.comments[i] 'p>');
}
bookholder.innerhtml = sbook;
}
};
orequest.open('post', surl);
orequest.send(null);
}
}
script>
head>
<body>
<input type="button" value="retrieve book" onclick="retrievebook()"/>
<div id="bookholder">div>
body>
html>
清单4 webcontent/jsonplugin.html
以上代码中，我没有使用任何的ajax的javascript包，而是参考《professional javascript for web developer》手工创建xhr（xmlhttprequest），并在xhr完成后使用eval()方法将json字符串变为json对象。需要注意的是，要调用eval函数时，必须使用“(”和“)”将json字符串括起来，否则会出错的。
打开，点击“retrieve book”按钮，页面如下图所示：
图1 jsonplugin.html页面输出
struts 2与dojo
是开源javascript工具包，它引了widget的概念，方便了javascript面向对象编程（oop），改进javascript的事件模型。在此我不打算对此进行深入的讲解，有兴趣的朋友的可以找网上找一些关于dojo的资料学习。
struts 2基于dojo编写一些ajax标志（在dojo中称为widget），要使用这些标志的ajax功能，需要将标志的“theme”属性设为“ajax”。同时，亦需要将加入在与之间加入。当使用这些标志的ajax功能，有些属性可能会经常用到，所以我会对这些属性稍作解释。
| 名称 |
描述 |
| href |
xhr（xmlhttprequest）请求的地址 |
| listentopics |
监听的dojo话题（topic）以触发自身，如可以在可以通过发布（publish）相应的话题，通知重新加载其备选项（options） |
| 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"%>
doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>json plugintitle>
<s:head theme="ajax"/>
<script type="text/javascript">
dojo.addonload(function() {
dojo.event.topic.subscribe('retrievebook', this, function(data, type, e){
if(type == 'load') {
showbook(data);
} elseif(type == 'error') {
alert('can not retrieve the book');
}
});
});
function showbook(strbook) {
var obook = eval('(' strbook ')');
var bookholder = document.getelementbyid('bookholder');
var sbook = '<p><b>isbn: b>' obook.isbn 'p>';
sbook = ('<p><b>title: b>' obook.title 'p>');
sbook = ('<p><b>price: b>$' obook.price 'p>');
sbook = ('<b><i>comments: i>b><hr/>');
for(i =0; i < obook.comments.length; i) {
sbook = ('<p><b>#' (i 1) ' b>' obook.comments[i] 'p>');
}
bookholder.innerhtml = sbook;
}
script>
head>
<body>
<s:url id="bookurl" value="/jsonplugin.action"/>
<s:submit href="%{bookurl}" theme="ajax" indicator="indicator"
value="retrieve book" align="left" notifytopics="retrievebook"/>
<s:a theme="ajax" href="%{bookurl}" indicator="indicator"
notifytopics="retrievebook">retrieve books:a>
<img id="indicator"
src="${pagecontext.request.contextpath}/images/indicator.gif"
alt="loading" style="display:none"/>
<div id="bookholder">div>
body>
html>
清单5 webcontent/linkbutton.jsp
可能上述代码还不够简洁，因为我将html格式化的工作都放在javascript中完成。但如果你的xhr返回的是html片段，你可以简单地将或的“targets”属性设为“bookholder”即可，详情大家可以参考struts 2 showcase。至于返回html片段，可以通过action freemaker完成。
2、
autocomplete是比较经典的ajax应用，虽然谷歌已经停止使用这一功能，但就autocompleter自身而言的确是很酷的。下面是一个的例子。
首先，我要伪造一些字符串数据，代码如下：
package tutorial;
import java.util.arraylist;
import java.util.list;
publicfinalclass datas {
publicstaticfinal list<string> names;
static{
names =new arraylist<string>();
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;
publicclass autocompleteraction extends actionsupport {
privatestaticfinallong serialversionuid =-8201401726773589361l;
private list<string[]> names;
private string start;
publicvoid setstart(string start) {
this.start = start;
}
public list<string[]> getnames() {
return names;
}
@override
public string execute() {
names =new arraylist<string[]>();
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的配置：
<action name="autocompleter" class="tutorial.autocompleteraction">
<result type="json">
<param name="root">namesparam>
result>
action>
清单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"%>
doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>struts 2 ajax - autocompletertitle>
<s:head theme="ajax"/>
head>
<body>
<h2>
autocompleter
h2>
<s:form action="autocompleterform">
<s:textfield label="abc" name="abc"/>
<tr>
<td class="tdlabel">
<label class="label">
no ajax autocompleter:
label>
td>
<td>
<s:autocompleter theme="simple" name="user"
list="@tutorial.datas@names"/>
td>
tr>
<tr>
<td class="tdlabel">
<label class="label">
ajax autocompleter:
label>
td>
<td>
<s:url id="dataurl" value="/autocompleter.action"/>
<s:autocompleter theme="ajax" name="start" href="%{dataurl}"
loadontextchange="true" loadminimumcount="1" indicator="indicator"
autocomplete="false" showdownarrow="false"/>
<img id="indicator"
src="${pagecontext.request.contextpath}/images/indicator.gif"
alt="loading" style="display:none"/>
td>
tr>
s:form>
body>
html>
清单9 webcontent/autocompleter.jsp
上述页面包含两个标志，前者使用“simple”模板，所以不具有ajax功能，它的数据将以html方式输出到最终页面里；而后者则使用了“ajax”模板，每当输入框的值发生改变时，它都向url“/autocompleter.action”发送请求，action根据请求中的start参数的值，返回相当的json，在请求完成后页面通过回调函数改变输入框的下拉提示，效果如下图所示：
图2 autocompleter.jsp页面输出
3、
树是是比较常用的数据结构，因为它可以很好地体现真实世界中对象之间的关系。的使用也相对简单，但需要说明的是——struts 2.0.6 ga版本的是有bug的，大家可以点击这个链接了解详细的情况。这个bug主要是在的通过“treecollapsedtopic”、“treeexpandedtopic”和“treeselectedtopic”设定的话题（topic）都没有起作用，上述链接相应给出了解决方法，但我认为该方法太麻烦（需要自己重新编译和打包struts 2），所以下面的例子，我将另辟徯径，请参考以下代码。
<%@ page language="java" contenttype="text/html; charset=utf-8"
pageencoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>struts 2 ajax - treetitle>
<s:head theme="ajax" debug="true"/>
<script type="text/javascript">
function treenodeselected(arg) {
alert(arg.source.title ' selected');
}
dojo.addonload(function() {
var s = dojo.widget.byid('parentid').selector;
dojo.event.connect(s, 'select', 'treenodeselected');
});
script>
head>
<body>
<h2>
tree
h2>
<div style="float:left; margin-right: 50px;">
<s:tree label="parent" id="parentid" theme="ajax"
templatecsspath="/struts/tree.css" showrootgrid="true"
showgrid="true">
<s:treenode theme="ajax" label="child1" id="child1id">
<s:treenode theme="ajax" label="grandchild1" id="grandchild1id"/>
<s:treenode theme="ajax" label="grandchild2" id="grandchild2id"/>
<s:treenode theme="ajax" label="grandchild3" id="grandchild3id"/>
s:treenode>
<s:treenode theme="ajax" label="child2" id="child2id"/>
<s:treenode theme="ajax" label="child3" id="child3id"/>
<s:treenode theme="ajax" label="child4" id="child4id"/>
<s:treenode theme="ajax" label="child5" id="child5id">
<s:treenode theme="ajax" label="gchild1" id="gchild1id"/>
<s:treenode theme="ajax" label="gchild2" id="gchild2id"/>
s:treenode>
s:tree>
div>
body>
html>
清单10 webcontent/tree.jsp
因为dojo的树控件，即使在没有设定“selector”情况下，也会自动生成一个默认的selector，所以只要将其事件绑定到特定的事件处理函数即可。
打开，点击任一树节点，页面如下图所示：
图3 tree.jsp页面输出
总结
我原本打算用一篇文章写完这个“struts 2与ajax”。不过在写的过程中，发现内容越来越多。如果勉强写成一篇，朋友们读起来也会很麻烦，所以我决定分开几部分，本文为第一部分。
另外，之前有的朋友建议我建一个google的讨论组，方便大家讨论问题。我觉得这个提议非常好，一直以来都是“一人写，大家留言”，这种相对单向的方式不免有所欠缺，而且本人所知也有限，开个讨论组大家可以相互讨论，共同进步。
因为struts2已经被创建，所以申请了“”，有兴趣的朋友，欢迎加入。
posted on 2007-06-12 18:31
max 阅读(80899)
评论(96) 所属分类:
struts 2.0系列