AJAX简单百度效果

<script type="text/javascript">
function createXmlHttpRequest()
{
var xmlHttp=null;
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(se){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlHttp=new XMLHttpRequest();
}
}
if(xmlHttp==null){
alert("无法创建XMLHttpRequest");
}
return xmlHttp;
}

function login()
{
var xmlHttp=createXmlHttpRequest();
var uname=document.myform.username.value;
var pwd=document.myform.pwd.value;
//当请求状态改变
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
//接收响应文本
var txt=xmlHttp.responseText;
if(txt=="true"){
document.getElementById("msg").innerHTML="<a href='javascript:'>退出</a>";
}else{
alert("用户名或密码错误!请重新登录!");
document.getElementById("msg").innerHTML="<form action='' name='myform'>用户名:<input type='text' name='username' />密码:<input type='password' name='pwd'/><input type='button' οnclick='login()' value='登录'/><br></form>";
}
}
};
//发送
xmlHttp.open("post","LoginServlet",true);
xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlHttp.send("username="+uname+"&pwd="+pwd);
}
String.prototype.trim=function(){
var reg=this.match(/^\s*(\S+(\s+\S+)*)\s*$/);
return reg!=null?reg[1]:"";
};
function show(){
var keyword=document.getElementById("keyword").value;
if(keyword.trim()==""){
return;
}
var xmlHttp=createXmlHttpRequest();
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
var txt=xmlHttp.responseText;
//alert(txt);
//var all=txt.split(",");
//alert(all.length);
document.getElementById("content").innerHTML=txt;
}
};
xmlHttp.open("get","SearchServlet?keyword="+keyword,true);
xmlHttp.send(null);
}
</script>
</head>

<body>
<div id="msg">
<form action="" name="myform">
用户名:
<input type="text" name="username" />
密码:<input type="password" name="pwd"/>
<input type="button" οnclick="login()" value="登录"/>
<br>
</form>
</div>

baidu:<input type="text" id="keyword" οnkeyup="show()" autocomplete="off" name="keyword" /><input type="button" οnclick="show()" value="百度一下"/>
<div id="content" style="border:1px solid #ccc;width:300px;margin-left:33px;">
sdfljd
</div>

[b]
[color=red]//servlelt类中处理页面的请求[/b][/color]public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html;charset=gbk");
request.setCharacterEncoding("gbk");
String keyword=request.getParameter("keyword");
keyword=new String(keyword.getBytes("iso-8859-1"),"gbk");

NewsDaoImpl nd=new NewsDaoImpl();
List<String> list=nd.getALL(keyword);
PrintWriter out = response.getWriter();
for(String key:list){
out.print("<div οnmοuseοut=\"this.style.backgroundColor=''\" οnmοuseοver=\"this.style.backgroundColor='blue';document.getElementById('keyword').value='"+key+"';\">"+key+"</div>");
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值