Google Suggest(Ajax+JSON+Servlet)

来源:互联网 发布:linux重启mysql命令 编辑:程序博客网 时间:2024/05/16 09:14
系统分析: 当我们上GOOGLE或百度等搜索引擎时候,每当我们在文本框输入内容时候,搜索引擎就会自动给我们提示信息。这极大的方面了我们的查询,并缩短了我们与所要得到的信息之间的距离。它们显示着一些我们可能想要搜索的内容。在本程序中,实现了该功能。
设计与实现:用户的每一次键盘输入都会触发事件。通过AJAX对象适时的发送请求给服务器端程序,系统就会自动生成提示页面。
核心代码: 1.接受用户搜索,并生成提示页面的HTML(googleSuggest.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="prototype1.6.js"></script>
        <script type="text/javascript">
    function search(){
        //keyword为空,将不发送Ajax请求
        if($F("ctx")==""){
            return;         //如果不为空,发送Ajax请求检索
        new Ajax.Request(
            "servlet/SearchServlet",                 method:"post",
                parameters:{keys:$F("ctx")},
                onSuccess:function(req){               
                    var rs = req.responseText.evalJSON();
                    clearTable();//清空列表
                    for(i=0;i<rs.length;i++){
                        var tr = $("td").insertRow($("td").rows.length);                         tr.onmouseover = function(){
                            this.style.backgroundColor="#FFFF66";                         //鼠标移开恢复行背景色
                        tr.onmouseout = function(){
                            this.style.backgroundColor="#FFFFFF";                        var nameTd = tr.insertCell(tr.cells.length);
                        nameTd.innerHTML = rs[i].keywork;                         nameTd.onclick = function(){
                            $("ctx").value = this.innerHTML;
                            clearTable();//清空列表                         var countTd = tr.insertCell(tr.cells.length);
                        countTd.innerHTML = rs[i].count;                 }         );    
    function clearTable(){
        for(j=$("td").rows.length-1;j>=0;j--){
            $("td").deleteRow(j);     } </script>
    </head>
    <body>
        <h1>
            Google Suggest
        </h1>
        <form action="">
           <input type="text" onkeyup="search()" name="ctx" id="ctx">
            <input type="button" value="查询">
            <div id="d1">
                <table id="td">
                </table>
            </div>
        </form>
    </body>
</html>2.接受请求,生成想用的Servlet(从数据库中动态获得数据,并反馈给HTML页面)
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import db.domain.SearchDAO; public class SearchServlet extends HttpServlet {
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/plain;charset=utf-8");
        PrintWriter out = response.getWriter();
        String keyword = request.getParameter("keys");
        SearchDAO searchDao = new SearchDAO();
        List list = searchDao.findLikeKeywork(keyword);
        JSONArray json = JSONArray.fromObject(list);
        out.println(json.toString());
        System.out.println(json.toString());
        out.flush();
        out.close();
    }3.数据库查询(SearchDAO.java)
 public List findLikeProperty(String propertyName, Object value) {
        log.debug("finding Searchxu instance like property: " + propertyName
              + ", value: " + value);
        try {
           String queryString = "from Searchxu as model where model."
                                   + propertyName + " like ?";
           Query queryObject = getSession().createQuery(queryString);
           queryObject.setParameter(0, value+"%");
           return queryObject.list();
        } catch (RuntimeException re) {
           log.error("find like property name failed", re);
           throw re;       } public List findByName(Object name) {
        return findByProperty(NAME, name     }4.Search.java(实体类)和表t_search
private long id;
private String name;
 private long count; drop table t_search;
create table t_search(
id bigint primary key auto_increment,
name varchar(100),
count bigint

转载自http://it.chinawin.net/softwaredev/article-15744.html
0 0
原创粉丝点击