使用XMLHttpRequest结合struts2实现Ajax异步调用的例子+json插件

使用XMLHttpRequest结合struts2实现Ajax异步调用的例子

分类： 程序开发 EXTJS Ext 2012-02-28 19:31  54人阅读  评论(0)  收藏  举报

      自己在网上找资料的时候，确实很纠结呢，东拼西凑的，虽然这个写的东西很简单，但是却花费我不少功夫，为了帮助后面的同学，果断贴代码，希望对大家有用！

      功能描述：使用XMLHttpRequest实现异步调用，从而实现select级联下拉菜单的效果。

      项目总贴截图如下（主要是给大家看看引入的jar包）：

Action类的代码：

 

[java]  view plain copy

1. package com.action;  
2.   
3. import java.util.ArrayList;  
4. import java.util.Arrays;  
5. import java.util.HashMap;  
6. import java.util.List;  
7. import java.util.Map;  
8. import java.util.Set;  
9.   
10. import org.apache.struts2.ServletActionContext;  
11.   
12. import com.opensymphony.xwork2.ActionSupport;  
13.   
14. public class AjaxTest1 extends ActionSupport {  
15.       
16.     private Map<String,List<String>> datas;  
17.       
18.     private List<String> provinces;  
19.       
20.     private List<String> citys;  
21.       
22.     public AjaxTest1(){  
23.         datas = new HashMap<String,List<String>>();  
24.           
25.         String[] c1 = new String[]{"武汉","襄樊","荆州","宜昌"};  
26.         String[] c2 = new String[]{"海淀","昌平","朝阳"};  
27.           
28.         datas.put("湖北", Arrays.asList(c1));  
29.         datas.put("北京", Arrays.asList(c2));  
30.     }  
31.   
32.   
33.       
34.     public List<String> getProvinces() {  
35.         return provinces;  
36.     }  
37.   
38.   
39.   
40.     public void setProvinces(List<String> provinces) {  
41.         this.provinces = provinces;  
42.     }  
43.   
44.   
45.   
46.     public List<String> getCitys() {  
47.         return citys;  
48.     }  
49.   
50.   
51.   
52.     public void setCitys(List<String> citys) {  
53.         this.citys = citys;  
54.     }  
55.   
56.   
57.   
58.     public String loadProvinces(){  
59.         List<String> list = new ArrayList<String>();  
60.         Set<String> set = datas.keySet();  
61.         for(String s:set){  
62.             list.add(s);  
63.         }  
64.           
65.         System.out.println(list);  
66.           
67.         this.setProvinces(list);  
68.           
69.           
70.         System.out.println("provinces:"+provinces);  
71.           
72.         return SUCCESS;  
73.     }  
74.       
75.     public String loadCitys(){  
76.         String province = ServletActionContext.getRequest().getParameter("province");  
77.         //this.setCitys(datas.get("湖北"));  
78.           
79.         System.out.println("返回的province的值是："+province);  
80.           
81.         List<String> list = new ArrayList<String>();  
82.         this.setCitys(datas.get(province));  
83.         return SUCCESS;  
84.     }  
85.       
86. }  

struts.xml文件：

[html]  view plain copy

1. <?xml version="1.0" encoding="UTF-8" ?>  
2. <!DOCTYPE struts PUBLIC  
3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
4.     "http://struts.apache.org/dtds/struts-2.0.dtd">  
5.   
6. <struts>  
7.   
8.    <constant name="struts.enable.DynamicMethodInvocation" value="false" />  
9.     <constant name="struts.devMode" value="true" />  
10.   
11.    <!--  <package name="default" namespace="/" extends="struts-default">  
12.   
13.         <default-action-ref name="index" />  
14.   
15.         <global-results>  
16.             <result name="error">/error.jsp</result>  
17.         </global-results>  
18.   
19.         <global-exception-mappings>  
20.             <exception-mapping exception="java.lang.Exception" result="error"/>  
21.         </global-exception-mappings>  
22.   
23.         <action name="index">  
24.             <result type="redirectAction">  
25.                 <param name="actionName">HelloWorld</param>  
26.                 <param name="namespace">/example</param>  
27.             </result>  
28.         </action>  
29.     </package>  
30.   
31.    <include file="example.xml"/>  
32.     Add packages here -->  
33.        
34.      <package name="test1" namespace="/" extends="json-default">  
35.         <action name="loadprovinces" class="com.action.AjaxTest1" method="loadProvinces">  
36.             <result name="success" type="json">  
37.                 <!--<param name="includeProperties">provinces</param>     
38.             -->  
39.             <param name="excludeProperties">citys</param>  
40.             </result>  
41.         </action>  
42.           
43.         <action name="loadcitys" class="com.action.AjaxTest1" method="loadCitys">  
44.             <result type="json">  
45.                 <param name="excludeProperties">provinces</param>     
46.             </result>  
47.         </action>  
48.      </package>  
49.   
50. </struts>  

index.jsp页面文件：

 

 

[html]  view plain copy

1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
2. <%@taglib prefix="s" uri="/struts-tags" %>  
3. <%  
4. String path = request.getContextPath();  
5. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
6. %>  
7.   
8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
9. <html>  
10.     <head>  
11.         <base href="<%=basePath%>">  
12.   
13.         <title>My JSP 'index.jsp' starting page</title>  
14.         <meta http-equiv="pragma" content="no-cache">  
15.         <meta http-equiv="cache-control" content="no-cache">  
16.         <meta http-equiv="expires" content="0">  
17.         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
18.         <meta http-equiv="description" content="This is my page">  
19.         <!-- 
20.     <link rel="stylesheet" type="text/css" href="styles.css"> 
21.     -->  
22.   
23.         <script type="text/javascript">  
24.       
25.             //获取XMLHttpRequest对象的方法  
26.             function createXMLHttpRequest(){  
27.                   
28.                 try{  
29.                     xhr = new XMLHttpRequest();  
30.                     }catch(e){  
31.                         var MSXML =  
32.                         ['MSXML2.XMLHTTP.6.00','MSXML2.XMLHTTP.5.0',  
33.                         'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',  
34.                         'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];  
35.                         for(var n=0;n<MSXML.length;n++){  
36.                             try{  
37.                                 xhr = new ActiveXObject(MSXML[n]);  
38.                                 break;  
39.                             }catch(e){}  
40.                         }  
41.                     }  
42.                     return xhr;  
43.             }  
44.             var xhr;  
45.             //xhr= createXMLHttpRequest();  
46.               
47.             function loadProvinces(){  
48.                 xhr = createXMLHttpRequest();  
49.                   
50.                 xhr.open("post","loadprovinces.action",true);  
51.                 //xhr.open("post","ajaxtest1.jsp",true);  
52.                   
53.                 xhr.setRequestHeader("Context-Type","application/x-www-form-urlencoded");  
54.                   
55.                 xhr.send(null);  
56.                   
57.                 xhr.onreadystatechange = function(){  
58.                     if(xhr.readyState == 4){  
59.                             if(xhr.status == 200 || xhr.status == 304){  
60.                                 var provinceString = eval("("+xhr.responseText+")");  
61.                                 var pro = provinceString.provinces;  
62.                                 //alert("provinceString[0]:"+provinceString.provinces);  
63.                                 var s = "<option>-请选择省份-</option>";  
64.                                 for(var i=0;i<pro.length;i++){  
65.                                     s += "<option>"+pro[i]+"</option>";  
66.                                 }  
67.                                 document.getElementById("province").innerHTML = s;  
68.                                     //alert(xhr.responseText);  
69.                                 }  
70.                         }  
71.                     }  
72.             }  
73.           
74.             function loadCitys(){  
75.                 xhr = createXMLHttpRequest();  
76.                   
77.                 xhr.open("post","loadcitys.action",true);  
78.                   
79.                 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
80.                   
81.                 //alert(document.getElementById("province").value);  
82.                 xhr.send("province="+document.getElementById("province").value);  
83.                   
84.                 xhr.onreadystatechange = function(){  
85.                     if(xhr.readyState == 4){  
86.                             if(xhr.status == 200 || xhr.status == 304){  
87.                                 var cityString = eval("("+xhr.responseText+")");  
88.                                 var city = cityString.citys;  
89.                                 var s = "<option>-请选择城市-</option>";  
90.                                 for(var i=0;i<city.length;i++){  
91.                                     s += "<option>"+city[i]+"</option>";  
92.                                 }  
93.                                 document.getElementById("city").innerHTML = s;  
94.                                 }  
95.                         }  
96.                     }  
97.             }  
98.             window.onload =  loadProvinces();  
99.               
100.         function showInfo(){  
101.             var info = "您所选择的省份是：<h3>"+document.getElementById("province").value+"</h3>   选择的城市是：<h3>"+document.getElementById("city").value+"</h3>";  
102.             //alert(info);  
103.             document.getElementById("info").innerHTML = info;  
104.         }  
105.     </script>  
106.   
107.     </head>  
108.   
109.     <body>  
110.         请选择省份：  
111.         <select id="province" onchange="loadCitys(this.value)"></select>  
112.         请选择城市：  
113.         <select id="city" onchange="showInfo()"></select>  
114.         <div id="info"></div>  
115.         <s:debug></s:debug>  
116.     </body>  
117. </html>  

二、使用JSON插件开发Ajax

JSON插件提供了一种名为json的ResultType，一旦为某个Action指定了一个类型为json的Result，则该Result无需映射到任何视图资源。因为JSON插件会负责将Action里的状态信息序列化成JSON格式的数据，并将该数据返回给客户端页面的JavaScript。

 

　　简单地说，JSON插件允许我们在JavaScript中异步调用Action，而且Action不再需要使用视图资源来显示该Action里的状态信息，而是由JSON插件负责将Action里的状态信息返回给调用页面——通过这种方式，就可以完成Ajax交互。

 

　　Struts2提供了一种可插拔方式来管理插件，安装Struts2的JSON插件与安装普通插件并没有太大的区别，一样只需要将Struts2插件的JAR文件复制到Web应用的WEB-INF/lib路径下即可。　

 

（1）将json-plugin.jar文件复制到Web应用的WEB-INF路径下，即可完成JSON插件的安装。

 

（2）把JSON.js、prototype-1.4.0.js复制到js文件夹下

（3）完成JSP页面

Xml代码  

1. <%@ page language="java" pageEncoding="GBK"%>  
2. <%@ taglib prefix="s" uri="/struts-tags"%>  
3. <html>  
4.     <head>  
5.         <title><s:text name="user.register" /></title>  
6.         <!--导入JS内库-->       
7.         <script src="js/prototype-1.4.0.js" type="text/javascript"></script>  
8.         <script src="js/json.js" type="text/javascript"></script>  
9.         <!--自定义Ajax事件-->    
10.         <script language="JavaScript">  
11.             function validateName()  
12.             {  
13.                 //请求的地址  
14.                 var url = 'validateName.action';  
15.                 var params = Form.Element.serialize('user.uid');  
16.                 //创建Ajax.Request对象，对应于发送请求  
17.                 var myAjax = new Ajax.Request(  
18.                 url,  
19.                 {  
20.                     //请求方式：POST  
21.                     method:'post',  
22.                     //请求参数  
23.                     parameters:params,  
24.                     //指定回调函数  
25.                     onComplete: processResponse,  
26.                     //是否异步发送请求  
27.                     asynchronous:true  
28.                 });  
29.             }  
30.             function processResponse(request)  
31.             {                 
32.                 var action = request.responseText.parseJSON();  
33.                 $("tip").innerHTML = action.tip;  
34.                 $("tip2").innerHTML='欢迎您，'+action.user.uid;  
35.             }     
36.         </script>  
37.     </head>  
38.     <body>  
39.     <span id="tip" style="color:red;font-weight:bold"></span>  
40.         <s:form action="Register" validate="true">  
41.             <s:textfield name="user.uid" key="user.uid" onblur="validateName();"/>  
42.             <s:password name="user.upwd" key="user.upwd" />  
43.             <s:submit key="submit" />  
44.         </s:form>  
45.     </body>  
46. </html>  

 

（4）完成Action

代码略。

 

（5）配置Action

Xml代码  

1. <package name="a" extends="json-default" namespace="">   
2.  <action name="validateName" class="demo.ValidateName">  
3.       <result type="json"/>  
4. </action>   

 

（6）总结

使用JSON插件开发Ajax非常方便。