使用AJAX異步通信技術(shù)實(shí)現(xiàn)搜索聯(lián)想和自動(dòng)補(bǔ)全示例
①百度是一個(gè)很典型的代表。在百度的搜索框中輸入相關(guān)信息的時(shí)候，會(huì)有搜索聯(lián)想以及自動(dòng)補(bǔ)全。
②搜索聯(lián)想和自動(dòng)補(bǔ)全：實(shí)際上是為了方便用戶的使用，讓用戶的體驗(yàn)更好。
③搜索聯(lián)想：當(dāng)用戶輸入一些單詞之后，自動(dòng)聯(lián)想出用戶要搜索的信息，給一個(gè)提示。
④自動(dòng)補(bǔ)全：當(dāng)聯(lián)想出一些內(nèi)容之后，用戶點(diǎn)擊某個(gè)聯(lián)想的單詞，然后將這個(gè)單詞自動(dòng)補(bǔ)全到搜索框當(dāng)中。
⑤搜索聯(lián)想和自動(dòng)補(bǔ)全功能，因?yàn)槭琼?yè)面局部刷新效果，所以需要使用ajax請(qǐng)求來(lái)完成。
搜索聯(lián)想，自動(dòng)補(bǔ)全功能的核心實(shí)現(xiàn)原理？①當(dāng)鍵盤事件發(fā)生之后，比如keyup：鍵彈起事件。
②會(huì)發(fā)送ajax請(qǐng)求，請(qǐng)求中提交用戶輸入的搜索內(nèi)容，例如：北京（發(fā)送ajax請(qǐng)求，攜帶“北京”兩個(gè)字）。
③后端接收到ajax請(qǐng)求，接收到“北京”兩個(gè)字，執(zhí)行select語(yǔ)句進(jìn)行模糊查詢，返回查詢結(jié)果
④將查詢結(jié)果封裝成json格式的字符串，將json格式的字符串響應(yīng)到前端。
⑤前端接收到j(luò)son格式的字符串之后，解析這個(gè)json字符串，動(dòng)態(tài)展示頁(yè)面。
（2）頁(yè)面實(shí)現(xiàn)<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>ajax實(shí)現(xiàn)搜索聯(lián)想和自動(dòng)補(bǔ)全功能</title> <style type='text/css'>/* 類選擇器，設(shè)置input標(biāo)簽，text邊框*/.userInput { width: 300px; /*框?qū)?/ height: 25px; /*框高*/ font-size: 20px; /*里面字大小*/ padding-left: 5px; /*內(nèi)補(bǔ)丁，距離框的距離*/}/*類選擇器，設(shè)置div的樣式*/.showDataDiv { width: 309px; /*寬度*/ border: 1px solid lightgray; /*實(shí)線邊框*/ background-color: antiquewhite; /*設(shè)置背景顏色*/ display: none; /*設(shè)置開(kāi)始的div是隱藏的，不顯示*/}/*設(shè)置p標(biāo)簽*/.showDataDiv p { padding-left: 5px; /*內(nèi)補(bǔ)丁，距離框的距離*/ margin-top: 2px; /*外補(bǔ)丁，p距離頂部的寬度*/ margin-bottom: 2px; /*外補(bǔ)丁，p距離低部的寬度*/}/*p標(biāo)簽增加動(dòng)作，點(diǎn)到其中一個(gè)選項(xiàng)變色并變成小手*/.showDataDiv p:hover { cursor: pointer; /*鼠標(biāo)變成小手*/ border: 1px blue solid; /*每選中一行，增加實(shí)線邊框*/ background-color: aliceblue; /*設(shè)置變換的背景色*/} </style></head><body><!--文本框--><input type='text' id='keywords'><!--div盒子--><div class='showDataDiv'><!--<p>北京疫情最新情況</p> <p>北京天氣</p> <p>北京時(shí)間</p> <p>北京人</p>--></div></body></html>頁(yè)面展示
效果展示
①只要keyup鍵盤事件發(fā)生，就發(fā)送Ajax請(qǐng)求，把輸入的數(shù)據(jù)（this.value）發(fā)送出去
②首先就要連接數(shù)據(jù)庫(kù)進(jìn)行模糊查詢，實(shí)現(xiàn)搜索聯(lián)想功能
③然后我們點(diǎn)擊div的<p>標(biāo)簽的內(nèi)容時(shí)，會(huì)進(jìn)行自動(dòng)補(bǔ)全到文本框
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>ajax實(shí)現(xiàn)搜索聯(lián)想和自動(dòng)補(bǔ)全功能</title> <style type='text/css'>/* 類選擇器，設(shè)置input標(biāo)簽，text邊框*/.userInput { width: 300px; /*框?qū)?/ height: 25px; /*框高*/ font-size: 20px; /*里面字大小*/ padding-left: 5px; /*內(nèi)補(bǔ)丁，距離框的距離*/}/*類選擇器，設(shè)置div的樣式*/.showDataDiv { width: 309px; /*寬度*/ border: 1px solid lightgray; /*實(shí)線邊框*/ background-color: antiquewhite; /*設(shè)置背景顏色*/ display: none; /*設(shè)置開(kāi)始的div是隱藏的，不顯示*/}/*設(shè)置p標(biāo)簽*/.showDataDiv p { padding-left: 5px; /*內(nèi)補(bǔ)丁，距離框的距離*/ margin-top: 2px; /*外補(bǔ)丁，p距離頂部的寬度*/ margin-bottom: 2px; /*外補(bǔ)丁，p距離低部的寬度*/}/*p標(biāo)簽增加動(dòng)作，點(diǎn)到其中一個(gè)選項(xiàng)變色并變成小手*/.showDataDiv p:hover { cursor: pointer; /*鼠標(biāo)變成小手*/ border: 1px blue solid; /*每選中一行，增加實(shí)線邊框*/ background-color: aliceblue; /*設(shè)置變換的背景色*/} </style></head><body><script type='text/javascript'> window.onload = function() {document.getElementById('keywords').onkeyup = function(){ if (this.value == '') {// 如果為空串，就把div隱藏起來(lái)// 不然查詢聯(lián)想之后，刪除查詢的內(nèi)容，下面div還是保持原狀document.getElementById('datadiv').style.display = 'none' }else{// 發(fā)送ajax請(qǐng)求// 1. 創(chuàng)建AJAX核心對(duì)象var xmlHttpRequest = new XMLHttpRequest();// 2. 注冊(cè)回調(diào)函數(shù)xmlHttpRequest.onreadystatechange = function() { if (xmlHttpRequest.readyState == 4) {if (xmlHttpRequest.status >= 200 && xmlHttpRequest.status < 300) { // [{'content':'javascript'},{'content':'javaweb'},{'content':'java...'}] var json = JSON.parse(xmlHttpRequest.responseText); // 遍歷數(shù)組 var html = '' for (var i = 0; i < json.length; i++) {// 點(diǎn)擊p標(biāo)簽執(zhí)行一個(gè)回調(diào)函數(shù)，把內(nèi)容顯示到文本框中html += '<p onclick='setInput(\''+json[i].content+'\')'>'+json[i].content+'</p>' } // 讓數(shù)據(jù)在div展示出來(lái) document.getElementById('datadiv').innerHTML = html // 讓div顯示出來(lái) document.getElementById('datadiv').style.display = 'block'} }}// 3. 開(kāi)啟通道，并把數(shù)據(jù)傳過(guò)去，連接數(shù)據(jù)庫(kù)進(jìn)行模糊查詢xmlHttpRequest.open('GET', '/auto_complete/query?_='+new Date().getTime()+'&keywords=' + this.value, true)// 4. 發(fā)送請(qǐng)求xmlHttpRequest.send() }} } // 實(shí)現(xiàn)自動(dòng)補(bǔ)全功能 function setInput(content){// 先把數(shù)據(jù)顯示到文本框中document.getElementById('keywords').value = content// 顯示到文本框后，再次把div進(jìn)行隱藏document.getElementById('datadiv').style.display = 'none' }</script><!--文本框--><input type='text' id='keywords'><!--div盒子--><div class='showDataDiv'> <!--<p>北京疫情最新情況</p> <p>北京天氣</p> <p>北京時(shí)間</p> <p>北京人</p>--></div></body></html>（5）后端代碼實(shí)現(xiàn)主要是根據(jù)發(fā)過(guò)來(lái)的數(shù)據(jù)，連接數(shù)據(jù)庫(kù)進(jìn)行模糊查詢；把查詢結(jié)果拼成JSON格式的字符串
package com.bjpowernode.zl;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.sql.*;import java.util.ArrayList;import java.util.List;@WebServlet('/query')public class QueryServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 獲取用戶輸入的關(guān)鍵字String keywords = request.getParameter('keywords');// jdbc代碼連接數(shù)據(jù)庫(kù)，根據(jù)關(guān)鍵字查詢數(shù)據(jù)庫(kù)，返回?cái)?shù)據(jù)，拼接json格式的字符串Connection conn = null;PreparedStatement ps = null;ResultSet rs = null;// 拼成JSON格式的字符串StringBuilder sb = new StringBuilder();sb.append('[');try { // 注冊(cè)驅(qū)動(dòng) Class.forName('com.mysql.jdbc.Driver'); // 獲取連接 String url = 'jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=UTF-8'; String user = 'root'; String password = '***'; conn = DriverManager.getConnection(url, user, password); String sql = 'select content from t_ajax where content like ?'; // 模糊查詢的時(shí)候，條件不建議使用%開(kāi)始，因?yàn)闀?huì)讓字段上的索引失效，查詢效率降低。 ps = conn.prepareStatement(sql); ps.setString(1, keywords + '%'); rs = ps.executeQuery(); // [{'content':'javascript'},{'content':'javaweb'},{'content':'java...'}] while (rs.next()) {String content = rs.getString('content');sb.append('{\'content\':\''+content+'\'},'); }}catch(Exception e){ e.printStackTrace();} finally { if (conn != null) {try { conn.close();} catch (SQLException e) { e.printStackTrace();} } if (ps != null) {try { ps.close();} catch (SQLException e) { e.printStackTrace();} } if (rs != null) {try { rs.close();} catch (SQLException e) { e.printStackTrace();} }}// 最后會(huì)多一個(gè)逗號(hào)，進(jìn)行截串response.setContentType('text/html;charset=UTF-8');response.getWriter().print(sb.subSequence(0, sb.length() - 1) + ']'); }}（6）動(dòng)圖效果展示
消息:描述:100 Continue服務(wù)器僅接收到部分請(qǐng)求，但是一旦服務(wù)器并沒(méi)有拒絕該請(qǐng)求，客戶端應(yīng)該繼續(xù)發(fā)送其余的請(qǐng)求。101 Switching Protocols服務(wù)器轉(zhuǎn)換協(xié)議：服務(wù)器將遵從客戶的請(qǐng)求轉(zhuǎn)換到另外一種協(xié)議。
2xx: 成功消息:描述:200 OK請(qǐng)求成功（其后是對(duì)GET和POST請(qǐng)求的應(yīng)答文檔。）201 Created請(qǐng)求被創(chuàng)建完成，同時(shí)新的資源被創(chuàng)建。202 Accepted供處理的請(qǐng)求已被接受，但是處理未完成。203 Non-authoritative Information文檔已經(jīng)正常地返回，但一些應(yīng)答頭可能不正確，因?yàn)槭褂玫氖俏臋n的拷貝。204 No Content沒(méi)有新文檔。瀏覽器應(yīng)該繼續(xù)顯示原來(lái)的文檔。如果用戶定期地刷新頁(yè)面，而Servlet可以確定用戶文檔足夠新，這個(gè)狀態(tài)代碼是很有用的。205 Reset Content沒(méi)有新文檔。但瀏覽器應(yīng)該重置它所顯示的內(nèi)容。用來(lái)強(qiáng)制瀏覽器清除表單輸入內(nèi)容。206 Partial Content客戶發(fā)送了一個(gè)帶有Range頭的GET請(qǐng)求，服務(wù)器完成了它。
3xx: 重定向消息:描述:300 Multiple Choices多重選擇。鏈接列表。用戶可以選擇某鏈接到達(dá)目的地。最多允許五個(gè)地址。301 Moved Permanently所請(qǐng)求的頁(yè)面已經(jīng)轉(zhuǎn)移至新的url。302 Found所請(qǐng)求的頁(yè)面已經(jīng)臨時(shí)轉(zhuǎn)移至新的url。303 See Other所請(qǐng)求的頁(yè)面可在別的url下被找到。304 Not Modified未按預(yù)期修改文檔。客戶端有緩沖的文檔并發(fā)出了一個(gè)條件性的請(qǐng)求（一般是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）。服務(wù)器告訴客戶，原來(lái)緩沖的文檔還可以繼續(xù)使用。305 Use Proxy客戶請(qǐng)求的文檔應(yīng)該通過(guò)Location頭所指明的代理服務(wù)器提取。306 Unused此代碼被用于前一版本。目前已不再使用，但是代碼依然被保留。307 Temporary Redirect被請(qǐng)求的頁(yè)面已經(jīng)臨時(shí)移至新的url。
4xx: 客戶端錯(cuò)誤消息:描述:400 Bad Request服務(wù)器未能理解請(qǐng)求。401 Unauthorized被請(qǐng)求的頁(yè)面需要用戶名和密碼。402 Payment Required此代碼尚無(wú)法使用。403 Forbidden對(duì)被請(qǐng)求頁(yè)面的訪問(wèn)被禁止。404 Not Found服務(wù)器無(wú)法找到被請(qǐng)求的頁(yè)面。405 Method Not Allowed請(qǐng)求中指定的方法不被允許。406 Not Acceptable服務(wù)器生成的響應(yīng)無(wú)法被客戶端所接受。407 Proxy Authentication Required用戶必須首先使用代理服務(wù)器進(jìn)行驗(yàn)證，這樣請(qǐng)求才會(huì)被處理。408 Request Timeout請(qǐng)求超出了服務(wù)器的等待時(shí)間。409 Conflict由于沖突，請(qǐng)求無(wú)法被完成。410 Gone被請(qǐng)求的頁(yè)面不可用。411 Length Required"Content-Length" 未被定義。如果無(wú)此內(nèi)容，服務(wù)器不會(huì)接受請(qǐng)求。412 Precondition Failed請(qǐng)求中的前提條件被服務(wù)器評(píng)估為失敗。413 Request Entity Too Large由于所請(qǐng)求的實(shí)體的太大，服務(wù)器不會(huì)接受請(qǐng)求。414 Request-url Too Long由于url太長(zhǎng)，服務(wù)器不會(huì)接受請(qǐng)求。當(dāng)post請(qǐng)求被轉(zhuǎn)換為帶有很長(zhǎng)的查詢信息的get請(qǐng)求時(shí)，就會(huì)發(fā)生這種情況。415 Unsupported Media Type由于媒介類型不被支持，服務(wù)器不會(huì)接受請(qǐng)求。416服務(wù)器不能滿足客戶在請(qǐng)求中指定的Range頭。417 Expectation Failed
5xx: 服務(wù)器錯(cuò)誤消息:描述:500 Internal Server Error請(qǐng)求未完成。服務(wù)器遇到不可預(yù)知的情況。501 Not Implemented請(qǐng)求未完成。服務(wù)器不支持所請(qǐng)求的功能。502 Bad Gateway請(qǐng)求未完成。服務(wù)器從上游服務(wù)器收到一個(gè)無(wú)效的響應(yīng)。503 Service Unavailable請(qǐng)求未完成。服務(wù)器臨時(shí)過(guò)載或當(dāng)機(jī)。504 Gateway Timeout網(wǎng)關(guān)超時(shí)。505 HTTP Version Not Supported服務(wù)器不支持請(qǐng)求中指明的HTTP協(xié)議版本。
到此這篇關(guān)于使用AJAX異步通信技術(shù)實(shí)現(xiàn)搜索聯(lián)想和自動(dòng)補(bǔ)全示例的文章就介紹到這了,更多相關(guān)AJAX實(shí)現(xiàn)搜索聯(lián)想和自動(dòng)補(bǔ)全內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
網(wǎng)公網(wǎng)安備