Struts2中Ajax的使用(Javascript实现)
描述:实现在输入框中输入信息时动态提示(模仿百度或谷歌的页面效果)。
注意:服务器端提示信息以XML格式返回。
1. 页面效果
2. 页面Html代码
<div align="center">
<table>
<tr>
提示:输入祥子、帅帅、图书馆、阿姨
</tr>
<tr>
<td>
<input type="text" id="key" name="key" οnkeyup="suggest()" />
<div id="suggest">
<table>
<tbody id="content"></tbody>
</table>
</div>
</td>
</tr>
</table>
</div>
3. 页面Javascript代码
<script type="text/javascript">
var XMLHttpReq;
//创建XMLHttpReques对象
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
//Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
} else {
// IE浏览器
if (window.ActiveXObject) {
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
}
}
//发送客户端的请求
function sendRequest(url, data) {
createXMLHttpRequest();
XMLHttpReq.open("POST", url, true);
XMLHttpReq.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//指定响应函数
XMLHttpReq.onreadystatechange = handleResponse;
// 发送请求
XMLHttpReq.send(data);
}
//处理服务器响应结果
function handleResponse() {
// 判断对象状态
if (XMLHttpReq.readyState == 4) {
// 信息已经成功返回,开始处理信息
if (XMLHttpReq.status == 200) {
clearTable();
var out = "";
var res = XMLHttpReq.responseXML;
var items = res.getElementsByTagName("item");
for ( var i = 0; i < items.length; i++) {
addRow(items[i].firstChild.nodeValue);
}
setDivStyle();
}
}
}
//调用Ajax自动提示功能
function suggest() {
var key = document.getElementById("key").value;
if (key != null && key != '') {
sendRequest(
"${pageContext.request.contextPath}/ajax/suggestAction.action",
"key=" + key);
}
}
//清除表格中的结果
function clearTable() {
var content = document.getElementById("content");
while (content.childNodes.length > 0) {
content.removeChild(content.childNodes[0]);
}
}
//向输入提示的表格中添加一行记录
function addRow(item) {
var content = document.getElementById("content");
var row = document.createElement("tr");
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(item));
cell.onmouseover = function() {
this.style.background = "blue"
};
cell.onmouseout = function() {
this.style.background = "#f5f5f1"
};
cell.onclick = function() {
document.getElementById("key").value = this.innerHTML;
clearTable();
};
row.appendChild(cell);
content.appendChild(row);
}
//设置输入提示框的位置和风格
function setDivStyle() {
var suggest = document.getElementById("suggest");
suggest.style.border = "black 0px solid";
suggest.style.left = 82;
suggest.style.top = 50;
suggest.style.width = 152;
suggest.style.backgroundColor = "#f5f5f1"
document.getElementById("suggest").style.visibility = "visible"
}
</script>
4. Struts2代码
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class SuggestAction extends ActionSupport {
private String key;
private List<String> items = null;
public String getKey() {
return key;
}
public void setKey(String key) {
this.key = key;
}
private void init() {
items = new ArrayList<String>();
items.add("祥子今天很忙");
items.add("大家都说祥子长的很帅");
items.add("祥子芳芳");
items.add("帅帅正在上自习");
items.add("图书馆今天好多人哦");
items.add("图书馆的阿姨人很好");
}
@Override
public String execute() throws Exception {
init();
if (key != null && key.length() > 0) {
StringBuffer output = new StringBuffer("");
output.append("<response>");
for (String item : items) {
if (item.contains(key)) {
output.append("<item>");
output.append(item);
output.append("</item>");
}
}
output.append("</response>");
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.write(output.toString());
out.flush();
out.close();
}
return null;
}
}
注意返回值为null。
5. Struts2配置文件
<struts>
<package name="ajax" namespace="/ajax" extends="struts-default">
<action name="suggestAction" class="com.action.SuggestAction">
</action>
</package>
</struts>