使用Ajax以及CSS+DIV高仿谷歌搜索.docx

在使用Google搜索或者是Baidu搜索的时候，在输入搜索关键字的同时，会自动弹出匹配的其他关键字的提示，全心全意为人民服务的精神在这里崭露无遗。这种利用Ajax技术实现输入提示和自动完成的功能是Google率先推出的，然后在其他的Web应用中被广泛的应用。利用Ajax实现部分页面刷新或者自动完成会使得用户体验绝大大提升。技术永远是为用户服务的（无论是性能方面还是美观方面），脱离了用户就没有技术的发展，或者说只有用户才能促进技术的进步。在掌握了Ajax原理之后我们也可以模仿谷歌，来实现一个搜索引擎的小Demo。在实现的过程中主要运用的是Ajax技术，CSS+DIV布局，Servlet+JavaBean，还有数据库的基本知识等等。下面大致的描述一下实现的步骤，请大家跟随文字来共同完成我们的Google。有兴趣的朋友可以/detail/beijiguangyong/4364733点击这里下载源码（实现仓促，如有不足之处请谅解）1、准备后台以及数据库，完成数据库（MySql）操作部分。这里很简单，首先编写ConnectionManager类，来实现对数据库的连接、查询功能。代码如下：package?mon;???import?java.sql.Connection;??import?java.sql.DriverManager;??import?java.sql.ResultSet;??import?java.sql.SQLException;??import?java.sql.Statement;???public?class?ConnectionManager?{????private?static?String?URL=jdbc:mysql://localhost:3306/test;???private?static?String?DRIVER=com.mysql.jdbc.Driver;???private?static?String?USER=root;???private?static?String?PASSWORD=123456;???private?static?Connection?conn=null;???private?static?Statement?stmt=null;???private?static?ResultSet?rs=null;????public?static?void?getConnection(){????try?{???Class.forName(DRIVER);???try?{???conn?=?DriverManager.getConnection(URL,?USER,?PASSWORD);???System.out.println(Successfully?connected?to?Mysql?DB!);???}?catch?(SQLException?e)?{???System.out.println(Connection?DB?failed!);???}???}?catch?(ClassNotFoundException?e)?{???System.out.println(Driver:+DRIVER+?cant?find!);???}??}?????public?static?void?closeConnection(){????try?{???conn.close();???conn=null;???}?catch?(SQLException?e)?{????e.printStackTrace();???}???}?????public?static?ResultSet?executeQuery(String?sql){???try?{???stmt=conn.createStatement();???rs=stmt.executeQuery(sql);???return?rs;????}?catch?(SQLException?e)?{???return?null;???}????}????public?static?void?main(String[]?args)?{???//getConnection();??}???}??2、编写页面在页面中添加必须要有的文本框，以及两个按钮。其中必不可少的是在文本框输入文本时才出现的一个隐藏DIV。代码如下：%@?page?language=java?contentType=text/html;?charset=UTF-8??pageEncoding=UTF-8%?!DOCTYPE?html?PUBLIC?-//W3C//DTD?XHTML?1.0?Transitional//EN?/TR/xhtml1/DTD/xhtml1-