【Struts2】Struts2学习(8) Ajax与Json_H5之家 - 中国HTML5教程资源分享第一站

Struts2的Ajax支持

传统Web应用采用一种独占式的请求方法，每个请求对应一个页面，当服务器响应到达客户端时，就需要重新加载页面。因此不可能将页面制作成丰富的页面，这样客户端下载成本太高。

Ajax技术使用异步方式发送用户请求，用户在浏览页面的同时可以发送异步请求，在第一个请求的服务器响应还没完成之前，浏览器可以再次发送请求，页面状态不会停止，用户可以继续浏览页面。

使用stream类型的Result实现Ajax

stream类型的结果可以直接向客户端浏览器生成二进制响应、文本响应等。

例： Ajax登录，用户输入用户名、密码后，以异步方式发送请求，Action直接输出登录结果，无须额外的JSP页面。

LoginAction.java

public class LoginAction implements Action { //封装请求参数的两个属性 private String user; private String pass; //封装输出结果的二进制流 private InputStream inputStream; //user属性的setter和getter方法 public void setUser(String user) { this.user = user; } public String getUser() { return this.user; } //pass属性的setter和getter方法 public void setPass(String pass) { this.pass = pass; } public String getPass() { return this.pass; } public InputStream getResult() { return inputStream; } public String execute() throws Exception { //判断用户名、密码，生成对应的响应 inputStream = user.equals("li") && pass.equals("meng") ? new ByteArrayInputStream("恭喜你，登录成功!" .getBytes("UTF-8")) : new ByteArrayInputStream("对不起，用户名、密码不匹配！" .getBytes("UTF-8")); return SUCCESS; } }

该Action提供了一个返回二进制流的方法getResult()，该方法返回的二进制流会直接输出给浏览者，需要使用stream类型的result来完成。

配置struts.xml

<?xml version="1.0" encoding="GBK"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN" ""> <struts> <constant name="struts.i18n.encoding" value="UTF-8"/> <package name="lee" extends="struts-default"> <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> <action name="*"> <result>/WEB-INF/content/{1}.jsp</result> </action> </package> </struts> 定义一个页面，发送异步请求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>

JSON

JSON全称JavaScript ObjectNotation,即JavaScript对象符号，是一种轻量级的数据交换格式。且与语言无关。

Json有如下两种数据格式

key-value 对组成的数据结构，这种数据结构在不同的语言中有不同的实现。在JavaScript中是一个对象，在Java中是Map结构，在C语言中是struct。

有序集合。这种数据结构在不同语言中，可能有list/vector 数组和序列等实现。

使用Json语法创建对象

早期JavaScript版本
//定义一个函数，作为构造器 function Person(name,sex){ this.name=name; this.sex = sex; } //创建一个Person实例 var p = new Person(‘aaa’,’man’); alert(p.name); 从JavaScript1.2开始，可以这样创建