prototype+json+struts2创建简单的ajax应用

显示页面

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3. <html>
4.   <head>
5.     <title>test</title>
6.     <meta http-equiv="pragma" content="no-cache">
7.     <meta http-equiv="cache-control" content="no-cache">
8.     <meta http-equiv="expires" content="0">    
9.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
10.     <meta http-equiv="description" content="This is my page">
11.     <!--
12.     <link rel="stylesheet" type="text/css" href="styles.css">
13.     -->
14.   </head>
15.     <script type="text/javascript" src="js/common/prototype.js"></script>
16.     <script language="javascript" type="text/javascript">
17.         function getJson()
18.         {
19.              var url = 'JSONExample.action';
20.              var pars = '';
21.              var myAjax = new Ajax.Request(url,{
22.                  method:'get',
23.                  encoding:'UTF-8',
24.                  parameters:pars,
25.                  onComplete:function(json){
26.                      var JSONobj=eval('('+ json.responseText +')');
27.                      var html="" ;
28.                      var menuid="";
29.                      
30.                      html += "<li>" + JSONobj.newName +"</li>";
31.                      
32.                      var ints = JSONobj.ints; 
33.                      for (var i=0; i< ints.length; i++){
34.                         html += "<li>" + ints[i] +"</li>";
35.                      }
36.                      
37.                      var map = JSONobj.map; 
38.                      for(array in map){
39.                         html += "<li>" + array + ":" + map[array] +"</li>";
40.                      }
41.                      
42.                      $("item").innerHTML=html;
43.                  }
44.              });
45.       
46.         }
47. </script>
48.     <body>
49.       <input type="button" name="button" id="button" onclick="getJson()"value="点击测试">
50.       <div id="item"></div>
51.     </body>
52. </html>

struts.xml配置文件

1.     <package name="example"  extends="json-default">  
2.       <action name="JSONExample" class="jSONExample" method="executeJson">  
3.          <result type="json"/>  
4.        </action>  
5.     </package>   

这里使用到了json struts2结合的插件，请自己去下载那个jar包


action

1. package action;
3. import java.util.HashMap;
4. import java.util.Map;
5. import com.googlecode.jsonplugin.annotations.JSON;
6. import com.opensymphony.xwork2.ActionSupport;
8. /**
9.  *  @author 王盛武 <a href="sinlff@163.com"/> 
10.  *  @date Aug 1, 200812:10:35 PM
11.  */
12. public class JSONExample extends ActionSupport {
13.     /**
14.      * 
15.      */
16.     private static final long serialVersionUID = 4588482034890372410L;
17.     // 封装请求参数的三个属性
18.      //format=  例如"yyyy-MM-dd'T'HH:mm:ss"。 
19.     private String field1;
20.     private transient String field2;
21.     
22.     private String field3;
23.     // 封装处理结果的属性
24.     private int[] ints = { 10, 20 };
25.     @SuppressWarnings("unchecked")
26.     private Map map = new HashMap();
27.     private String customName = "custom";
29.     @SuppressWarnings("unchecked")
30.     public String executeJson() {
31.         map.put("name1", "sinlff1");
32.         map.put("name2", "sinlff2");
33.         map.put("name3", "sinlff3");
34.         return SUCCESS;
35.     }
36.     
37.     // 三个请求参数对应的setter和getter方法
38.     @JSON(serialize = false) //format
39.     public String getField1() {
40.         return field1;
41.     }
43.     public void setField1(String field1) {
44.         this.field1 = field1;
45.     }
47.     @JSON(serialize = false)
48.     public String getField2() {
49.         return field2;
50.     }
52.     public void setField2(String field2) {
53.         this.field2 = field2;
54.     }
56.     @JSON(serialize = false) //format
57.     public String getField3() {
58.         return field3;
59.     }
61.     public void setField3(String field3) {
62.         this.field3 = field3;
63.     }
65.     public void setCustomName(String customName) {
66.         this.customName = customName;
67.     }
69.     // 封装处理结果的属性的setter和getter方法
70.     public int[] getInts() {
71.         return ints;
72.     }
74.     public void setInts(int[] ints) {
75.         this.ints = ints;
76.     }
78.     @SuppressWarnings("unchecked")
79.     public Map getMap() {
80.         return map;
81.     }
83.     @SuppressWarnings("unchecked")
84.     public void setMap(Map map) {
85.         this.map = map;
86.     }
88.     // 使用注释语法来改变该属性序列化后的属性名
89.     @JSON(name = "newName")
90.     public String getCustomName() {
91.         return this.customName;
92.     }
94. }