利用無刷新技術(shù)智能變換搜索框的提示，同百度搜索
效果圖
其基本原理：
1.給搜索框編寫js綁定事件onkeyup(鍵盤輸入時)、onfocus(當(dāng)鼠標(biāo)點(diǎn)擊搜索框外的時候清空提示)
2.首先獲得用戶輸入、之后將獲得的數(shù)據(jù)傳給服務(wù)器，服務(wù)器將數(shù)據(jù)傳給后臺，后臺獲取服務(wù)器傳來的數(shù)據(jù)進(jìn)行處理，得到關(guān)聯(lián)數(shù)據(jù)，向前端返回json格式，前端通過回調(diào)函數(shù)，將返回來的json解析成文本，將文本傳輸?shù)剿阉骺蛳路降恼故敬?/p>
如下為支持json的jar包
search.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>ajax搜索</title><script type="text/javascript">//獲得更多關(guān)聯(lián)信息的函數(shù)function getMore(){ var xmlHttp; //首先獲得用戶的輸入 var content = document.getElementById("keyword"); if(content.value==""){ keywordBlur();//執(zhí)行一下清空方法，使搜索框在無數(shù)據(jù)的時候，下方殘留數(shù)據(jù)也動態(tài)清空 return; } //alert(content.value); //要給服務(wù)器發(fā)送用戶輸入的內(nèi)容，要創(chuàng)建對象,叫XmlHttp對象 //xmlHttp=獲得XmlHttp對象 xmlHttp=CreatXMLHttp(); //alert(xmlHttp); //要給服務(wù)器發(fā)送數(shù)據(jù) var url="serch?keyword="+escape(content.value); //如果不用escape這個函數(shù)轉(zhuǎn)化一下的話，傳中文會有問題 //true表示javascript的腳本會在send()方法之后繼續(xù)執(zhí)行，而不會等待來自服務(wù)器的相應(yīng) xmlHttp.open("GET",url,true); //xmlHttp綁定一個回調(diào)方法去接受服務(wù)器傳來的相應(yīng),會在xmlHttp狀態(tài)改變的時候被調(diào)用 //xmlHttp有0~4的狀態(tài)，只關(guān)心4的方法 //4為complete狀態(tài)，表示交互完成，當(dāng)交互完成時才會調(diào)用回調(diào)方法 xmlHttp.onreadystatechange=callback; xmlHttp.send(null);//send里面發(fā)送的是內(nèi)容體，但參數(shù)在URL里已經(jīng)都寫完了 //回調(diào)函數(shù)==!!注意 這里回調(diào)方法要在方法內(nèi)創(chuàng)建，因為創(chuàng)建的xmlHttp對象不是全局變量 //是在getMore()方法里創(chuàng)建的，可以將變量提取出來，變成全局變量 function callback(){ if (xmlHttp.readyState==4){ //200代表服務(wù)器相應(yīng)成功。。。404代表資源未找到。。500服務(wù)器內(nèi)部錯誤 if(xmlHttp.status==200){ //交互成功，獲得相應(yīng)的數(shù)據(jù)，是文本格式 var result=xmlHttp.responseText; //解析json格式 var json=eval("("+result+")");//要在兩邊加個小括號，js才能認(rèn)識 //獲得數(shù)據(jù)之后就可以開始展示了。在輸入框的下邊展示 setContent(json); } } } //設(shè)置關(guān)聯(lián)數(shù)據(jù)展示,參數(shù)代表的是服務(wù)器傳遞過來的關(guān)聯(lián)數(shù)據(jù) function setContent(contents){ //setLocation();//設(shè)置跟輸入框一樣寬度 keywordBlur();//在每次得到值之前先清空一下之前的殘留數(shù)據(jù) var size=contents.length;//根據(jù)關(guān)聯(lián)的數(shù)據(jù)長度，來生成多少<tr> //設(shè)置內(nèi)容 for(var i=0;i<size;i++){ //不用appendChild()方法是因為不同瀏覽器可能不兼容該方法 var nextNode=contents[i];//代表json格式的第i個元素 var newRow=content_table_body.insertRow();//創(chuàng)建行 var newCell=newRow.insertCell();//創(chuàng)建單元格 newCell.innerHTML=contents[i];//將數(shù)據(jù)賦值給單元格 } }}//獲得XmlHttp對象function CreatXMLHttp(){ //要考慮不同瀏覽器的寫法 //大多數(shù)瀏覽器使用 var xmlHttpReq; if(window.XMLHttpRequest){//火狐 xmlHttpReq=new XMLHttpRequest(); }else{ /* if(window.ActiveXObject){ xmlHttpReq=neww ActiveXObject("Microsoft.XMLHTTP"); //例如ie有很多版本，不一定能創(chuàng)建出來這個對象，所以要添加以下一個判斷 //換一種方法，保證創(chuàng)建 if(!xmlHttp){ xmlHttpReq=new ActiveObject("Msxml2.XMLHTTP"); } } */ //一定要如下格式寫 上述格式火狐IE親測不好使 try { //IE xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try {//IE 瀏覽器 xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { } } } return xmlHttpReq;}//失去焦點(diǎn)的時候function keywordBlur(){ //要獲得body的元素長度，才能知道要遍歷多少次 var contentTableBody=document.getElementById("content_table_body"); var size=contentTableBody.childNodes.length; //因為是刪除子節(jié)點(diǎn)，所以是從后往前才能刪，同二叉樹，刪除子節(jié)點(diǎn) for(var i=size-1;i>=0;i--){ contentTableBody.removeChild(contentTableBody.childNodes[i]); } document.getElementById("popDiv").style.border="none"; }</script><style type="text/css">/* #mydiv{ position: absolute; left:30%; top:50%; margin-left: 100px;} */.mouseOver{ background: #708090; color: #FFFAFA;}.mouseOut{ background: #FFFAFA; color: #000000;}</style></head><body> <div id="mydiv"> <!-- 輸入框 --> <input type="text" id="keyword" size="50" onblur="keywordBlur()" onkeyup="getMore()" onfocus="getMore()"/> <input type="button" value="百度一下" wise="50px"> <!-- 下面是內(nèi)容展示的區(qū)域 --> <div id="popDiv"> <table id="contentTable" bgcolor="#FFFAFA" border="0" cellpadding="0" cellspacing="0"> <tbody id="content_table_body"> <!-- 這個是動態(tài)查詢出來的數(shù)據(jù)顯示的地方 --> <!-- <tr><td>ajax1</td></tr> <tr><td>ajax2</td></tr> <tr><td>ajax3</td></tr> --> </tbody> </table> </div> </div></body></html>
新聞熱點(diǎn)
疑難解答
圖片精選
