Struts2的action的實現:






















































































































html
1
<%@ page language="java" pageEncoding="utf-8"%>
2
<%@ taglib uri="/struts-tags" prefix="s"%>
3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
4
<html>
5
<head>
6
<title>Ajax Auto Complete</title>
7
<style type="text/css">
8
9
.mouseOut {
10
background: #708090;
11
color: #FFFAFA;
12
}
13
14
.mouseOver {
15
background: #FFFAFA;
16
color: #000000;
17
}
18
</style>
19
<script type="text/javascript">
20
var xmlHttp;
21
var completeDiv;
22
var inputField;
23
var nameTable;
24
var nameTableBody;
25
26
function createXMLHttpRequest() {
27
if (window.ActiveXObject) {
28
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
29
}
30
else if (window.XMLHttpRequest) {
31
xmlHttp = new XMLHttpRequest();
32
}
33
}
34
35
function initVars() {
36
inputField = document.getElementById("names");
37
nameTable = document.getElementById("name_table");
38
completeDiv = document.getElementById("popup");
39
nameTableBody = document.getElementById("name_table_body");
40
}
41
42
function findNames() {
43
initVars();
44
if (inputField.value.length > 0) {
45
createXMLHttpRequest();
46
var url = "getInfo.action?key=" + escape(inputField.value) +"&time=" + new Date().getTime();
47
xmlHttp.open("GET", url, true);
48
xmlHttp.onreadystatechange = callback;
49
xmlHttp.send(null);
50
} else {
51
clearNames();
52
}
53
}
54
55
function callback() {
56
if (xmlHttp.readyState == 4) {
57
if (xmlHttp.status == 200) {
58
setNames(xmlHttp.responseXML.getElementsByTagName("value"));
59
} else {
60
clearNames();
61
}
62
}
63
}
64
65
function setNames(the_names) {
66
clearNames();
67
var size = the_names.length;
68
setOffsets();
69
var row, cell, txtNode;
70
for (var i = 0; i < size; i++) {
71
var nextNode = the_names[i].firstChild.data;
72
row = document.createElement("tr");
73
cell = document.createElement("td");
74
75
cell.onmouseout = function() {this.className='mouseOver';};
76
cell.onmouseover = function() {this.className='mouseOut';};
77
cell.setAttribute("bgcolor", "#FFFAFA");
78
cell.setAttribute("border", "0");
79
cell.onclick = function() { populateName(this); } ;
80
81
txtNode = document.createTextNode(nextNode);
82
cell.appendChild(txtNode);
83
row.appendChild(cell);
84
nameTableBody.appendChild(row);
85
}
86
createClose();
87
}
88
89
function createClose(){
90
row = document.createElement("tr");
91
cell = document.createElement("td");
92
txtNode = document.createTextNode("close");
93
cell.appendChild(txtNode);
94
cell.setAtrribute();
95
row.appendChild(cell);
96
nameTableBody.appendChild(row);
97
}
98
function setOffsets() {
99
var end = inputField.offsetWidth;
100
var left = calculateOffsetLeft(inputField);
101
var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
102
103
completeDiv.style.border = "black 1px solid";
104
completeDiv.style.left = left + "px";
105
completeDiv.style.top = top + "px";
106
nameTable.style.width = end + "px";
107
}
108
109
function calculateOffsetLeft(field) {
110
return calculateOffset(field, "offsetLeft");
111
}
112
113
function calculateOffsetTop(field) {
114
return calculateOffset(field, "offsetTop");
115
}
116
117
function calculateOffset(field, attr) {
118
var offset = 0;
119
while(field) {
120
offset += field[attr];
121
field = field.offsetParent;
122
}
123
return offset;
124
}
125
126
function populateName(cell) {
127
inputField.value = cell.firstChild.nodeValue;
128
clearNames();
129
}
130
131
function clearNames() {
132
var ind = nameTableBody.childNodes.length;
133
for (var i = ind - 1; i >= 0 ; i--) {
134
nameTableBody.removeChild(nameTableBody.childNodes[i]);
135
}
136
completeDiv.style.border = "none";
137
}
138
139
</script>
140
</head>
141
<body>
142
<h1>Ajax Auto Complete Example</h1>
143
<s:form action="search">
144
<s:textfield label="Input the info which you want to search"
145
name="key" id="names" cssStyle="height:20;" maxlength="20" onkeyup="findNames();"></s:textfield>
146
<s:submit label="Search"></s:submit>
147
</s:form>
148
<div style="position:absolute;" id="popup">
149
<table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0"/>
150
<tbody id="name_table_body">
151
</tbody>
152
</table>
153
</div>
154
</body>
155
</html>
156
157

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

注:引入struts2的用到的jar struts.xml文件 修改web.xml文件。