<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
#mydiv{
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top;-50px;
}
</style>
<script type="text/javascript">
//获得用户输入内容的关联信息的函数
function getMoreContents(){
var xmlHttp;
//首先要获得用户的输入
var content=document.getElementById("keyword");
if(content.value==""){
return;
}
//然后要给服务器发送用户输入的内容，因为我们采用的是ajax异步发送数据
//所以我们要是有一个对象，叫做XmlHttp对象
xmlHttp=createXMLHttp();
//创建完之后，我们需要向服务器发送数据
//escape不加的话就中文有问题
var url="search?keyword="+escape(content.value);
//true表示javascript脚本会在send（）方法之后继续执行，而不是等待来自服务器的相应
xmlHttp.open("GET",url,true);
//xmlHttp绑定回调方法，这个回调方法会在xmlHttp状态改变的时候被调用
//xmlHttp的状态0-4。我们只关心4（因为4表示完成）
//当完成之后，再调用回调方法才有意义
xmlHttp.onreadystatechange=callback;
//因为我们已经在url中已经写好参数的
xmlHttp.send(null);
}
function createXMLHttp(){
//对于大多数的浏览器都适用
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
//要考虑浏览器的兼容性
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
if(!xmlHttp){
xmlHttp=new ActiveXObject("Msxm2.XMLHTTP");
}
}
return xmlHttp;
}
//回调函数
function callback(){
//4代表完成
if(xmlHttp.readyState==4){
//这个200代表是响应成功，404代表资源部存在，500代表服务器内部错误
if(xmlHttp.status==200){
//这是交互成功，获得相应的数据，这是文本格式
var result=xmlHttp.responseText;
//解析获得 的数据
var json=eval("("+result+")");
//获得数据之后，就可以动态的显示这些数据了，把这些数据展示到输入框的下面
//alert(json);
setContent(json);
}
}
}
//设置关联数据的展示，参数代表的是服务器传递过来的关联数据
function setContent(contens){
//首先获得管理数据的长度以此来确定生成多少<tr></tr>
var size=contents.length;
//设置内容
for(var i=0;i<size;i++){
var nextNode=contens[i];//代表的是json格式数据的第i个元素
var tr=document.createElement("tr");
var td=document.createElement("td");
td.setAttribute("border","0");
td.setAttribute("bgcolor","#FFFAFA");
td.onmouseover=function(){
this.className='mouseOver';
};
td.onmouseout=function(){
this.className='mouseout';
};
td.onclick=function(){
//这个方法实现的是，当用鼠标点击一个关联的数据时，自动设置为输入框的数据
};
var text=document.createTede(nextNode);
td.appendChild(text);
tr.appendChild(td);
document.getElementById("content_table_body").appendChild(tr);
}
}
</script>
</head>
<body>
<div id="mydiv">
<!-- 输入框 -->
<input type="text" size="50" id="keyword" onkeyup="getMoreContents()"/>
<input type="button" value="百度一下" width="50px"/>
<!-- 下面是内容展示的区域 -->
<div id="popDiv">
<table id="content_table" bgcolor="#FFFAFA" border="0" cellspacing="0"
cellpadding="0">
<tbody id="content_table_body">
</tbody>
</table>
</div>
</div>
</body>
</html>
拟人
相关分类