使用stream类型的Result实现Ajax_H5之家 - 中国HTML5教程资源分享第一站

[摘要]本文主要是对使用stream类型的Result实现Ajax的讲解，希望对大家学习使用stream类型的Result实现Ajax有所帮助。

前面介绍过Struts 2支持一种stream类型的Result,这种类型的Result可以直接向客户端浏览器生成二进制响应、文本响应等。那么我们就可让Struts 2的Action来直接生成文本响应，接下来在客户端页面动态加载该响应即可。

    例如下面做一个非常简单的Ajax登录示例，浏览者输入用户名、密码之后，我们让他以异步方式来提交请求，而Struts 2的Action则直接输出登录结果--无须使用额外的JSP页面。下面是本示例的Action类代码。

    程序清单：codes\04\4.6\streamAjax\WEB-INF\src\org\crazyit\app\action\LoginAction.java

    public class LoginAction

    implements Action

    {

    //封装请求参数的两个属性

    private String user;

    private String pass;

    //封装输出结果的二进制流

    private InputStream inputStream;

    //省略user属性的setter和getter方法

    …

    //省略pass属性的setter和getter方法

    …

    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与普通登录Action大致相同，同样提供了user、pass两个属性来封装用户的请求参数，并为这两个属性提供setter和getter方法。但这个Action与普通Action也略有差别，它提供了一个返回二进制流的方法：getResult（）--如上面的Action类中粗体字代码所示。

    getResult（）方法的返回的二进制流将会直接输出给浏览者--这将会使用stream类型的Result来完成，而上面的execute方法将会根据浏览者输入的user、pass请求参数来决定生成怎样的响应。

    在struts.xml文件中配置该Action,配置片段如下。

    程序清单：codes\04\4.6\streamAjax\WEB-INF\src\struts.xml

    <action name=“loginPro” class=“org.crazyit.app.action.LoginAction”>

    <result name=“success” type=“stream”>

    

    <param name=“contentType”>text/html</param>

    

    <param name=“inputName”>result</param>

    </result>

    

    <result name=“login”>/WEB-INF/content/login.jsp</result>

    </action>

    提示：通过使用stream类型的Result,Strut 2可以无需JSP视图页面，直接在Action向浏览者生成指定的响应。

    接下来只要定义一个登录页面，该页面向上面的loginPro Action发送异步请求，并动态加载该Action送回来的响应即可。

    为了简单起见，我们此处不会去做创建XMLHttpRequest对象、发送异步请求这些烦琐的步骤，此处将直接借助于jQuery这个Ajax库来发送异步请求。页面代码如下。

    程序清单：codes\04\4.6\streamAjax\WEB-INF\content\login.jsp

    <%@ page contentType=“text/html; charset=GBK” language=“java” errorPage=“” %>

    <%@ taglib prefix=“s” uri=“/struts-tags” %>

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

    “”>

    <html xmlns=“”>

    <head>

    <title>使用JSON插件</title>

    <script src=“${pageContext.request.contextPath}/jquery-1.4.4.min.js”

    type=“text/javascript”>

    </script>

    </head>

    <body>

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

    </body>

    </html>

    上面的程序中粗体字代码正是通过jQuery发送异步请求的代码。在浏览器中浏览该页面，并输入合适的用户名、密码，然后登录系统，将可以看到如图4.34所示结果。

    除此之外，Struts 2.2还提供了一个JSON插件，通过该插件能更简单地完成Ajax开发，下面主要以JSON插件为例来介绍Struts 2的Ajax支持。

    提示：jQuery是一个非常优秀的、轻量级Ajax函数库，它不仅提供了大量方便的工具函数，而且对Ajax的支持也是既简单、又强大。如果读者希望获得更多关于jQuery的知识，请参考疯狂Java体系的《疯狂Ajax讲义》。