zoukankan      html  css  js  c++  java
  • 使用Ajax以及CSS+DIV高仿谷歌搜索(附源码下载)

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

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

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

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

    1、准备后台以及数据库,完成数据库(MySql)操作部分。

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

    代码如下:



    2、编写页面

    在页面中添加必须要有的文本框,以及两个按钮。其中必不可少的是在文本框输入文本时才出现的一个隐藏DIV

    代码如下:



    3、实现Servlet

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

    代码如下:



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

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

    最终效果如下图


    后记:关于模仿

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

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

     

  • 相关阅读:
    [TJOI2013]单词 AC 自动机
    NOIP 2017 逛公园 记忆化搜索 最短路 好题
    [BJWC2012]冻结 分层图最短路
    dijkstra STL 堆优化
    [POI2002][HAOI2007]反素数 数论 搜索 好题
    bzoj 2456: mode 思维题 好题
    [SDOI2012]Longge的问题 欧拉反演_欧拉函数
    [JLOI2011]飞行路线 分层图最短路
    页面加速优化
    制作html5微信页面的经验总结。
  • 原文地址:https://www.cnblogs.com/beijiguangyong/p/2546891.html
Copyright © 2011-2022 走看看