【Java EE （Struts2 + Spring + Hibernate）开发】：Struts2（二）之【Ajax 支持】

【Java EE （Struts2 + Spring + Hibernate）开发】：Struts2（二）之【Ajax 支持】
本文地址：http://blog.csdn.net/shanglianlm/article/details/50096121

1 使用 stream 类型的 Result 实现 Ajax

public class LoginAction
    implements Action
{
    //封装请求参数的两个属性
    private String user;
    private String pass;
    //封装输出结果的二进制流
    private InputStream inputStream;
    ... ...
    public InputStream getResult()
    {
        return inputStream;
    }

    public String execute() 
        throws Exception 
    {
        //判断用户名、密码，生成对应的响应
        inputStream = user.equals("crazyit.org") && pass.equals("leegang")
            ? new ByteArrayInputStream("恭喜你，登录成功!"
                .getBytes("UTF-8"))
            : new ByteArrayInputStream("对不起，用户名、密码不匹配！"
                .getBytes("UTF-8"));
        return SUCCESS;
    }
}

<action name="loginPro" class="org.crazyit.app.action.LoginAction">
    <result name="success" type="stream">
        <!-- 指定下载文件的文件类型 -->
        <param name="contentType">text/html</param>
        <!-- 指定由getResult()方法返回输出结果的InputStream -->
        <param name="inputName">result</param>
    </result>
    <!-- 定义一个名为login的结果 -->
     <result name="login">/WEB-INF/content/login.jsp</result>
</action>

<s:form id="loginForm">
    <s:textfield name="user" label="用户名"/>
    <s:textfield name="pass" label="密码"/>
    <tr><td colspan="2">
    <input id="loginBn" type="button" value="提交"/>
    </td></tr>
</s:form>
<div id="show" style="display:none;">
</div>
<script type="text/javascript">
    //为id为loginBn的按钮绑定事件处理函数
    $("#loginBn").click(function()
    {
        //指定向loginPro发送请求，以id为loginForm表单里各表单控件作为请求参数
        $.get("loginPro" , $("#loginForm").serializeArray() , 
            //指定回调函数
            function(data , statusText)
            {
                $("#show").height(80)
                    .width(300)
                    .css("border" , "1px solid black")
                    .css("background-color" , "#efef99")
                    .css("color" , "#ff0000")
                    .css("padding" , "20px")
                    .empty();
                $("#show").append("登录结果：" + data + "<br />");
                $("#show").show(2000);
            },
            //指定服务器响应为html
            "html");
    });
</script>

2 JSON 的基础知识

JSON 主要有两种数据结构：

2-1 使用 JSON 语法创建对象

object = {
  propertyName1:propertyValue1,
  propertyName2:propertyValue2,
  ...
}

例：

person = {
  name:'yeeku',
  sex:'male',
  // 使用 JSON 语法为其指定一个属性
  son:{
      name:'nono',
      grade:1
  }
  // 使用 JSON 语法为 person 直接分配一个方法
  info:function(){
    document.writeln("姓名：" + this.name + "性别：" + this.sex);
  }
}

2-2 使用 JSON 语法创建数组

arr = [value1, value2, ... ]

例如：

person = {
   name:'yeeku',
   gender:'male',
   age:29
}

写成 XML 格式

<person>
  <name>yeeku</name>
  <gender>male</gender>
  <age>29</age>
</person>

明显 JSON 比 XML 更简洁。

3 实现 Action 逻辑

假设输入页面有三个表单域，对应三个请求参数，因此应该使用 Action 类封装这三个请求参数（field1, field2, field3）。

public class JSONExample
{
    //模拟处理结果的属性
    private int[] ints = {10, 20};
    private Map<String , String> map
        = new HashMap<String , String>();
    private String customName = "顾客";
    //封装请求参数的三个属性
    private String field1;
    //'transient'修饰的属性不会被序列化
    private transient String field2;
    //没有setter和getter方法的字段不会被序列化
    private String field3;

    public String execute()
    {
        map.put("name", "疯狂Java讲义");
        return Action.SUCCESS;
    }

    //使用注释语法来改变该属性序列化后的属性名
    @JSON(name="newName")
    public Map getMap()
    {
        return this.map;
    }

    //customName属性的setter和getter方法
    public void setCustomName(String customName)
    {
        this.customName = customName;
    }
    public String getCustomName()
    {
        return this.customName;
    }
    ... ...
}

4 JSON 插件与 json 类型的 Result

<struts>
    <constant name="struts.i18n.encoding" value="UTF-8"/>
    <package name="example"  extends="json-default">
        <action name="JSONExample" class="org.crazyit.app.action.JSONExample">
            <!-- 配置类型的json的Result -->
            <result type="json">
                <!-- 为该Result指定参数 -->
                <param name="noCache">true</param>
                <param name="contentType">text/html</param>
                <!-- 设置只序列Action的map属性 -->
                <!--  param name="root">map</param -->
            </result>
        </action>
        <action name="*">
            <result>/WEB-INF/content/{1}.jsp</result>
        </action>
    </package>
</struts>

5 实现 JSP 页面

<head>
    <title>使用JSON插件</title>
    <script src="${pageContext.request.contextPath}/prototype-1.6.1.js" 
    type="text/javascript">
    </script>
    <script type="text/javascript">
        function gotClick()
        {
            //请求的地址
            var url = 'JSONExample.action';
            //将favorite表单域的值转换为请求参数
            var params = Form.serialize('form1');
            //创建Ajax.Request对象，对应于发送请求
            var myAjax = new Ajax.Request(
            url,
            {
                //请求方式：POST
                method:'post',
                //请求参数
                parameters:params,
                //指定回调函数
                onComplete: processResponse,
                //是否异步发送请求
                asynchronous:true
            });
        }
        function processResponse(request)
        {
            //使用JSON对象将服务器响应解析成JSON对象
            var res = request.responseText.evalJSON();
            alert(res);
            //遍历JSON对象的每个属性
            for(var propName in res)
            {
                $("show").innerHTML += propName + " --> " 
                    + res[propName] + "<br/>";
            }       
        }   
    </script>
</head>
<body>
<s:form id="form1">
    <s:textfield name="field1" label="Field 1"/>
    <s:textfield name="field2" label="Field 2"/>
    <s:textfield name="field3" label="Field 3"/>
    <tr><td colspan="2">
    <input type="button" value="提交" onclick="gotClick();"/>
    </td></tr>
</s:form>
<div id="show">
</div>
</body>