AJAX搜索联想和自动补全后端实现效果------AJAX

约定不等于承诺〃 2024-02-18 12:29 31阅读 0赞

>     AJAX在浏览器当中发送异步请求,请求之间是独立的,谁也不用等谁
>     类似于多线程并发,不会出现页面清空然后展示新的页面的效果
>     实现局部刷新(靠多种技术一起做到的,而不是一个技术叫ajax)
>     它是异步的(类似于多线程)
>     在AJAX的请求以及响应中完全依靠的是XMLHttpRequest对象
>     XMLHttpRequest对象的readyState属性记录了XMLHTTPREQUEST对象的状态
>     这个ReadyState属性的对应值有
>     0请求未初始化
>     1服务器连接已建立
>     2请求已收到
>     3正在处理请求
>     4请求已完成且响应已就绪
>     因此我们说当XMLHttpRequest对象的readyState属性变成4的时候
>     表示这个AJAX请求和响应已经全部完成
>     对于低版本的IE浏览器来说,ajax的get请求可能会走缓存,但是现代浏览器都没有这个问题了
>     什么是ajax的get请求缓存问题呢?
>     post请求不会被浏览器缓存,没有缓存问题
>     get请求直接从浏览器缓存获取资源,不需要从服务器重新加载资源,速度较快,用户体验好
>     缺点是无法实时获取最新浏览器资源
>     什么时候会走缓存,1get请求,2请求路径已经被浏览器缓存过了,路径没变化的情况会走缓存
>     如何解决低版本的ajax缓存问题
>     对于低版本的IE浏览器才有这样的缓存问题,可以采用URL时间戳来解决
>     我们需要给请求加一个时间戳
>     也可以使用随机数,或者随机数加上时间戳拼接到我们的请求内
>     a和B两个请求之间彼此不同步,不需要等待请求结束才能发送
>     同步和异步如何在代码上实现
>     假设一个ajax请求open的第三个参数是false,就表示这个请求不支持异步
>     也就是发送这个请求,会让其他请求的发送被暂缓,只有当我这个请求结束之后,其他的ajax请求才能发送
>     比方说,用户注册时,用户名邮箱密码都需要发送ajax请求校验
>     显然这个注册的ajax请求不能和校验的ajax请求异步,只能同步,避免提交非法数据
>     jsonp:json with padding(带填充的json)
>     不是一个真正的ajax请求,只不过可以完成Ajax的局部刷新效果
>     是一个类似ajax的效果
>     搜索联想和自动补全
>     当用户输入一些单词后,自动联想出用户想要搜索的信息,给出提示
>     自动补全,当联想出一些内容后,用户点击这个联想的单词,将这个单词自动补全到搜索框中
>     因为搜索联想和自动补全机制都是局部刷新实现的,所以需要ajax请求
>     当我们的键盘事件发生之后,如keyup或者keydown发生就发送ajax请求
>     请求携带用户的搜索内容,后端接收到ajax请求,根据输入内容进行模糊查询,返回插叙结果
>     将结果封装为json格式的字符串,将json格式的字符串响应到前端
>     前端接受到json格式的字符串,解析这个字符串,动态展示到前端页面上
> 
>     AJAX在浏览器当中发送异步请求,请求之间是独立的,谁也不用等谁
>     类似于多线程并发,不会出现页面清空然后展示新的页面的效果
>     实现局部刷新(靠多种技术一起做到的,而不是一个技术叫ajax)
>     它是异步的(类似于多线程)
>     在AJAX的请求以及响应中完全依靠的是XMLHttpRequest对象
>     XMLHttpRequest对象的readyState属性记录了XMLHTTPREQUEST对象的状态
>     这个ReadyState属性的对应值有
>     0请求未初始化
>     1服务器连接已建立
>     2请求已收到
>     3正在处理请求
>     4请求已完成且响应已就绪
>     因此我们说当XMLHttpRequest对象的readyState属性变成4的时候
>     表示这个AJAX请求和响应已经全部完成
>     对于低版本的IE浏览器来说,ajax的get请求可能会走缓存,但是现代浏览器都没有这个问题了
>     什么是ajax的get请求缓存问题呢?
>     post请求不会被浏览器缓存,没有缓存问题
>     get请求直接从浏览器缓存获取资源,不需要从服务器重新加载资源,速度较快,用户体验好
>     缺点是无法实时获取最新浏览器资源
>     什么时候会走缓存,1get请求,2请求路径已经被浏览器缓存过了,路径没变化的情况会走缓存
>     如何解决低版本的ajax缓存问题
>     对于低版本的IE浏览器才有这样的缓存问题,可以采用URL时间戳来解决
>     我们需要给请求加一个时间戳
>     也可以使用随机数,或者随机数加上时间戳拼接到我们的请求内
>     a和B两个请求之间彼此不同步,不需要等待请求结束才能发送
>     同步和异步如何在代码上实现
>     假设一个ajax请求open的第三个参数是false,就表示这个请求不支持异步
>     也就是发送这个请求,会让其他请求的发送被暂缓,只有当我这个请求结束之后,其他的ajax请求才能发送
>     比方说,用户注册时,用户名邮箱密码都需要发送ajax请求校验
>     显然这个注册的ajax请求不能和校验的ajax请求异步,只能同步,避免提交非法数据
>     jsonp:json with padding(带填充的json)
>     不是一个真正的ajax请求,只不过可以完成Ajax的局部刷新效果
>     是一个类似ajax的效果
>     搜索联想和自动补全
>     当用户输入一些单词后,自动联想出用户想要搜索的信息,给出提示
>     自动补全,当联想出一些内容后,用户点击这个联想的单词,将这个单词自动补全到搜索框中
>     因为搜索联想和自动补全机制都是局部刷新实现的,所以需要ajax请求
>     当我们的键盘事件发生之后,如keyup或者keydown发生就发送ajax请求
>     请求携带用户的搜索内容,后端接收到ajax请求,根据输入内容进行模糊查询,返回插叙结果
>     将结果封装为json格式的字符串,将json格式的字符串响应到前端
>     前端接受到json格式的字符串,解析这个字符串,动态展示到前端页面上

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <title>Title</title>
>         <style type="text/css">
>             .userInput
>             {
>                 width:300px;
>                 height: 25px;
>                 font-size: 20px;
>                 padding-left: 5px;
>             }
>             .showDataDiv
>             {
>                 width: 310px;
>                 border: 1px solid lightgray;
>                 background-color: antiquewhite;
>                 display: none;
>             }
>             .showDataDiv p
>             {
>                 padding-left: 5px;
>                 margin-top: 2px;
>                 margin-bottom: 2px;
>             }
>             .showDataDiv p:hover
>             {
>                 cursor: pointer;
>                 border: 1px blue solid;
>                 background-color: aliceblue;
>             }
>         </style>
>     </head>
>     <body>
>     <script type="text/javascript">
>         window.onload = function()
>         {
>             setInput = function(value)
>             {
>                 document.getElementById("Input").value = value;
>                 document.getElementById("show").style.display = "none";
>             }
>             document.getElementById("Input").onkeyup = function()
>             {
>                 if(document.getElementById("Input").value === "")
>                 {
>                     document.getElementById("show").style.display = "none";
>                 }
>                 else
>                 {
>                     select();
>                 }
>             }
>             document.getElementById("Input").onclick = function()
>             {
>                 if(document.getElementById("Input").value === "")
>                 {
>                     document.getElementById("show").style.display = "none";
>                 }
>                 else
>                 {
>                     select();
>                 }
>             }
>             select = function()
>             {
>                 var ajax = new XMLHttpRequest();
>                 ajax.onreadystatechange = function()
>                 {
>                     if (ajax.readyState === 4)
>                     {
>                         if (ajax.status === 200)
>                         {
>                             var returnVal = JSON.parse(ajax.responseText);
>                             console.log(returnVal);
>                             html = "";
>                             for (var i = 0; i < returnVal.length; i++) {
>                                 var content = returnVal[i].content;
>                                 html += "<P onclick='setInput(\""+content+"\")'>"+content+"</P>";
>                                 html += "<br>"
>                             }
>                             document.getElementById("show").innerHTML = html;
>                             // for(var i = 0; i < returnVal.length; i++)
>                             // {
>                             //     document.getElementById("show").appendChild("<P>"+returnVal[i].content+"</P>");
>                             // }
>                             document.getElementById("show").style.display = "flex";
>                         }
>                         else
>                         {
>                             alert(ajax.status);
>                         }
>                     }
>                 }
>                 var value = document.getElementById("Input").value;
>                 ajax.open("GET","/Test/query?t="+new Date().getTime()+"&keyword="+value,true);
>                 ajax.send();
>             }
>         }
>     </script>
>         <div>
>             <input type="text" class="userInput" id="Input"/>
>             <div class="showDataDiv" id="show">
>             </div>
>         </div>
>     </body>
>     </html>
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <title>Title</title>
>         <style type="text/css">
>             .userInput
>             {
>                 width:300px;
>                 height: 25px;
>                 font-size: 20px;
>                 padding-left: 5px;
>             }
>             .showDataDiv
>             {
>                 width: 310px;
>                 border: 1px solid lightgray;
>                 background-color: antiquewhite;
>                 display: none;
>             }
>             .showDataDiv p
>             {
>                 padding-left: 5px;
>                 margin-top: 2px;
>                 margin-bottom: 2px;
>             }
>             .showDataDiv p:hover
>             {
>                 cursor: pointer;
>                 border: 1px blue solid;
>                 background-color: aliceblue;
>             }
>         </style>
>     </head>
>     <body>
>     <script type="text/javascript">
>         window.onload = function()
>         {
>             setInput = function(value)
>             {
>                 document.getElementById("Input").value = value;
>                 document.getElementById("show").style.display = "none";
>             }
>             document.getElementById("Input").onkeyup = function()
>             {
>                 if(document.getElementById("Input").value === "")
>                 {
>                     document.getElementById("show").style.display = "none";
>                 }
>                 else
>                 {
>                     select();
>                 }
>             }
>             document.getElementById("Input").onclick = function()
>             {
>                 if(document.getElementById("Input").value === "")
>                 {
>                     document.getElementById("show").style.display = "none";
>                 }
>                 else
>                 {
>                     select();
>                 }
>             }
>             select = function()
>             {
>                 var ajax = new XMLHttpRequest();
>                 ajax.onreadystatechange = function()
>                 {
>                     if (ajax.readyState === 4)
>                     {
>                         if (ajax.status === 200)
>                         {
>                             var returnVal = JSON.parse(ajax.responseText);
>                             console.log(returnVal);
>                             html = "";
>                             for (var i = 0; i < returnVal.length; i++) {
>                                 var content = returnVal[i].content;
>                                 html += "<P οnclick='setInput(\""+content+"\")'>"+content+"</P>";
>                                 html += "<br>"
>                             }
>                             document.getElementById("show").innerHTML = html;
>                             // for(var i = 0; i < returnVal.length; i++)
>                             // {
>                             //     document.getElementById("show").appendChild("<P>"+returnVal[i].content+"</P>");
>                             // }
>                             document.getElementById("show").style.display = "flex";
>                         }
>                         else
>                         {
>                             alert(ajax.status);
>                         }
>                     }
>                 }
>                 var value = document.getElementById("Input").value;
>                 ajax.open("GET","/Test/query?t="+new Date().getTime()+"&keyword="+value,true);
>                 ajax.send();
>             }
>         }
>     </script>
>         <div>
>             <input type="text" class="userInput" id="Input"/>
>             <div class="showDataDiv" id="show">
>             </div>
>         </div>
>     </body>
>     </html>

>     package com.bjpowernode.javaweb.servlet;
>     
>     import POJO.content;
>     import com.alibaba.fastjson.JSON;
>     import jakarta.servlet.ServletException;
>     import jakarta.servlet.annotation.WebServlet;
>     import jakarta.servlet.http.HttpServlet;
>     import jakarta.servlet.http.HttpServletRequest;
>     import jakarta.servlet.http.HttpServletResponse;
>     import utils.DBUtil;
>     
>     import java.io.IOException;
>     import java.sql.Connection;
>     import java.sql.PreparedStatement;
>     import java.sql.ResultSet;
>     import java.sql.SQLException;
>     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
>         {
>             request.setCharacterEncoding("UTF-8");
>             response.setCharacterEncoding("UTF-8");
>             response.setContentType("text/html;charset=UTF-8");
>             Connection connection = null;
>             PreparedStatement statement = null;
>             ResultSet resultSet = null;
>             String keyword = request.getParameter("keyword");
>             try
>             {
>                 connection = DBUtil.getConnection();
>                 String sql = "select * from t_ajax WHERE content LIKE ?";
>                 //模糊查询不建议以%开始,因为会导致索引失效,查询的效率降低
>                 List<content> list = new ArrayList<>();
>                 statement = connection.prepareStatement(sql);
>                 statement.setString(1,keyword+"%");
>                 resultSet = statement.executeQuery();
>                 while (resultSet.next())
>                 {
>                     content content = new content(resultSet.getString("content"));
>                     list.add(content);
>                 }
>                 String jsonString = JSON.toJSONString(list);
>                 response.getWriter().println(jsonString);
>             }
>             catch (SQLException e)
>             {
>                 throw new RuntimeException(e);
>             }
>             finally {
>                 DBUtil.close(connection,statement,resultSet);
>             }
>         }
>     }
> 
>     package com.bjpowernode.javaweb.servlet;
>     
>     import POJO.content;
>     import com.alibaba.fastjson.JSON;
>     import jakarta.servlet.ServletException;
>     import jakarta.servlet.annotation.WebServlet;
>     import jakarta.servlet.http.HttpServlet;
>     import jakarta.servlet.http.HttpServletRequest;
>     import jakarta.servlet.http.HttpServletResponse;
>     import utils.DBUtil;
>     
>     import java.io.IOException;
>     import java.sql.Connection;
>     import java.sql.PreparedStatement;
>     import java.sql.ResultSet;
>     import java.sql.SQLException;
>     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
>         {
>             request.setCharacterEncoding("UTF-8");
>             response.setCharacterEncoding("UTF-8");
>             response.setContentType("text/html;charset=UTF-8");
>             Connection connection = null;
>             PreparedStatement statement = null;
>             ResultSet resultSet = null;
>             String keyword = request.getParameter("keyword");
>             try
>             {
>                 connection = DBUtil.getConnection();
>                 String sql = "select * from t_ajax WHERE content LIKE ?";
>                 //模糊查询不建议以%开始,因为会导致索引失效,查询的效率降低
>                 List<content> list = new ArrayList<>();
>                 statement = connection.prepareStatement(sql);
>                 statement.setString(1,keyword+"%");
>                 resultSet = statement.executeQuery();
>                 while (resultSet.next())
>                 {
>                     content content = new content(resultSet.getString("content"));
>                     list.add(content);
>                 }
>                 String jsonString = JSON.toJSONString(list);
>                 response.getWriter().println(jsonString);
>             }
>             catch (SQLException e)
>             {
>                 throw new RuntimeException(e);
>             }
>             finally {
>                 DBUtil.close(connection,statement,resultSet);
>             }
>         }
>     }