★Struts2中的Ajax实现 <s:a> Ⅱ

实用JSON在Struts2中实现AJax这篇文章是抄袭Max大哥的。呵呵

在当今——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 < String > 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 < String > getComments() {
        return comments;
   }

    public void setComments(List < String > 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 < 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;
   }
}

清单1 src/tutorial/JsonPluginAction.java

以上代码值得注意的是，通过@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”的结果类型，有兴趣的朋友可以打开此文件看看。

发布运行应用程序，在浏览器中键入：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代码如下：

<% @ 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 Plugin </ title >
        < 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);
                } else if (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 Book </ s: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片段，你可以简单地将<s:a />或<s:submit />的“targets”属性设为“bookHolder”即可，详情大家可以参考Struts 2 Showcase。至于返回HTML片段，可以通过Action + Freemaker完成。

 

 

 

 

对于这个var oBook = eval('(' + strBook + ')');
这个方法有点不大理解的地方。他好像是将返回的都有数据都看作一个类来对待。自动创建一个对象。

当我们返回的结果是对象的时候，会出现一个小问题。

例如：我们返回上一篇文章(http://04023129.iteye.com/admin/blogs/269823)中的Article对象的话，

返回的结果是{"article":{"content":"新聞内容4","title":"新聞標題4"}}

得到返回的data

 var returnValue= eval('(' + data + ')');
 alert(returnValue.article.title);

使用 eval('(' + data + ')');的时候dojo他将返回的数据创建成只有一个属性（article）的returnValue类

如果你想得到返回的新闻标题的时候就必须再调用属性article中的title属性。

不知道有没有什么好的解决方法，能直接得到article类