使用ajax+servlet实现搜索框智能提示

使用ajax+servlet实现搜索框智能提示

今天主要写的是使用ajax+servlet仿百度的搜索智能提示,不喜勿喷。

首先我们先简单新建一个web工程,并新建一个search.jsp文件

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/search.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/search.js">script>
<title>异步搜索:模拟百度title>
head>
<body>
    <div id="mydiv" >
        <input type="text" size="50" id="keyword" onkeyup="getMoreInfo()" onblur="keywordBlur()" onfocus="getMoreInfo()"/>
        <input type="button" value="百度一下" width="50"/>
        
        <div id="popInfo">
            <table id="info_table">
                <tbody id="info_table_body">

                tbody>
            table>
        div>
    div>
body>

其中onkeyup 的作用是:按键被放开的时候所触发的事件
onblur :对象失去焦点的时候触发的事件,(此处是输入框失去焦点的时候触发)
onfocus: 对象得到焦点的时候触发的事件

第二我们开始写js了,命名为search.js
这里我们要提到,前台和后台之间的交互,是通过一个叫xmlHttpRequest来进行两者信息的传递的(此处比较源生)

  • 什么是 XMLHttpRequest 对象?

    XMLHttpRequest 对象用于在后台与服务器交换数据。
    XMLHttpRequest 对象是开发者的梦想,因为您能够:
    在不重新加载页面的情况下更新网页
    在页面已加载后从服务器请求数据
    在页面已加载后从服务器接收数据
    在后台向服务器发送数据
    它有5中状态 :0(未初始化) 1(载入) 2(载入完成) 3(交互) 4(完成)
    咱们只关心4这个状态

    获取xmlHttpRequest 对象

    var createXmlHttp = function(){
     var xmlHttp;
     if(window.XMLHttpRequest){
        xmlHttp = new XmlHttpRequest();
        }else if(window.ActiveXObject){
        xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
     if(!xmlHttp){
        xmlHttp = new ActiveXObject("Msxml2.XMLHttp");
    }
    }
    }
  • 第三,我们需要将我们在输入框输入的内容传递到后台,此处需要获取这个输入的内容,并使用xmlHttp将内容传递过去,

    //此处定义一个全局变量
    var xmlHttp;
    var getInfo = function(){
        //首先获取输入框输入的内容
        var info = document.getElementById("keyword");
        if(content.value==""){
            return;
        }
        //创建xmlHttpRequest;
        xmlHttp = createXmlHttp();
        //创建url
        var URL = “/search?keyword=”+escape(content.value);
        //建立连接
        /**
        *第三个参数为true代表async,不用等待来自服务器的响应
        */
        xmlHttp.open(“GET”,URL,true);
        /**
         * xmlHttp绑定回调方法:
         * 会在xmlHttp的状态改变的时候被调用 0-4
         * callback 是回调函数名
         */
        xmlHttp.onreadystatechange = callback;
        xmlHttp.send(null);
    
    }
  • 第四:回调函数

    var callback = function(){
       if(xmlHttp.readyState == 4){
               /**
               * 200表示成功
               * 404表示资源未找到
               *500表示服务器错误
               */
            if(xmlHttp.status == 200){
                //接收返回的数据,(格式为文本:json也是文本格式)
                var response = xmlHttp.responseText;
                //解析json
                var jsonParseResp=evel("(+response+)");
                //将解析好的json动态显示到前台页面
                setInfo(jsonParseResp);
          }
        }
       }
  • 第五:动态的将后台返回的数据显示在前台页面

    var setInfo = function (content){
        var size  = content.length;
        for(var i=0;ivar nodeText = content[i];
            var tr  = document.createElement("tr");
            var td = document.createElement("td");
            td.setAttribute("border", "1");
        td.setAttribute("bgcolor", "FFFAFA");
        //鼠标滑过的时候的样式
        td.onmouseover = function(){
            this.className="mouseover";
            //鼠标滑过的时候,输入框中就显示哪个值
            if(td.innerHTML!=null)
                document.getElementById("keyword").value = this.innerHTML;
        };
        //鼠标出去的时候的样式
        td.onmouseout = function(){
            this.className = "mouseout";
        };
        /**
         * 此处绑定一个onclick方法,当点击到这个td的时候,
         * 输入框中就会显示这个数据
         */
        td.onmousedown = function(){
            document.getElementById("keyword").value = this.innerHTML;
        };
    
        //创建文本接点
        var text = document.createTextNode(nextNode);
        td.appendChild(text);
        tr.appendChild(td);
        document.getElementById("info_table_body").appendChild(tr);
    
        } 
    }
  • 第六:清空数据

    //清空数据
    var clearInfo = function(){
    var infoTableBody = document.getElementById("info_table_body");
    //子节点的长度
    var size = infoTableBody.childNodes.length;
    for(var i = size-1;i>=0;i--){
        infoTableBody.removeChild(infoTableBody.childNodes[i]);
    }
    document.getElementById("popInfo").style.border = "none";
    };
  • 第七:当输入框失去焦点的时候,列表内容不显示

    var keywordBlur = function(){
        clearInfo();
    
    };
  • 第九

  • 第八

         /**
         * 设置显示关联信息的位置
         */
    var setLocation = function(){
    //关联显示的位置要和输入框位置一质
    var content = document.getElementById("keyword");
    var width = content.offsetWidth;//输入框宽度
    var left = content["offsetLeft"];//距离左边框的距离
    var top = content["offsetTop"]+content.offsetHeight;
    //获得显示数据的div
    var popInfo = document.getElementById("popInfo");
    popInfo.style.border="black 1px solid";
    popInfo.style.left = left+"px";
    popInfo.style.top = top +"px";
    popInfo.style.width=width+"px";
    document.getElementById("info_table").style.width = width+"px";
    };

end

你可能感兴趣的:(前端)