使用Ajax以及CSSDIV高仿谷歌搜索_第1頁
使用Ajax以及CSSDIV高仿谷歌搜索_第2頁
使用Ajax以及CSSDIV高仿谷歌搜索_第3頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

1、在使用Google搜索或者是Baidu搜索的時候，在輸入搜索關(guān)鍵字的同 時，會自動彈出匹配的其他關(guān)鍵字的提示，全心全意為人民服務(wù)的精神在 這里嶄露無遺。這種利用 Ajax技術(shù)實現(xiàn)輸入提示和自動完成的功能是 Google率先推出的，然后在其他的 Web應(yīng)用中被廣泛的應(yīng)用。利用Ajax實現(xiàn)部分頁面刷新或者自動完成會使得用戶體驗絕大大提升。技術(shù)永遠是為用戶服務(wù)的（無論是性能方面還是美觀方面），脫離了用戶就沒有技術(shù)的發(fā)展，或者說只有用戶才能促進技術(shù)的進步。在掌握了 Ajax原理之后我們也可以模仿谷歌， 來實現(xiàn)一個搜索引擎的 小 Demo。在實現(xiàn)的過程中主要運用的是 Ajax技術(shù)，CSS+DIX布局，

2、Servlet+JavaBean還有數(shù)據(jù)庫的基本知識等等。下面大致的描述一下實現(xiàn) 的步驟，請大家跟隨文字來共同完成我們的Google。有興趣的朋友可以 點擊這里下載源碼（實現(xiàn)倉促，如有不足之處請諒解）1、準(zhǔn)備后臺以及數(shù)據(jù)庫，完成數(shù)據(jù)庫（MySql）操作部分。這里很簡單，首先編寫 ConnectionManager類，來實現(xiàn)對數(shù)據(jù)庫的連 接、查詢功能。代碼如下：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.10 / 7privatestaticprivatestaticprivatestaticprivatestaticprivatestaticprivatestaticprivatestaticpublicstatic、String URL= "jdbc:mysql:/localhost:3306/test"String DRIVER= "com.mysql.jdbc.Driver"String USE

4、R= "root"String PASSWORD= "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!" ); cat

5、ch (SQLException e) System.out.println( "Connection DB failed!"); catch (ClassNotFoundException e) System.out.println( "Driver:" +DRIVER+ " can't find!");public static void closeConnection() try conn.close();conn= null ; catch (SQLException e) e.printStackTrace();pu

6、blic static ResultSet executeQuery(String sql) try stmt=conn.createStatement(); rs=stmt.executeQuery(sql);return rs; catch (SQLException e) 3.54.55.return null ;9.

7、60.public static void main(String args) 61./getConnection();、編寫頁面在頁面中添加必須要有的文本框，以及兩個按鈕。其中必不可少的是在文本框輸入文本時才出現(xiàn)的一個隱藏DIV。代碼如下：1. <% page language ="java" contentType ="text/html; charset=UTF-8"2. pageEncoding ="UTF-8"% >3. <!DOCTYPE html PUBLIC "-/W3C

8、/DTD XHTML 1.0 Transitional/EN" "/TR/ xhtml1/DTD/xhtml1-transitional.dtd" >4.4. <html xmlns ="/1999/xhtml" >5. <head>6. <title> Google </title>7. <%8. response.setHeader("Cache-Control","no-store&qu

9、ot;);9. response.setHeader("Pragrma","no-cache");10. response.setDateHeader("Expires",0);11. %>12. <link type ="text/css" href="css/autoComplete.css" rel ="stylesheet" />13. <script type ="text/javascript" src ="s

10、cripts/autoComplete.js" ></script>14. </head>15. <body onload ="setPosition($('txtKeyword')" >16. <div id="img" ><img src ="images/google.jpg" ></img></div>17. vform id ="form1" >18. <div id="

11、;input" ><input type ="text" onkeydown ="if(GetKeyCode(event)=13)form_submit()" onkeyup ="GetSuggest(this.value,event);updown(event)" autocomplete ="off" id ="txtKeyword" />19. </div>20. <div id="dSuggest"></div

12、>21. <div id="button" >22. vinput id="submit"type="submit"value="Google搜索"onclick ="alert('NowSearch.')"/>23. <input id="submit"type="submit"value="手氣不錯"onclick ="alert('NowSearch.')&q

13、uot;/>24. </div>25. </form>26. </body>27. </html>3、實現(xiàn) Servlet編寫Servlet來實現(xiàn)將頁面的數(shù)據(jù)拼成 Sql語句并傳到ConnectionManager類，將返回的結(jié)果輸出的頁面。（需要注意的是，這里我們采用得是直接輸出jsp代碼，所以要為DIV加上id屬性以便在CSS中控制樣式，以及相關(guān)事件以便于在js中控制效果。）代碼如下：1. package com.ncs.servlet;2.2. importjava.io.IOException;3. importjava.io.Pr

14、intWriter;4. importjava.sql.ResultSet;5. importjava.sql.SQLException;7.6. importjavax.servlet.ServletException;7. importjavax.servlet.http.HttpServlet;8. import javax.servlet.http.HttpServletRequest;9. import javax.servlet.http.HttpServletResponse;12.10. import mon.ConnectionManager;14.11. public cl

15、ass suggest extends HttpServlet 16.12. Override13. protected void doGet(HttpServletRequest req, HttpServletResponse resp)14. throws ServletException, lOException 2.63.req.se

16、tCharacterEncoding( "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

17、(): "unknown"String sql= "select name from tbl_ajax_search where name like '" +paramValue+ "%'" System.out.println( "sql=" +sql);ConnectionManager.getConnection();ResultSet rs=ConnectionManager.executeQuery(sql);StringBuffer sb= new StringBuffer();sb.a

18、ppend("v?xml version="1.0" encoding="UTF-8"?>")/ .appe nd("<data>");sb.append( "<ul id="sug">");int pos= 0;try while (rs.next()System.out.println( "pos=" +pos);sb.append( "<li onclick="form_submit()&quo

19、t; onmouseover="myMouseOver(”).append(pos).append( ");" onmouseOut="myMouseOut(" ) .append(pos).append( ");">").append(rs.getString( 1)+"</li>");/sb.append("<item>")/.append(rs.getString(1)/ .append("</item>");pos+;sb.append( "</ul>");int posi = sb.toString().indexOf( "onmouseover");System.out.println( "posi=" +posi);if(posi=- 1)System.out.println( "no content

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論