struts2.0 + ajax + xml (附源码)
程序更新:1、添加了对页面显示数据量的控制。
2、添加了删除数据后,动态刷新表数据功能。
源码下载: test.rar
更新文件:1、index.jsp
2、UserAction.java
注意事项:1、由于加包后文件太大,源码中没有struts2.0 相关jar包。
2、该程序没有用到数据库,加入jar包后直接在web容器上运行即可。
3、如果需要完整的源码,请留言你的邮箱,或者联系QQ:303225497。
更新代码:
index.jsp
<%
@ page language="java" pageEncoding="UTF-8"
%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
< head >
< title > test javascript </ title >
</ head >
< script defer ="defer" >
//XMLHTTP对象
var xmlHttp;
//删除数据所在的行id
var deleteRowId;
/**//**
* 发送请求、调用回调方法
*
* @param url: 请求的URL
* afterMothod:请求返回时所调用的方法名称(回调方法)
*
*/
function showHint(url,afterMothod) {
try{
xmlHttp = GetXmlHttpObject(afterMothod);
xmlHttp.open("GET",url,false);
xmlHttp.send(null);
}catch(e){
alert(e);
}
}
/**//**
* 根据浏览器创建XmlHttp对象
*
* @param handler:请求返回时所调用的方法名称(回调方法)
*
*/
function GetXmlHttpObject(handler) {
var objXmlHttp = null;
if (navigator.userAgent.indexOf("Opera") >= 0) {
alert("This example doesn't work in Opera");
return;
}
if (navigator.userAgent.indexOf("MSIE") >= 0) {
var strName = "Msxml2.XMLHTTP";
if (navigator.appVersion.indexOf("MSIE 5.5") >= 0) {
strName = "Microsoft.XMLHTTP";
}
try {
objXmlHttp = new ActiveXObject(strName);
objXmlHttp.onreadystatechange = handler;
return objXmlHttp;
}
catch (e) {
alert("Error. Scripting for ActiveX might be disabled");
return;
}
}
if (navigator.userAgent.indexOf("Mozilla") >= 0) {
objXmlHttp = new XMLHttpRequest();
objXmlHttp.onload = handler;
objXmlHttp.onerror = handler;
return objXmlHttp;
}
}
/**//**
* 请求返回是调用的回调方法
* 服务器段返回 user 信息以xml形式发送到客户断
* 解析 xml 数据,把数据展现给用户
*
*/
function flush() {
try{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
//得到返回过来的XML对象,进行数据处理
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(xmlHttp.responseText)
//返回错误代码,适合用于测试。
//var error = xmlDoc.parseError.errorCode;
//alert(error?xmlDoc.parseError.reason:"XML格式正确");
//解析XML数据,将数据刷新到userTable中
var users=xmlDoc.getElementsByTagName("user");
//插入数据前,先清空数据
clearTable(userTable);
for(var i=0;i<users.length;i++){
//插入行
var userRow=userTable.insertRow();
//得到行标示
var rowId=userRow.rowIndex;
//取到一个user对象
var user=users[i];
//插入序号列
var userNum=userRow.insertCell();
userNum.innerHTML = "<font size=4 color=5adf83><b>"+(i+1)+"</b></font>";
//插入userid列
var userId=userRow.insertCell();
//显示userid
userId.innerHTML = user.getAttribute("userId");
var userName=userRow.insertCell();
userName.innerHTML=user.getAttribute("userName");
var userTel=userRow.insertCell();
userTel.innerHTML=user.getAttribute("userTel");
var userOp=userRow.insertCell();
//生成删除user的url
var deleteUserURl="user!delete.action?userNumber="+getPageUserNumber()+"&user.userId="+user.getAttribute("userId");
userOp.innerHTML="<a href=javascript:showHint('"+deleteUserURl+"',drop);>删除</a>";
}
}
}catch(e){
alert(e.description);
}
}
/**//**
* 请求返回是调用的回调方法
* 删除 user对象 服务器段返回删除后的操作信息和 user 列表数据
* 客户端将信息和数据展现给用户
*
*/
function drop(){
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(xmlHttp.responseText);
var msg=xmlDoc.getElementsByTagName("msg")[0];
if(msg.getAttribute("isSuccess")=="false"){
alert(msg.getAttribute("msgString"));
}else{
alert(msg.getAttribute("msgString"));
flush();//删除成功后,刷新数据。
}
}
}
/**//**
* 清空数据表的数据
*
* @param opTable:所要清空的表对象
*
*/
function clearTable(opTable){
var size=opTable.rows.length;
for(var i=2;i<size;i++){
opTable.deleteRow(2);
}
}
/**//**
* 得到一页显示数据的个数
*
*/
function getPageUserNumber(){
return size.value;
}
/**//**
* 动态的根据用户选择的显示数进行动态返回刷新操作的URL
*
*/
function getFlushUserURl(){
return "user!list.action"+"?userNumber="+getPageUserNumber();
}
</ script >
< body >
< center >
< h3 >
用户列表
</ h3 >
< br >
< table id ="userTable" title ="用户列表" width ="60%" >
< tbody align ="center" >
< tr bgcolor ="#54821f" >
< th width ="5%" >
序号
</ th >
< th width ="15%" >
用户ID
</ th >
< th width ="15%" >
姓名
</ th >
< th width ="15%" >
电话
</ th >
< th width ="5%" >
操作
</ th >
< tr >
</ tbody >
</ table >
< br >
< br >
< br >
< button onclick ="showHint(getFlushUserURl(),flush);" >
刷新
</ button >
< font size ="2" color ="blue" >< b > 显示用户数: </ b ></ font >
< select id ="size" name ="userSize" >
< option value ="3" selected > 3 </ option >
< option value ="5" > 5 </ option >
< option value ="10" > 10 </ option >
< option value ="15" > 15 </ option >
< option value ="20" > 20 </ option >
</ select >
</ center >
</ body >
</ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
< head >
< title > test javascript </ title >
</ head >
< script defer ="defer" >
//XMLHTTP对象
var xmlHttp;
//删除数据所在的行id
var deleteRowId;
/**//**
* 发送请求、调用回调方法
*
* @param url: 请求的URL
* afterMothod:请求返回时所调用的方法名称(回调方法)
*
*/
function showHint(url,afterMothod) {
try{
xmlHttp = GetXmlHttpObject(afterMothod);
xmlHttp.open("GET",url,false);
xmlHttp.send(null);
}catch(e){
alert(e);
}
}
/**//**
* 根据浏览器创建XmlHttp对象
*
* @param handler:请求返回时所调用的方法名称(回调方法)
*
*/
function GetXmlHttpObject(handler) {
var objXmlHttp = null;
if (navigator.userAgent.indexOf("Opera") >= 0) {
alert("This example doesn't work in Opera");
return;
}
if (navigator.userAgent.indexOf("MSIE") >= 0) {
var strName = "Msxml2.XMLHTTP";
if (navigator.appVersion.indexOf("MSIE 5.5") >= 0) {
strName = "Microsoft.XMLHTTP";
}
try {
objXmlHttp = new ActiveXObject(strName);
objXmlHttp.onreadystatechange = handler;
return objXmlHttp;
}
catch (e) {
alert("Error. Scripting for ActiveX might be disabled");
return;
}
}
if (navigator.userAgent.indexOf("Mozilla") >= 0) {
objXmlHttp = new XMLHttpRequest();
objXmlHttp.onload = handler;
objXmlHttp.onerror = handler;
return objXmlHttp;
}
}
/**//**
* 请求返回是调用的回调方法
* 服务器段返回 user 信息以xml形式发送到客户断
* 解析 xml 数据,把数据展现给用户
*
*/
function flush() {
try{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
//得到返回过来的XML对象,进行数据处理
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(xmlHttp.responseText)
//返回错误代码,适合用于测试。
//var error = xmlDoc.parseError.errorCode;
//alert(error?xmlDoc.parseError.reason:"XML格式正确");
//解析XML数据,将数据刷新到userTable中
var users=xmlDoc.getElementsByTagName("user");
//插入数据前,先清空数据
clearTable(userTable);
for(var i=0;i<users.length;i++){
//插入行
var userRow=userTable.insertRow();
//得到行标示
var rowId=userRow.rowIndex;
//取到一个user对象
var user=users[i];
//插入序号列
var userNum=userRow.insertCell();
userNum.innerHTML = "<font size=4 color=5adf83><b>"+(i+1)+"</b></font>";
//插入userid列
var userId=userRow.insertCell();
//显示userid
userId.innerHTML = user.getAttribute("userId");
var userName=userRow.insertCell();
userName.innerHTML=user.getAttribute("userName");
var userTel=userRow.insertCell();
userTel.innerHTML=user.getAttribute("userTel");
var userOp=userRow.insertCell();
//生成删除user的url
var deleteUserURl="user!delete.action?userNumber="+getPageUserNumber()+"&user.userId="+user.getAttribute("userId");
userOp.innerHTML="<a href=javascript:showHint('"+deleteUserURl+"',drop);>删除</a>";
}
}
}catch(e){
alert(e.description);
}
}
/**//**
* 请求返回是调用的回调方法
* 删除 user对象 服务器段返回删除后的操作信息和 user 列表数据
* 客户端将信息和数据展现给用户
*
*/
function drop(){
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(xmlHttp.responseText);
var msg=xmlDoc.getElementsByTagName("msg")[0];
if(msg.getAttribute("isSuccess")=="false"){
alert(msg.getAttribute("msgString"));
}else{
alert(msg.getAttribute("msgString"));
flush();//删除成功后,刷新数据。
}
}
}
/**//**
* 清空数据表的数据
*
* @param opTable:所要清空的表对象
*
*/
function clearTable(opTable){
var size=opTable.rows.length;
for(var i=2;i<size;i++){
opTable.deleteRow(2);
}
}
/**//**
* 得到一页显示数据的个数
*
*/
function getPageUserNumber(){
return size.value;
}
/**//**
* 动态的根据用户选择的显示数进行动态返回刷新操作的URL
*
*/
function getFlushUserURl(){
return "user!list.action"+"?userNumber="+getPageUserNumber();
}
</ script >
< body >
< center >
< h3 >
用户列表
</ h3 >
< br >
< table id ="userTable" title ="用户列表" width ="60%" >
< tbody align ="center" >
< tr bgcolor ="#54821f" >
< th width ="5%" >
序号
</ th >
< th width ="15%" >
用户ID
</ th >
< th width ="15%" >
姓名
</ th >
< th width ="15%" >
电话
</ th >
< th width ="5%" >
操作
</ th >
< tr >
</ tbody >
</ table >
< br >
< br >
< br >
< button onclick ="showHint(getFlushUserURl(),flush);" >
刷新
</ button >
< font size ="2" color ="blue" >< b > 显示用户数: </ b ></ font >
< select id ="size" name ="userSize" >
< option value ="3" selected > 3 </ option >
< option value ="5" > 5 </ option >
< option value ="10" > 10 </ option >
< option value ="15" > 15 </ option >
< option value ="20" > 20 </ option >
</ select >
</ center >
</ body >
</ html >
UserAction.java
package
com.wen.test;
import java.util.List;
import java.util.Random;
import java.util.Vector;
import com.opensymphony.xwork2.ActionSupport;
@SuppressWarnings( " serial " )
public class UserAction extends ActionSupport {
private User user;
private int userNumber;
private List<User> userList;
private List<String> msgList;
public String delete() {
String id = user.getUserId();
msgList = new Vector<String>();
// 当userId第5为是4的时候删除失败
if (id.charAt(4) == '4') {
msgList.add("false");
msgList.add("删除ID为:" + id + "用户失败!!");
} else {
// 删除成功,做删除操作
msgList.add("true");
msgList.add("删除ID为:" + id + "用户成功!!");
}
return list();
}
public String list() {
userList = new Vector<User>();
// 如果得不到usernuNmber,初始化为3。
userNumber = userNumber == 0 ? 3 : userNumber;
// 随即得到 user 对象
for (int i = 0; i < userNumber; i++) {
user = new User();
user.setUserId("" + new Random().nextInt());
user.setUserName("name" + new Random().nextInt());
user.setUserTel("pass" + new Random().nextInt());
userList.add(user);
}
return SUCCESS;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
public List getMsgList() {
return msgList;
}
public List getUserList() {
return userList;
}
public void setUserNumber(int userNumber) {
this.userNumber = userNumber;
}
}
import java.util.List;
import java.util.Random;
import java.util.Vector;
import com.opensymphony.xwork2.ActionSupport;
@SuppressWarnings( " serial " )
public class UserAction extends ActionSupport {
private User user;
private int userNumber;
private List<User> userList;
private List<String> msgList;
public String delete() {
String id = user.getUserId();
msgList = new Vector<String>();
// 当userId第5为是4的时候删除失败
if (id.charAt(4) == '4') {
msgList.add("false");
msgList.add("删除ID为:" + id + "用户失败!!");
} else {
// 删除成功,做删除操作
msgList.add("true");
msgList.add("删除ID为:" + id + "用户成功!!");
}
return list();
}
public String list() {
userList = new Vector<User>();
// 如果得不到usernuNmber,初始化为3。
userNumber = userNumber == 0 ? 3 : userNumber;
// 随即得到 user 对象
for (int i = 0; i < userNumber; i++) {
user = new User();
user.setUserId("" + new Random().nextInt());
user.setUserName("name" + new Random().nextInt());
user.setUserTel("pass" + new Random().nextInt());
userList.add(user);
}
return SUCCESS;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
public List getMsgList() {
return msgList;
}
public List getUserList() {
return userList;
}
public void setUserNumber(int userNumber) {
this.userNumber = userNumber;
}
}