使用stream类型的Result实现Ajax-阿里云开发者社区

使用stream类型的Result实现Ajax

2017-11-14 1231

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

前面介绍过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">  

  
          <!-- 指定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>

提示：通过使用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" 

  
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

  
  <html xmlns="http://www.w3.org/1999/xhtml">  

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