使用ajax+servlet實現搜尋框智慧提示
阿新 • • 發佈：2019-01-12
使用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" 其中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;i<size;i++){ var 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"; };