<%@ 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>Insert title here</title>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<link href="baidu.css" rel="stylesheet" media="screen"/>
<style >
table.tips
{ display:none;


}
table.show
{border: medium #0C3 solid;
}
a:link {
color:#00C;
text-decoration:none;
}
a:hover{color:#3F6;text-decoration:underline;

}
a:visited {
color:
#906;
text-decoration:none;
}

div.tips
{
display:none;
}
ul
{
border:thin #0F3 solid;
width:600px;
background-color:#FFF
list-style-type:decimal;

}
div.tipVison{

display:list-item;
width:auto;


}

li.liresult:HOVER
{
background-color:#999;
}

</style>

</head>

<body background="background.jpg">
<%response.setCharacterEncoding("UTF-8") ;%>
<div class="show" align="center" >
<img src="baidulogo.gif">


</div>
<div align="center" >
<ol id="navlinks">

<li><a href="#">新闻</a></li>
<li><a href="#">网页</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">图片</a></li>
<li class="last"><a href="#" >更多</a></li>
</ol>


<input type="text" name="search" id="search" onblur="$('.tip').hide()" />
<input type="button" size="30" maxlength="30" value="孟子搜索" />
<br>
<br>

<div class="tips" id="searchTips" >
<ul class="tipUl"></ul>
</div>

<script type="text/javascript">

$("document").ready(
$("#search").bind('keyup',function(){

var temp=document.getElementById("search").value;
$("#searchTips").removeClass();
$("#searchTips").addClass("tipVison");
$(".liresult").remove();

createXMLHttpRequest(temp);

// document.getElementById("searchTips").innerHTML=temp;



})
);

/* function reload()
{

var x=Math.random()*(1,10000);

document.form1.myImage.src="Image/first.jpg?"+x;


} */
var XMLHttpReq = null;
function createXMLHttpRequest( content)
{

if(window.ActiveXObject)//IE浏览器
{

XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)//非ie浏览器
{

XMLHttpReq=new XMLHttpRequest();
}
if(null!=XMLHttpReq)
{
content=encodeURI(content);
var mathradom=Math.random()*(1,10000);

XMLHttpReq.open("GET", "servlet/DivTips?content="+content+"&id="+mathradom, true);//true是异步方式
XMLHttpReq.onreadystatechange=processResponse;
XMLHttpReq.send(null);
}

}


/* function check()
{
alert("n");
createXMLHttpRequest();

} */


function processResponse()
{
if(XMLHttpReq.readyState== 4)
{
if(XMLHttpReq.status == 200)
{
//var res =XMLHttpReq.responseXML.getElementsByTagName("names");
// alert(res);
var names=XMLHttpReq.responseXML.getElementsByTagName("name");
/* var xml=XMLHttpReq.responseXML;
alert(xml); */
// alert("names:"+names.length);

//var child=res.item(0);
var result=new Array();
var li=new Array();
for(var i=0;i<names.length;i++)
{
result[i]=names.item(i).firstChild.nodeValue;
// alert(result[i]);
li[i]=$("<li class='liresult'>"+result[i]+"</li>");
li[i].click(
function()
{
// document.getElementById("search").value=$(this.text())
$("#search").val($(this).text());
}
);
$(".tipUl").append(li[i]);
}




}else
{
window.alert("你请求的页面有异常");
}
}
}



</script>

<embed id="music" src="player/music_19.swf" quality="high" width="324" height="186" align="middle" FlashVars="&u=http://localhost:8080/mysearch/music/02.mp3&s=1&r=false&c=%7E|%7ESong2|%7E" allowScriptAccess="always" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://localhost:8080/mysearch/music"></embed>
<table border="0" >
<tr>
<td width="200" bgcolor="#3300CC"><font color="#CCCC66"> 当前歌曲</font><MARQUEE behavior="scroll" scrolldelay ="200" > <font color="#993333"> 没离开过</font></MARQUEE></td></tr>
</table>
</div>
</body>
</html>

上面是主界面搜索,解决了页面同服务端通过xml交互,解决了客服端中文传输,解决了按键监听,和节点的创建复制,以及删除,和对接点的监听,安插了一个播放器,完整的代码会陆续上传