微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

使用Ajax以及CSS+DIV高仿谷歌搜索附源码下载 .

分类：Ajax作者：编程之家

在使用Google搜索或者是Baidu搜索的时候，在输入搜索关键字的同时，会自动弹出匹配的其他关键字的提示，全心全意为人民服务的精神在这里崭露无遗。这种利用Ajax技术实现输入提示和自动完成的功能是Google率先推出的，然后在其他的Web应用中被广泛的应用。利用Ajax实现部分页面刷新或者自动完成会使得用户体验绝大大提升。

技术永远是为用户服务的（无论是性能方面还是美观方面），脱离了用户就没有技术的发展，或者说只有用户才能促进技术的进步。

在掌握了Ajax原理之后我们也可以模仿谷歌，来实现一个搜索引擎的小Demo。

在实现的过程中主要运用的是Ajax技术，CSS+DIV布局，Servlet+JavaBean，还有数据库的基本知识等等。下面大致的描述一下实现的步骤，请大家跟随文字来共同完成我们的Google。有兴趣的朋友可以点击这里下载源码（实现仓促，如有不足之处请谅解）

1、准备后台以及数据库，完成数据库（MysqL）操作部分。

这里很简单，首先编写ConnectionManager类，来实现对数据库的连接、查询功能。

代码如下：

[java] view plain copy print ?
  1. packagecom.ncs.common;
  3. importjava.sql.Connection;
  4. importjava.sql.DriverManager;
  5. importjava.sql.ResultSet;
  6. importjava.sql.sqlException;
  7. importjava.sql.Statement;
  9. publicclassConnectionManager{
  11. privatestaticStringURL="jdbc:MysqL://localhost:3306/test";
  12. privatestaticStringDRIVER="com.MysqL.jdbc.Driver";
  13. privatestaticStringUSER="root";
  14. privatestaticStringPASSWORD="123456";
  15. privatestaticConnectionconn=null;
  16. privatestaticStatementstmt=null;
  17. privatestaticResultSetrs=null;
  19. publicstaticvoidgetConnection(){
  21. try{
  22. Class.forName(DRIVER);
  23. try{
  24. conn=DriverManager.getConnection(URL,USER,PASSWORD);
  25. System.out.println("SuccessfullyconnectedtoMysqLDB!");
  26. }catch(sqlExceptione){
  27. System.out.println("ConnectionDBFailed!");
  28. }
  29. }catch(ClassNotFoundExceptione){
  30. System.out.println("Driver:"+DRIVER+"can'tfind!");
  31. }
  33. }
  36. publicstaticvoidcloseConnection(){
  38. try{
  39. conn.close();
  40. conn=null;
  41. }catch(sqlExceptione){
  43. e.printstacktrace();
  44. }
  45. }
  48. publicstaticResultSetexecuteQuery(Stringsql){
  49. try{
  50. stmt=conn.createStatement();
  51. rs=stmt.executeQuery(sql);
  52. returnrs;
  54. }catch(sqlExceptione){
  55. returnnull;
  56. }
  58. }
  60. publicstaticvoidmain(String[]args){
  61. //getConnection();
  62. }
  64. }
package com.ncs.common;

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,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+" can't 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。

代码如下：

[html] view plain copy print ?
  1. <%@pagelanguage="java"contentType="text/html;charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <htmlxmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7. <title>Google</title>
  8. <%
  9. response.setHeader("Cache-Control","no-store");
  10. response.setHeader("Pragrma","no-cache");
  11. response.setDateHeader("Expires",0);
  12. %>
  13. <linktype="text/css"href="css/autoComplete.css"rel="stylesheet"/>
  14. <scripttype="text/javascript"src="scripts/autoComplete.js"></script>
  15. </head>
  16. <bodyonload="setPosition($('txtKeyword'))">
  17. <divid="img"><imgsrc="images/google.jpg"></img></div>
  18. <formid="form1">
  19. <divid="input"><inputtype="text"onkeydown="if(GetKeyCode(event)==13)form_submit()"onkeyup="GetSuggest(this.value,event);updown(event)"autocomplete="off"id="txtKeyword"/>
  20. </div>
  21. <divid="dSuggest"></div>
  22. <divid="button">
  23. <inputid="submit"type="submit"value="Google搜索"onclick="alert('NowSearch...')"/>
  24. <inputid="submit"type="submit"value="手气不错"onclick="alert('NowSearch...')"/>
  25. </div>
  26. </form>
  27. </body>
  28. </html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Google</title>
    <%
	    response.setHeader("Cache-Control","no-store"); 
	    response.setHeader("Pragrma","no-cache"); 
	    response.setDateHeader("Expires",0); 
    %>
    <link type="text/css" href="css/autoComplete.css" rel="stylesheet"/>
    <script type="text/javascript" src="scripts/autoComplete.js"></script>
</head>
<body onload="setPosition($('txtKeyword'))">
	<div id="img"><img src="images/google.jpg"></img></div>
    <form id="form1">
    <div id="input"><input type="text" onkeydown="if(GetKeyCode(event)==13)form_submit()" onkeyup="GetSuggest(this.value,event);updown(event)" autocomplete="off" id="txtKeyword" />
    </div>
    <div id="dSuggest"></div>
    <div id="button">
    <input id="submit" type="submit"  value="Google 搜索" onclick="alert('Now Search ...')" /> 
    <input id="submit" type="submit"  value="手气不错" onclick="alert('Now Search ...')" />
    </div>
    </form>
</body>
</html>


3、实现Servlet

编写Servlet来实现将页面的数据拼成sql语句并传到ConnectionManager类，将返回的结果输出的页面。（需要注意的是，这里我们采用得是直接输出jsp代码，所以要为DIV加上id属性以便在CSS中控制样式，以及相关事件以便于在js中控制效果。）

代码如下：

[java] view plain copy print ?
  1. packagecom.ncs.servlet;
  3. importjava.io.IOException;
  4. importjava.io.PrintWriter;
  5. importjava.sql.ResultSet;
  6. importjava.sql.sqlException;
  8. importjavax.servlet.servletexception;
  9. importjavax.servlet.http.HttpServlet;
  10. importjavax.servlet.http.HttpServletRequest;
  11. importjavax.servlet.http.HttpServletResponse;
  13. importcom.ncs.common.ConnectionManager;
  15. publicclasssuggestextendsHttpServlet{
  17. @Override
  18. protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)
  19. throwsservletexception,IOException{
  20. req.setCharacterEncoding("UTF-8");
  21. //resp.setContentType("text/xml;charset=utf-8");
  22. System.out.println("EnterServletgetmethod..");
  23. PrintWriterout=resp.getWriter();
  24. Stringparam=(String)req.getParameter("id");
  25. StringparamValue=param.trim().length()>0?param.trim():"unkNown";
  26. Stringsql="selectnamefromtbl_ajax_searchwherenamelike'"+paramValue+"%'";
  27. System.out.println("sql="+sql);
  28. ConnectionManager.getConnection();
  29. ResultSetrs=ConnectionManager.executeQuery(sql);
  30. StringBuffersb=newStringBuffer();
  31. //sb.append("<?xmlversion=\"1.0\"encoding=\"UTF-8\"?>")
  32. //.append("<data>");
  33. sb.append("<ulid=\"sug\">");
  34. intpos=0;
  35. try{
  37. while(rs.next()){
  38. System.out.println("pos="+pos);
  39. sb.append("<lionclick=\"form_submit()\"onmouSEOver=\"myMouSEOver(")
  40. .append(pos)
  41. .append(");\"onmouSEOut=\"myMouSEOut(")
  42. .append(pos)
  43. .append(");\">")
  44. .append(rs.getString(1)+"</li>");
  45. //sb.append("<item>")
  46. //.append(rs.getString(1))
  47. //.append("</item>");
  48. pos++;
  49. }
  51. sb.append("</ul>");
  53. intposi=sb.toString().indexOf("onmouSEOver");
  54. System.out.println("posi="+posi);
  55. if(posi==-1){
  56. System.out.println("nocontentfound.");
  57. out.write("");
  58. }else{
  59. System.out.println(sb.toString());
  60. out.write(sb.toString());
  61. }
  62. }catch(sqlExceptione){
  64. e.printstacktrace();
  65. }
  68. }
  70. @Override
  71. protectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)
  72. throwsservletexception,IOException{
  73. //TodoAuto-generatedmethodstub
  74. doGet(req,resp);
  75. }
  76. }
package com.ncs.servlet;

import java.io.IOException;
import java.io.PrintWriter;
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;

import com.ncs.common.ConnectionManager;

public class suggest extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req,HttpServletResponse resp)
			throws servletexception,IOException {
		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);
		ConnectionManager.getConnection();
		ResultSet rs=ConnectionManager.executeQuery(sql);
		StringBuffer sb=new StringBuffer();
		//sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>")
		 // .append("<data>");
		sb.append("<ul id=\"sug\">");
		int pos=0;
		try {
			
			while(rs.next()){	
				System.out.println("pos="+pos);
					sb.append("<li onclick=\"form_submit()\" 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 found.");
				out.write("");
			}else{
				System.out.println(sb.toString());
				out.write(sb.toString());
			}
		} catch (sqlException e) {
			
			e.printstacktrace();
		}


	}

	@Override
	protected void doPost(HttpServletRequest req,IOException {
		// Todo Auto-generated method stub
		doGet(req,resp);
	}
}


4、仿照Google调整页面的布局

这里重点就是调整隐藏的DIV以及按钮的样式。

最终效果如下图


后记：关于模仿

自呱呱坠地我们就开始了自己一生的学习，在学习的过程中有着必不缺少的一个步骤：模仿。我们的学习大多是从模仿开始的，无论是模仿父母的声音牙牙学语，还是模仿大人走路的姿势蹒跚学步；无论是模仿书本上的文字一笔一画，还是模仿课文的结构字斟句酌。这都是开始学习的第一个过程——模仿。当然随着模仿的深入我们掌握了原理就可以开始下一个阶段的学习：使用和发挥。使用和发挥有赖于模仿的功力，只有初期模仿的到位，模仿的逼真，才能有后期的漂亮运用与灵活发挥。

我们的学习之路：模仿——使用——发挥

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot