ajax实例及实现文本框异步搜素

时间:2021-02-02 02:29:51

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());
} }