模拟百度的自动下拉提示框
2012-10-11 23:47
288 查看
最近开始接触AJAX，最初以为是一种很新很时髦的技术，等学习了一段时间后，
发现不过是一些老技术的结合。最重要的就是XMLHttpRequest对象(JS)
正所谓学以致用，今天突发灵感，觉得百度的自动下拉提示框应该是用AJAX实现的，
于是心头一热，忙了大半个晚上，写了个简单的WEB程序。
下面给大家分享下自己的拙作，希望大家多点评下。
本网站前端采用的JSP，后台为Servlet模块。
数据库采用流行的MySQL。
在实现功能之前，应该了解一下基本的原理。
首先是要知道对表单的输入框的响应事件。
Javascript中有onpropertychange(IE支持)和oninput(FF等)
对于IE来说，可以这样来实现:
对于非IE浏览器，如Google Chrome,可以利用下面的代码:
这样，我们就可以动态地取得用户输入的内容。通过AJAX的异步交互，将信息传递给Servlet处理，
Servlet连接数据库，得到匹配的信息,返回给页面。
在数据库中，可以这样模糊查询:
如果匹配多个字符则用"%"，单个字符用"_"。
**************************************************************************************
中文乱码问题
另外，由于我们是利用JS取得用户的数据，因此如果含有中文信息会乱码，
我们可以利用JS里的函数库来处理乱码内容:
encodeURI() 或者 encodeURIComponent(uriComponent)
（调用一次还是会乱码，网上有人说要两次掉要该方法就可以解决问题，即encodeURI(encodeURI()))
在Servlet对得到的信息解码:
URLDecoder.decode(request.getParameter("msg","UTF-8"));
这样，我们就解决了中文乱码问题.
***************************************************************
整个流程大概如下：
下面给出一些关键代码:
首先是数据库:
创建数据库:
接着创建表:
再随机插入一些数据：
如图:
接下来是JSP页面:
index.jsp:
再来是Servlet
QueryServlet.java:
最后贴一个web.xml:
大功告成，下面看一下效果：
IE9:
Google Chrome:
（数据库用户名和密码可以在QueryServlet.java类里改)
(别忘了在类库里添加MySQL驱动包)
(整个web项目放在资源里,供大家分享)
至于百度的图片，呵呵，自己去官网索取吧。
Over...
发现不过是一些老技术的结合。最重要的就是XMLHttpRequest对象(JS)
正所谓学以致用，今天突发灵感，觉得百度的自动下拉提示框应该是用AJAX实现的，
于是心头一热，忙了大半个晚上，写了个简单的WEB程序。
下面给大家分享下自己的拙作，希望大家多点评下。
本网站前端采用的JSP，后台为Servlet模块。
数据库采用流行的MySQL。
在实现功能之前，应该了解一下基本的原理。
首先是要知道对表单的输入框的响应事件。
Javascript中有onpropertychange(IE支持)和oninput(FF等)
对于IE来说，可以这样来实现:
<script type="text/javascript">
document.getElementById('myinput').attachEvent('onpropertychange',function(o){
if(o.propertyName =='value') {
//doSth ex. alert(myinput.value);
}
});
</script>对于非IE浏览器，如Google Chrome,可以利用下面的代码:
<script type="text/javascript">
document.getElementById('myinput').addEventListener( "input",function(o) {
//doSth
// ex. alert(myinput.value);
},false);
</script>这样，我们就可以动态地取得用户输入的内容。通过AJAX的异步交互，将信息传递给Servlet处理，
Servlet连接数据库，得到匹配的信息,返回给页面。
在数据库中，可以这样模糊查询:
SELECT * FROM table_name WHERE column_name = 'content%';
如果匹配多个字符则用"%"，单个字符用"_"。
**************************************************************************************
中文乱码问题
另外，由于我们是利用JS取得用户的数据，因此如果含有中文信息会乱码，
我们可以利用JS里的函数库来处理乱码内容:
encodeURI() 或者 encodeURIComponent(uriComponent)
（调用一次还是会乱码，网上有人说要两次掉要该方法就可以解决问题，即encodeURI(encodeURI()))
在Servlet对得到的信息解码:
URLDecoder.decode(request.getParameter("msg","UTF-8"));
这样，我们就解决了中文乱码问题.
***************************************************************
整个流程大概如下：
下面给出一些关键代码:
首先是数据库:
创建数据库:
CREATE DATABASE autoComplete;
接着创建表:
Create Table: CREATE TABLE `hotwords` ( `id` int(11) NOT NULL AUTO_INCREMENT, `msg` text, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8
再随机插入一些数据：
如图:
mysql> select * from hotwords; +----+---------+ | id | msg | +----+---------+ | 1 | china | | 2 | chinese | | 3 | cake | | 4 | cub | | 5 | chaos | | 6 | chicken | | 7 | 陈旭 | | 8 | 陈龙 | | 9 | 陈滟龙 | +----+---------+ 9 rows in set (0.00 sec)
接下来是JSP页面:
index.jsp:
<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
<title>自动提示框</title>
<style type="text/css">
.mystyle
{ background:white none repeat scroll 0 0;
border:1px solid black;
cursor:default;
font-size:13px;
line-height:17px;
margin:0;
z-index:99;
width:150px;
left:10px;
top:10px;
visibility: hidden;
}
</style>
</head>
<body>
<img src="pics/baidu_sylogo1.gif"/>
<form>
<input type="text" name="myinput" id="myinput" autocomplete="off"/>
<input type="submit" value="百度一下" />
</form>
<div id="aaa" class="mystyle"></div>
</body>
<script type="text/javascript">
<!--
var xmlHttp; //XMLHttpRequest对象
//判断浏览器类型
function isIE() {
if(navigator.userAgent.indexOf( "MSIE")>0) {
return true;
}
}
//定义表单内容改变事件
if(isIE()) {
document.getElementById('myinput').attachEvent('onpropertychange',function(o){
if(o.propertyName =='value') {
var msg = document.getElementById('myinput').value; //取得用户输入实时信息
getContent(msg);
}
});
} else {
document.getElementById('myinput').addEventListener( "input",function(o) {
var msg = document.getElementById('myinput').value; //取得用户输入实时信息
getContent(msg);
},true);
}
//创建XMLHttpRequest对象
function createXMLHttp() {
if(window.ActiveXObject)
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
else
xmlHttp = new XMLHttpRequest();
}
//向服务器取数据
function getContent(msg) {
createXMLHttp();
var url = encodeURI(encodeURI("query.do?msg=" + msg));
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4) {
if (xmlHttp.responseText == '')
document.getElementById("aaa").style.visibility = 'hidden';
else{
document.getElementById("aaa").style.visibility = 'visible';
document.getElementById("aaa").innerHTML = xmlHttp.responseText;
}
}
};
xmlHttp.send();
}
//-->
</script>
</html>再来是Servlet
QueryServlet.java:
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class QueryServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String msg = request.getParameter("msg");
String decoded_msg = URLDecoder.decode(msg,"UTF-8");
System.out.println(decoded_msg);
getContent(decoded_msg, out);
}
public static Connection getConnection() {
Connection conn = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/autocomplete", "root",
"your password");
return conn;
} catch (ClassNotFoundException cnfe) {
cnfe.printStackTrace();
return null;
} catch (SQLException e) {
e.printStackTrace();
return null;
}
}
public static void getContent(String msg, PrintWriter out) {
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
if ( !msg.equals("")) {
System.out.println(msg);
String sql = "select * from hotwords where msg like '" + msg + "%'";
System.out.println(sql);
try {
conn = getConnection();
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while (rs.next()) {
out.print(rs.getString("msg") + "<br/>");
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
try{
if(rs != null) {
rs.close();
}
if(pstmt != null) {
pstmt.close();
}
if(conn != null) {
conn.close();
}
}catch(SQLException e) {
e.printStackTrace();
}
}
}
}
//删除内容
public static boolean deleteContent(String msg) {
Connection conn = null;
PreparedStatement pstmt = null;
System.out.println(msg);
String sql = "delete * from hotwords where msg =?";
try {
conn = getConnection();
pstmt = conn.prepareStatement(sql);
pstmt.setString(1,msg);
int n = pstmt.executeUpdate();
if ( n > 0) {
return true;
}else {
return false;
}
} catch (SQLException e) {
e.printStackTrace();
return false;
}finally {
try{
if(pstmt != null) {
pstmt.close();
}
if(conn != null) {
conn.close();
}
}catch(SQLException e) {
e.printStackTrace();
}
}
}
}最后贴一个web.xml:
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <display-name></display-name> <servlet> <servlet-name>QueryServlet</servlet-name> <servlet-class>QueryServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>QueryServlet</servlet-name> <url-pattern>/query.do</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
大功告成，下面看一下效果：
IE9:
Google Chrome:
（数据库用户名和密码可以在QueryServlet.java类里改)
(别忘了在类库里添加MySQL驱动包)
(整个web项目放在资源里,供大家分享)
至于百度的图片，呵呵，自己去官网索取吧。
Over...
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Python模拟百度自动输入搜索功能
- python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
- python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
- 百度搜索自动提示搜索相关内容----模拟实现
- 百度 Echarts 地图->模拟迁徙，实现自动切换地图
- jquery ui autocomplete 模拟百度搜索自动提示
- AAuto - 百度自动登录 （模拟操作）
- casperjs配合phantomjs实现自动登录百度，模拟点击等等操作 - 怕虎在线www.ipahoo.com图文教程 - 怕虎在线
- 百度自动发贴，登录很顺利的模拟实现，但发贴攻关失败，能力有限，追JS过程中颇为痛苦
- 模拟谷哥，和百度的输入自动提示框
- 毕设之每天总结 五：模拟百度自动匹配
- POST模拟百度登录和自动发帖
- Python模拟用户自动登陆网易126邮箱
- Android开发——Accessibility机制实现模拟点击（微信自动抢红包实现）
- [转]C# 系统应用之鼠标模拟技术及自动操作鼠标
- 新浪微博自动转发评论 源码 按键精灵实现 详细注释 几十行代码实现 涉及图像识别模拟键盘鼠标
- 在windows下使用cmd命令通过adb shell自动调用android模拟或真机的InstrumentRunner进行android 自动化测试
- 百度智能搜索框模拟（原创）
- 百度开放Apllo2.0平台 能够实现简单城市道路自动驾驶
- Android之百度自动更新