ajax实例及实现文本框异步搜素
search.jsp（WebContent/jsp/search.jsp）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Search</title> <script type="text/javascript"> /***单机文本框时检查文本框的值***/ function changeValue(){ var tab = document.getElementById("tabId"); var inputStr = document.getElementById("inputStr"); var inputValue = inputStr.value; if(inputStr.value==null || inputStr.value==""){ tab.style.display='none'; }else{ ajax(inputValue); tab.style.display='table'; } } /***当按下或释放键时检查文本框的值***/ function checkField(obj){ var tab = document.getElementById("tabId"); var inputStr = document.getElementById("inputStr"); var inputValue = inputStr.value; if(obj==null || obj==""){ tab.style.display='none'; }else{ tab.style.display='table'; ajax(inputValue); } } /***单机td时给文本框赋值***/ function display(obj){ var tab = document.getElementById("tabId"); document.getElementById("inputStr").value=obj.innerHTML; tab.style.display='none'; } /***onmouseover事件给文本框赋值***/ function setInputValue(obj){ var tab = document.getElementById("tabId"); document.getElementById("inputStr").value=obj.innerHTML; } function ajax(param) { //先声明一个异步请求对象 var xmlHttpReg = null; if (window.ActiveXObject) {//如果是IE xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg } //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求 if (xmlHttpReg != null) { xmlHttpReg.open("post", "/Test/SearchServlet?param="+param, true); xmlHttpReg.send(null); xmlHttpReg.onreadystatechange = doResult; //设置回调函数 } //回调函数 //一旦readyState的值改变,将会调用这个函数,readyState=4表示完成相应 //设定函数doResult() function doResult() { if (xmlHttpReg.readyState == 4) {//4代表执行完成 if (xmlHttpReg.status == 200) {//200代表执行成功 var resultValue = xmlHttpReg.responseText; if(resultValue!=null){ document.getElementById("tabId").innerHTML=resultValue; } } } } } </script> </head> <body> <input type="text" name="inputStr" id="inputStr" onclick="changeValue()" onkeydown="checkField(this.value)" onkeyup="checkField(this.value)"> <table style="border:1px solid;display:none;cellpadding:0" width="153px" id="tabId"> <!-- <tr height="25px"><td onclick="display(this)" onmouseover="setInputValue(this)">aaaaa</td></tr> <tr height="25px"><td onclick="display(this)" onmouseover="setInputValue(this)">bbbbb</td></tr> <tr height="25px"><td onclick="display(this)" onmouseover="setInputValue(this)">ccccc</td></tr> <tr height="25px"><td onclick="display(this)" onmouseover="setInputValue(this)">ddddd</td></tr> --> </table> </body> </html>
SearchServlet(com.test.srevlet.SearchServlet)
package com.test.srevlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/SearchServlet") public class SearchServlet extends HttpServlet { private static final long serialVersionUID = 1L; public SearchServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String param = request.getParameter("param"); StringBuffer returnStr = new StringBuffer(); String[] strs = null; if(param.endsWith("aa")){ strs=new String[]{"a","aa","aaa","aaaa"}; for (int i = 0; i < strs.length; i++) { returnStr.append("<tr height=\"25px\"><td onclick=\"display(this)\" onmouseover=\"setInputValue(this)\">"); returnStr.append(strs[i]); returnStr.append("</td></tr>"); } }else if(param.endsWith("aas")){ strs=new String[]{"sas","saas","saaas","saaaas"}; for (int i = 0; i < strs.length; i++) { returnStr.append("<tr height=\"25px\"><td onclick=\"display(this)\" onmouseover=\"setInputValue(this)\">"); returnStr.append(strs[i]); returnStr.append("</td></tr>"); } }else if(param.endsWith("aass")){ strs=new String[]{"f","faa","faaa","faaaa"}; for (int i = 0; i < strs.length; i++) { returnStr.append("<tr height=\"25px\"><td onclick=\"display(this)\" onmouseover=\"setInputValue(this)\">"); returnStr.append(strs[i]); returnStr.append("</td></tr>"); } }else{ returnStr.append("<tr height=\"25px\"><td onclick=\"display(this)\" onmouseover=\"setInputValue(this)\"></td></tr>"); } System.out.println(returnStr.toString()); response.getWriter().write(returnStr.toString()); } }
