Struts2中Ajax的使用（Javascript实现）

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>