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

下載本文檔

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

文檔簡(jiǎn)介

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

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

4、Connection conn= null ;Statement stmt= null ;ResultSet rs= null ;void getConnection()try Class.forName(DRIVER);try catch (ClassNotFoundException e) public static void closeConnection() try conn.close();conn= null ; catch (SQLException e) e.printStackTrace();public static ResultSet executeQuery(Strin

5、g sql) try stmt=conn.createStatement(); rs=stmt.executeQuery(sql);return rs; catch (SQLException e) 3.54.55.return null ;9.60.public static void main(String args)

6、61./getConnection();、編寫頁面在頁面中添加必須要有的文本框，以及兩個(gè)按鈕。其中必不可少的是在文本框輸入文本時(shí)才出現(xiàn)的一個(gè)隱藏DIV。代碼如下：1. <% page language ="java" contentType ="text/html; charset=UTF-8"2. pageEncoding ="UTF-8"% >3. <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" &qu

7、ot; xhtml1/DTD/xhtml1-transitional.dtd" >4.4. <html xmlns ="" >5. <head>6. <title> Google </title>7. <%8. response.setHeader("Cache-Control","no-store");9. response.setHeader("Pragrma","no-cache");10. response.setDa

8、teHeader("Expires",0);11. %>12. <link type ="text/css" href="css/autoComplete.css" rel ="stylesheet" />13. <script type ="text/javascript" src ="scripts/autoComplete.js" ></script>14. </head>15. <body onload =&

9、quot;setPosition($('txtKeyword')" >16. <div id="img" ><img src ="images/google.jpg" ></img></div>17. vform id ="form1" >18. <div id="input" ><input type ="text" onkeydown ="if(GetKeyCode(event)

10、=13)form_submit()" onkeyup ="GetSuggest(this.value,event);updown(event)" autocomplete ="off" id ="txtKeyword" />19. </div>20. <div id="dSuggest"></div>21. <div id="button" >22. vinput id="submit"type="su

11、bmit"value="Google搜索"onclick ="alert('NowSearch.')"/>23. <input id="submit"type="submit"value="手氣不錯(cuò)"onclick ="alert('NowSearch.')"/>24. </div>25. </form>26. </body>27. </html>3、實(shí)現(xiàn) Servle

12、t編寫Servlet來實(shí)現(xiàn)將頁面的數(shù)據(jù)拼成 Sql語句并傳到ConnectionManager類，將返回的結(jié)果輸出的頁面。（需要注意的是，這里我們采用得是直接輸出jsp代碼，所以要為DIV加上id屬性以便在CSS中控制樣式，以及相關(guān)事件以便于在js中控制效果。）代碼如下：..7. importjavax.servlet.http.HttpServlet;8. import javax.servlet.http.HttpServletRequest;9. import javax.servlet.http.HttpServletResponse;1

13、. public class suggest extends HttpServlet 16.12. Override13. protected void doGet(HttpServletRequest req, HttpServletResponse resp)14. throws ServletException, lOException

14、2.63.req.setCharacterEncoding( "UTF-8");/ resp.setContentType("text/xml;charset=utf-8");Printwriter out=resp.getWriter();String param=(String)req.getParameter( "id");String paramValue=param.trim().length()> 0?param.trim(): "unknown"ConnectionManager.getConn

15、ection();ResultSet rs=ConnectionManager.executeQuery(sql);StringBuffer sb= new StringBuffer();sb.append("v?xml version="1.0" encoding="UTF-8"?>")/ .appe nd("<data>");sb.append( "<ul id="sug">");int pos= 0;try while (rs.next()

16、sb.append( "<li onclick="form_submit()" onmouseover="myMouseOver(”).append(pos).append( ");" onmouseOut="myMouseOut(" ) .append(pos).append( ");">").append(rs.getString( 1)+"</li>");/sb.append("<item>")/.app

17、end(rs.getString(1)/ .append("</item>");pos+;sb.append( "</ul>");int posi = sb.toString().indexOf( "onmouseover");if(posi=- 1)out.write( ""); else out.write(sb.toString(); catch (SQLException e) 64. e.printStackTrace();65. 66.67.66. 69.67. Override68. protected void doPost(HttpServletRequest req, HttpServletResponse resp)69. throws ServletException, IOException 70. / TODO Auto-generated method stub71. doGet(req,resp);72. 73. 4、仿照Google調(diào)整頁面的布局

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論