<%@ 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;
600px;
background-color:#FFF
list-style-type:decimal;
}
div.tipVison{
display:list-item;
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交互，解决了客服端中文传输，解决了按键监听，和节点的创建复制，以及删除，和对接点的监听，安插了一个播放器，完整的代码会陆续上传