模拟百度的自动下拉提示框

来源：互联网发布：vr球面投影算法编辑：程序博客网时间：2024/05/21 19:38

最近开始接触AJAX，最初以为是一种很新很时髦的技术，等学习了一段时间后，

发现不过是一些老技术的结合。最重要的就是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...