站内搜索举例

上图是京东，比如在京东输入编程，会出来和编程相关的一些东西，那么这个是对ajax的一个非常典型的应用

首先，我们要做出这样一个搜索框，要求开始的时候不显示，一旦输入内容就开始显示相关的，而且它显示之后别的地方没有布局改变，说明它的位置是绝对的

input是搜索框的代码，下面的div是用来显示我们搜索时的一些相关内容。

其中display：none表示开始不显示只有当搜索的时候，才设置成显示，position：absolute表示位置是绝对的，当他设置位置是绝对的时候，要给其父div设置成position：relative，位置是相对的，然后z-index如果不设置的话他的搜索相关的内容的div将会在被页面覆盖，就是这种情况

这个就是搜索框的一些基本情况，下面分析一下这个项目的逻辑情况

逻辑分析

这个搜索框在head.jsp中，只要我们输入内容，他就会自动调用onkeyup事件传递过去当前对象，这个事件是一个post访问，访问SearchWordServlet并传递过去当前的我们搜索框的内容，一直传到dao层，dao层用输入的内容进行pname的模糊查询，只查询pname这一列，封装到一个list集合，然后返回给SearchWordServlet，他把这个list使用json工具类转变成json写到客户端，客户端获取到当前根据输入查询到的模糊查询json数组，遍历它，并把每一个都添加到<div></div>中间，然后所有的div连在一起，将输入显示div的html设置成这个组合在一起的所有div就ok了。

具体代码分析

搜索框代码

这个代码核心就是键盘按下之后执行searchWord方法

该方法获取搜索框中的内容word，并且访问SearchWordServlet传递给它word参数，就是当前的搜索框信息

通过ProductListService调用findAllProductByWord（word），然后调用ProductListDao的findAllProductByWord（word）

这个查询并不是查询查询所有的商品信息，而是只查询一列，商品信息列，所以可以使用ColumnListHandler,返回List<Object>,这个查询应该是模糊查询，然后显示6条即可，太多就不太好，查找的这个List<Object>存储的是查询到的商品名称一级一级返回给SearchWordServlet，在SearchWordServlet使用json工具将其转成json串，返回给客户端

上图标红的地方就是使用json处理工具。能够处理将一个集合或者数组转成json串，上面工具的使用都是固定的

json的转换插件是通过java的一些工具，直接将java对象或集合转换成json字符串。

常用的json转换工具有如下几种：

1）jsonlib

2）Gson：google

3）fastjson：阿里巴巴

jsonlib需要导入的包为

gson需要导入的包

数据写到客户端之后，$.post的响应函数会运行

这个函数中参数data就是服务器端返回的数据，这个是一个json类型的集合，如果它不是空的（就是查到了）我们可以遍历它，把他的存储的每项pname，放到<div>data[i]</div>中间，然后遍历下来组成一个由很多<div>组成的content，然后将显示查询结果的div内部设置成这个content（$("#showDiv").html(content)）,然后设置成显示（$("#showDiv").css(“display”，“block”)）

当然为了一些其它的效果我们填了一些样式和事件，比如onmouseover，鼠标移入的时候高亮显示，onmouseout鼠标移除的时候不亮显示，cursor：pointer是鼠标放到这个div上时，鼠标编程小手，onclick是鼠标点击这个div的时候，将其点击的这个div的内容放到搜索框中，并且不再显示

我们要获取搜索框对象$("#search").val的内容设置为<div>中间的pname<div>中间的pname，这个pname不是value而是html，所以要获取到$(obj).html()

自此所有功能和操作就全部完成了