strurs2和ajax的简单整合

codingker

2012-03-26

相信大家对ajax都有所了解吧，废话不多说，直接说功能，上传代码

网页上有个button，浏览者点击button，ajax请求struts2的action，从数据库中取得相应数据，然后将数据封装成一个xml文件的数据流，返回给前台，最后前台创建表格，解析xml文件类型的数据，将数据填充到表格中

html代码

<%@ page language="java" contentType="text/html; charset=gbk"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
	<head>
		<title>ajax and struts2</title>
		<SCRIPT type="text/javascript">
			var count = 0;		//计数器，防止用户多次点击button
			var xmlHttpReq;		//XMLHttpRequest 对象
			function showHistory(name){			//显示历史记录的函数
				if(count > 0) {		//多次点击无效
					return
				}
				if(window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  					xmlHttpReq = new XMLHttpRequest()
  				}
  				else {// code for IE6, IE5
  					xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP")
  				}
				if(xmlHttpReq != null) {
		  			xmlHttpReq.onreadystatechange = onResponse	//存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数
		  			xmlHttpReq.open("POST","Record_ShowRentHistory?name="+name+"",true)	//使用post方式请求并传递name
		  			xmlHttpReq.send()	//	将请求发送到服务器
  				}
			}
			
			function onResponse() {		
		  		if(xmlHttpReq.readyState == 4) {	//请求已完成，且响应已就绪
		  			if(xmlHttpReq.status == 200) {	//200: "OK";404: 未找到页面
		  				x = xmlHttpReq.responseXML.getElementsByTagName("column");	//得到column标签
		  				if(x.length > 0) {		//xml文件含有数据
		  					var tableshow = document.getElementById('historytable');
		  					tableshow.style.display=""	//原来设置为不显示table，有数据则显示table
		  					for(i=0;i<x.length;i++) {	//循环读取xml文件中的数据
				  				try{
			  						var tablex =document.getElementById('historytable').insertRow(i+1)	//table增加一行
			  						tablex.align="center"	//数据居中显示
			  						var insertName = tablex.insertCell(0)	//第一列，依次类推
			  						var insertId = tablex.insertCell(1)
			  						var insertBikeId = tablex.insertCell(2)
			  						var insertStartTime= tablex.insertCell(3)
			  						var insertEndTime= tablex.insertCell(4)
			  						var insertAllTime = tablex.insertCell(5)
			  						var insertRentPrice = tablex.insertCell(6)
			  						var insertAllMoney = tablex.insertCell(7)
			  						x0=x[i].getElementsByTagName("name");	//将数据依次填充到表格中
			  						txt = x0[0].firstChild.nodeValue;
			  						insertName.innerHTML=txt
			  						x1=x[i].getElementsByTagName("id");
			  						txt = x1[0].firstChild.nodeValue;
			  						insertId.innerHTML=txt
			  						x2=x[i].getElementsByTagName("bikeID");
			  						txt = x2[0].firstChild.nodeValue;
			  						insertBikeId.innerHTML=txt
			  						x3=x[i].getElementsByTagName("startTime");
			  						txt = x3[0].firstChild.nodeValue;
			  						insertStartTime.innerHTML=txt
			  						x4=x[i].getElementsByTagName("endTime");
			  						txt = x4[0].firstChild.nodeValue;
			  						insertEndTime.innerHTML=txt
			  						x5=x[i].getElementsByTagName("allTime");
			  						txt = x5[0].firstChild.nodeValue;
			  						insertAllTime.innerHTML=txt
			  						x6=x[i].getElementsByTagName("rentPrice");
			  						txt = x6[0].firstChild.nodeValue;
			  						insertRentPrice.innerHTML=txt
			  						x7=x[i].getElementsByTagName("allMoney");
			  						txt = x7[0].firstChild.nodeValue;
			  						insertAllMoney.innerHTML=txt
			  					} 
			  					catch(er) {
			  						alert('error')
			  					}
			  					count++;
		  					}
			  			}
		  			}
		  		}
		  	}
		</SCRIPT>
	</head>
	<body>
		<button onclick="showHistory('<s:property value="name"/>')">
			显示历史租车记录
		</button>
		<table align="center" border="5" id="historytable"
			style="display: none">
			<tr align="center">
				<td>
					用户名
				</td>
				<td>
					租赁编号
				</td>
				<td>
					自行车编号
				</td>
				<td>
					租车起始时间
				</td>
				<td>
					租车结束时间
				</td>
				<td>
					时间差(小时)
				</td>
				<td>
					租赁价格(X元/每小时)
				</td>
				<td>
					消费金额
				</td>
			</tr>
		</table>
		</center>
	</body>
</html>

struts2中的action

/**
	 * 处理利用ajax的异步请求方法
	 */
	public String executeShowRentHistory() throws Exception{
		HttpServletResponse hsr =  ServletActionContext.getResponse();
		hsr.setContentType("text/xml;charset=gbk");
		StringBuffer sb = new StringBuffer();
		sb.append("<?xml version=\"1.0\"?>");	//添加xml文件头
		sb.append("<history>");		//根标签
		records = recordManager.getHistoryData(name);	//调用service层，返回一个list
		for(Record record: records) {			//封装成xml文件
			sb.append("<column>");
			sb.append("<name>"+name+"</name>");
			sb.append("<id>"+record.getId()+"</id>");
			sb.append("<bikeID>"+record.getBike().getId()+"</bikeID>");
			sb.append("<startTime>"+record.getStartTime()+"</startTime>");
			sb.append("<endTime>"+record.getEndTime()+"</endTime>");
			double allTime = Calculate.calculateTime(record.getStartTime(), record.getEndTime());	//计算时间差（结束时间减去起始时间）
			sb.append("<allTime>"+allTime+"</allTime>");
			sb.append("<rentPrice>"+record.getRentPrice()+"</rentPrice>");
			sb.append("<allMoney>"+record.getRentPrice()*allTime+"</allMoney>");
			sb.append("</column>");
		}
		sb.append("</history>");
		try {
			hsr.getWriter().write(sb.toString());	//转换成字符串给response返回
		} catch (Exception e) {
			e.printStackTrace();
		}
		finally {
			hsr.getWriter().close();
		}
		return null;	//不需要返回任何字符串给result
	}

还有一些get和set方法，以及service层和dao层未给出

算是一个简单的struts2和ajax的整合吧，后台是ssh2+mysql，初学者，请指教

ajax xml数据库 xml语言 xml解析 html表格 html代码按钮