ajax 汉字模糊匹配及div控制显示

查询工种，在输入框中根据输入的汉字模糊匹配数据库表中的工种名称，要求在父窗口中点查询，弹出子窗口，在子窗口中有录入框，根据录入的文字模糊查询记录，代码控制如下：
父窗口：
var random = Math.random();
var rtnvalue = window.showModalDialog("/gkbweb/operation/jdxtgl/selectgz.jsp?gzmc=&random="+random , "",
"dialogWidth:300px; dialogHeight:500px; help:no; scroll:yes; status:no");

子窗口(selecgz.jsp)：
//java 得到参数处理
String gzmc=request.getParameter("gzmc");
List list=listObj.getDate(gzmc);

//input 事件
<input type="text" size="10" name="data" id="data" onpropertychange="getData(this)"/>

//ajax处理
function getData(obj) {
//--- 判断浏览器是否支持，你可以做的更复杂的，但是一定要有验证，否则不支持，就的程序就等于白做
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

//--- 取得用于显示的容器，是id=show的div
var show = document.getElementById("show");
var override=document.getElementById("Layer2");
/**
* 根据输入框的onpropertychange事件动态的获取输入框的内容
* 不能用onchange，不是不能，是不直观
* 自己百度onchange、onpropertychange事件的区别吧
**/
var value = obj.value;
//--- open('Method','URL')
//--- new Date().getTime()为了清除缓存
var url = "selectgz.jsp?gzmc="+value+"&date="+new Date().getTime();
//提交自己页面
//--- 指定处理程序的名称，以及发送数据的方法,get、post的主要区别是send是否携带数据
xmlhttp.open("get",url);
xmlhttp.send(null);

/**
* 当服务器触发了onreadystatechange事件
* 就判断服务器处理数据的状态
* 如果成功，则获取服务器返回的数据responseText
**/
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
override.style.display="none";
show.innerHTML = xmlhttp.responseText;
}
}
}

//显示控制
<div id="show"></div>

<DIV id="Layer2" style="Z-INDEX: 1; LEFT: 3px; OVERFLOW: auto; WIDTH: 99%; POSITION: absolute; TOP: 35px; HEIGHT: 88%">
<%for(int i=0;i<list.size();i++){ %>
<tr>
</tr>
<%} %>
</div>

需要注意的是：当在父页面点查询时，要求默认在子页面显示所有的工种信息，而现在在子页面调用ajax 查询的结果并不刷新页面，只可能在原来第一次查询的结果上再次显示ajax与服务器交互的第二次结果，所以在页面上显示的就是两个list 记录集，而在本例子中使用了div 中的属性控制当调用ajax时，将第一次的交互结果隐藏起来，显示的时候只显示ajax查询出来的记录集。