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" onkeyup="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("图书馆的阿姨人很好");}@Overridepublic 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>