Struts2.1.6?AJAX?常用功能展示

Ethan的博客 2011-05-25

展开全文

action先列出来

<package name="Struts2_AJAX_DEMO" extends="json-default">
  <action name="JsonPlugin" class="test.JsonPluginAction">
   <result type="json" />
  </action>
  <action name="Autocompleter" class="test.AutocompleterAction">
   <result type="json">
    <param name="root">names</param>
   </result>
  </action>
</package>

第一异步获取：

类：JsonPluginAction

package test;

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;
    }
}

2.页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
  <title>JSON Plugin</title>
  <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) { }
            }

            throw new Error("MSXML is not installed on your system.");
        }
    }

    function retrieveBook() {
        if(bXmlHttpSupport) {
            var sUrl = 'JsonPlugin.do';
            var oRequest = new XMLHttpRequest();
            oRequest.onreadystatechange = function() {
                if(oRequest.readyState == 4) {
                    var oBook = eval_r('(' + oRequest.responseText + ')');
                    var bookHolder = document.getElementByIdx_x('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="查看图书" onclick="retrieveBook()" />
  <div id="bookHolder"></div>
</body>
</html>

第二功能：自动补充类GOOGLE

1.package test;

import java.util.ArrayList;
import java.util.List;

public final class Datas {
    public static final 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");
    }
}

2.package test;

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<String[]> names;
    private String start;

    public void 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;
    }
}

3.<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
  <title>Struts 2 AJAX - Autocompleter</title>
  <sx:head />
</head>
<body>
  <h2>
   Autocompleter
  </h2>
  <s:form action="">
   <table width="100%">
    <tr>
     <td width="180">
      NO.1:</td>
      <td width="600">
      <s:textfield label="abc" name="abc"/>
     </td>
     <td> </td>
    </tr>
    <tr>
     <td>No AJAX Autocompleter:
     </td>
     <td>
      <sx:autocompleter name="user" list="@test.Datas@NAMES" cssStyle="width: 200px;"/>
     </td>
     <td> </td>
    </tr>
    <tr>
     <td>
      <label class="label">
       AJAX Autocompleter:
      </label>
     </td>
     <td>
      <s:url id="dataUrl" value="Autocompleter.do" />
      <sx:autocompleter name="start" href="%{dataUrl}"
       loadOnTextChange="true" loadMinimumCount="1"
       indicator="indicator" showDownArrow="false" cssStyle="width: 200px;"/>
      <img id="indicator"
       src="${pageContext.request.contextPath}/images/indicator.gif"
       alt="Loading" style="display: none"/>
     </td>
     <td> </td>
    </tr>
   </table>
  </s:form>
</body>
</html>

第三功能 Tree：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
    <head>
        <title>Struts 2 AJAX - Tree</title>
        <sx:head/>
        <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;">
            <sx:tree label="parent" id="parentId"
                templateCssPath="/struts/tree.css" showRootGrid="true"
                showGrid="true">
                <sx:treenode label="child1" id="child1Id">
                    <sx:treenode label="grandchild1" id="grandchild1Id" />
                    <sx:treenode label="grandchild2" id="grandchild2Id" />
                    <sx:treenode label="grandchild3" id="grandchild3Id" />
                </sx:treenode>
                <sx:treenode label="child2" id="child2Id" />
                <sx:treenode label="child3" id="child3Id" />
                <sx:treenode label="child4" id="child4Id" />
                <sx:treenode label="child5" id="child5Id">
                    <sx:treenode label="gChild1" id="gChild1Id" />
                    <sx:treenode label="gChild2" id="gChild2Id" />
                </sx:treenode>
            </sx:tree>
        </div>
    </body>
</html>