《使用Ajax以及CSSDIV高仿谷歌搜索》由会员分享，可在线阅读，更多相关《使用Ajax以及CSSDIV高仿谷歌搜索（9页珍藏版）》请在金锄头文库上搜索。
1、在使用Google搜索或者是Baidu搜索的时候，在输入搜索关键字的同 时，会自动弹出匹配的其他关键字的提示，全心全意为人民服务的精神在 这里崭露无遗。这种利用 Ajax技术实现输入提示和自动完成的功能是 Google率先推出的，然后在其他的 Web应用中被广泛的应用。利用Ajax实现部分页面刷新或者自动完成会使得用户体验绝大大提升。技术永远是为用户服务的（无论是性能方面还是美观方面），脱离了用户就没有技术的发展，或者说只有用户才能促进技术的进步。在掌握了 Ajax原理之后我们也可以模仿谷歌， 来实现一个搜索引擎的 小 Demo。在实现的过程中主要运用的是 Ajax技术，CSS+DIX布局，
2、Servlet+JavaBean还有数据库的基本知识等等。下面大致的描述一下实现 的步骤，请大家跟随文字来共同完成我们的Google。有兴趣的朋友可以 点击这里下载源码（实现仓促，如有不足之处请谅解）1、准备后台以及数据库，完成数据库（MySql）操作部分。这里很简单，首先编写 ConnectionManager类，来实现对数据库的连 接、查询功能。代码如下：1.package mon;2.3.importjava.sql.Connection;4.importjava.sql.DriverManager;5.importjava.sql.ResultSet;6.importjava.sql.
3、SQLException;7.importjava.sql.Statement;8.9.publicclass ConnectionManager 10.# / 7privatestaticprivatestaticprivatestaticprivatestaticprivatestaticprivatestaticprivatestaticpublicstatic、String URL= jdbc:mysql:/localhost:3306/testString DRIVER= com.mysql.jdbc.Driver;String USER= root;String PASSWORD=
4、 123456;Connection conn= null ;Statement stmt= null ;ResultSet rs= null ;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 fail
5、ed!); 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
6、(sql);return rs; catch (SQLException e) 11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.44.45.46.47.48.49.50.51.52.53.54.55.return null ;56.57.58.59.60.public static void main(String args) 61./getConnection();62.63.64.2、编写页面在页面中添加必须要有的文本框，以及两个按钮。其中必
7、不可少的是在文本框输入文本时才出现的一个隐藏DIV。代码如下：1. 3. 4.4. 5. 6. Google 7. 12. 13. 14. 15. 16. 17. vform id =form1 18. 19. 20. 21. 22. vinput id=submittype=submitvalue=Google搜索onclick =alert(NowSearch.)/23. 24. 25. 26. 27. 3、实现 Servlet编写Servlet来实现将页面的数据拼成 Sql语句并传到ConnectionManager类，将返回的结果输出的页面。（需要注意的是，这里我们采用得是直接输出js
8、p代码，所以要为DIV加上id属性以便在CSS中控制样式，以及相关事件以便于在js中控制效果。）代码如下：1. package com.ncs.servlet;2.2. importjava.io.IOException;3. importjava.io.PrintWriter;4. importjava.sql.ResultSet;5. importjava.sql.SQLException;7.6. importjavax.servlet.ServletException;7. importjavax.servlet.http.HttpServlet;8. import javax.ser
9、vlet.http.HttpServletRequest;9. import javax.servlet.http.HttpServletResponse;12.10. import mon.ConnectionManager;14.11. public class suggest extends HttpServlet 16.12. Override13. protected void doGet(HttpServletRequest req, HttpServletResponse resp)14. throws ServletException, lOException 20.21.22
10、.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.44.45.46.47.48.49.50.51.52.53.54.55.56.57.58.59.60.61.62.63.req.setCharacterEncoding( UTF-8);/ resp.setContentType(text/xml;charset=utf-8);System.out.println( Enter Servlet Get Method.);Printwriter out=resp.getWriter();String param=(String)req.getParameter( id);String paramValue=param.trim().length() 0?param.trim(): unknown;String sql= select name from tbl_ajax_search where name like +paramValue+ %; System.out.println( sql= +sql);Con
