<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' onclick='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" onclick="login()" value="登录"/>
<br>
</form>
</div>
baidu:<input type="text" id="keyword" onkeyup="show()" autocomplete="off" name="keyword" /><input type="button" onclick="show()" value="百度一下"/>
<div id="content" style="border:1px solid #ccc;width:300px;margin-left:33px;">
sdfljd
</div>
//servlelt类中处理页面的请求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 onmouseout=\"this.style.backgroundColor=''\" onmouseover=\"this.style.backgroundColor='blue';document.getElementById('keyword').value='"+key+"';\">"+key+"</div>");
}
分享到：
相关推荐
在本项目中，我们通过Ajax异步请求与Servlet后台交互，模拟百度搜索时用户输入关键词后实时展示建议结果的效果。下面将详细介绍这两个关键技术和实现过程。 1. Servlet：Servlet是Java Web开发中的一个核心组件，它...
本项目"仿百度模拟ajax下拉框搜索"就是基于jQuery实现的一个功能，旨在模仿百度搜索框的智能提示功能，当用户在输入框中输入关键词时，能够实时通过Ajax从服务器获取并显示相关的搜索建议，同时支持用户使用键盘的上...
本文将通过一个简单的Demo，教你如何使用Ajax实现类似百度或Google搜索时的模糊查询功能。 首先，我们需要了解Ajax的基本构成： 1. **XMLHttpRequest对象**：这是Ajax的核心，用于在后台与服务器进行通信，发送...
在本例中，Ajax请求的URL被设置为`a.txt`，这是一种简单的文本文件格式，用于返回数据。在实际应用中，这个URL应该指向一个PHP文件，这个文件将处理用户的查询请求，查询数据库，并返回结果。返回的数据通常以逗号...
至于"thinkphp仿百度分页+分页样式.rar"和"Thinkphp原创Ajax分页加搜索查询.zip"，它们可能是包含ThinkPHP框架的分页功能和样式的代码资源，帮助开发者快速实现分页功能，包括搜索查询和样式美化。 最后，提到的"QQ...
在本案例中，开发者通过Ajax实现了用户输入关键词后，实时查询并显示匹配结果的效果。 在实际的网页开发中，Ajax的核心在于创建XMLHttpRequest对象，这个对象是浏览器提供的用于异步通信的原生JavaScript对象。以下...
在前端开发中，Ajax（Asynchronous JavaScript and XML）与CSS（Cascading Style Sheets）是两种非常关键的技术，它们能够创建交互性强、响应快速且用户体验优秀的网页应用。本压缩包包含超过15个实例，涵盖了多种...
《基于jQuery的百度经验信息浏览效果代码解析》 在网页设计和开发中，动态效果的运用可以提升用户体验，增加互动性。"jquery百度经验信息浏览效果代码"正是这样一款利用JavaScript库jQuery实现的仿百度经验的信息...
在实际应用中，如百度贴吧、论坛等社交平台的评论系统中，Ajax技术被广泛采用，实现用户发表内容后页面不刷新显示新留言的效果。 **一、Ajax基础概念** Ajax的核心是JavaScript对象XMLHttpRequest，它允许浏览器在...
它提供了丰富的API来处理DOM操作、事件处理、动画效果以及Ajax交互。jQuery的核心优势在于其简洁的语法和广泛的浏览器兼容性，使得开发者能更高效地编写跨浏览器的JavaScript代码。 Ajax（Asynchronous JavaScript ...
本教程将详细介绍如何使用JavaScript来实现类似百度搜索提示的效果。JavaScript是一种广泛使用的客户端脚本语言，它允许我们动态地操作HTML元素，实现与用户的交互。 首先，我们需要一个HTML页面作为基础，这可以...
5. **样式与动画**：为了让提示列表看起来更像百度搜索的效果，我们还需要添加 CSS 样式来调整位置、颜色和动画效果。例如： ```css #suggestionList { position: absolute; background-color: white; border: 1...
将百度地图API与jQuery结合，可以利用jQuery的便利性来增强地图功能的用户体验，例如，通过jQuery选择器快速定位地图元素，或者使用动画效果来提升交互体验。 在"百度地图jquery,简单快速集成"中，主要涉及以下几个...
在本案例中，"jQuery百度百家首页新闻焦点图切换效果代码"涉及到的是使用jQuery来实现一种常见的网页设计元素——焦点图切换效果，通常用于展示网站的特色内容或最新资讯。这种效果可以为用户提供一个动态的、吸引人...
它提供了一套方便的API来处理DOM操作、事件处理、动画效果以及Ajax交互。例如，使用jQuery选择器可以快速定位到页面上的元素，而`.html()`, `.append()`, `.click()`等方法则分别用于设置元素内容、添加子元素和绑定...
【标题】"百度百家图片切换效果.zip"是一个包含HTML源码和相关脚本的压缩包，主要用于实现一种图片切换效果，这种效果源自百度百家首页的新闻图片焦点图展示。这个功能在网页设计中非常常见，它能提升用户体验，使...
"简单的调用百度api翻译工具js代码" 这个标题指出我们要讨论的是一个使用JavaScript（js）来调用百度API实现翻译功能的简单应用。它可能是一个小型的前端项目，用于演示如何与百度翻译API进行交互，以实现文本的在线...
现代的自动补全技术已经不仅仅局限于简单的关键词匹配，许多搜索引擎如谷歌、百度等，已经开始结合人工智能和机器学习技术，以提供更精准、个性化的搜索建议。这些技术可以理解和学习用户的输入模式，预测他们可能想...
4. **Ajax交互**：jQuery的`.ajax()`函数使得异步数据请求变得简单。如果百度导航页面有实时更新的内容，比如天气预报或新闻，可以使用Ajax来获取服务器端的最新数据，无需刷新整个页面。 5. **响应式设计**：现代...
3. **jQuery插件**：虽然可以手动计算每个元素的位置以实现瀑布流效果，但使用现成的jQuery插件如`masonry`或`isotope`会更简单。在本例中，我们将使用jQuery本身来实现这一功能。 4. **JavaScript逻辑**：编写...