码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift

  • Ajax的应用

           

    目录

    一、获取服务器时间

    二、用户名检测

            知识点小结：

    三、搜索关键字提示

    四、JSON

     五、使用Ajax加载用户列表        

            总结：

    JavaScript:脚本语言、由ECMAScript、DOM、BOM组成。

            JS是弱类型、动态类型

            声明变量：let  var

            声明方法：function 方法名（）{}

    一、获取服务器时间

            我们原来的方式：要发送一个请求，请求Servlet，服务器端得到的服务器时间，然后再响应给客户端。

            想要发送一个请求有两种方式：一个是Form提交，一个是超链接

            1.1 页面

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <html>
    3. <head>
    4.     <title>获取服务器时间title>
    5. head>
    6. <body>
    7.     <a href="GetTimeOldServlet">获取服务器时间a>
    8.     <br>
    9.     现在时间是：${strNow}
    10. body>
    11. html>

            1.2 Servlet

    1. @WebServlet("/GetTimeOldServlet")
    2. public class GetTimeOldServlet extends HttpServlet {
    3.     @Override
    4.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    5.         Date now = new Date();
    6.         String strNow = now.toLocaleString();
    7.         req.setAttribute("strNow", strNow);
    8.         req.getRequestDispatcher("gettime_old.jsp").forward(req, resp);
    9.     }
    10. }

            现在我们采取新的方式

                    1. 页面

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <html>
    3. <head>
    4.     <title>获取服务器时间title>
    5.     <script src="jslib/jquery-3.6.1.js">script>
    6.     <script>
    7.         $(function () {
    8.  
    9.             $("#btn").click(function () {
    10.  
    11.                 //使用ajax发送一个请求
    12.                 $.get("GetTimeNewServlet",function (resData) {
    13.                     //jquery对象
    14.                     //dom对象
    15.                     //$("#timer").innerHTML = resData;
    16.                     $("#timer").html(resData);
    17.                 });
    18.  
    19.             });
    20.  
    21.         })
    22.     script>
    23. head>
    24. <body>
    25.     <input><br>
    26.     <input type="button" value="获取服务器时间" id="btn"><br>
    27.     <div id="timer">div>
    28. body>
    29. html>

             点击按钮获取服务器时间，现在就需要一种新的发送请求的方式

            AJAX=异步JavaScript和XML（Asynchronous JavaScript and XML）。

            Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

            编程语言是JavaScript，异步请求。（要使用JS发送请求就要Ajax）。

            优点：

    • 可以无需刷新整个页面，局部刷新
    • 客户端不用等待服务器的响应完成，可以向下执行操作

            缺点：

    • 没有浏览历史，不能回退
    • 存在跨域问题（同源）
    • SEO不友好（搜索引擎优化，对爬虫不好）

            2. Servlet 

    1. @WebServlet("/GetTimeNewServlet")
    2. public class GetTimeNewServlet extends HttpServlet {
    3.     @Override
    4.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    5.         Date now = new Date();
    6.         String strNow = now.toLocaleString();
    7.         //只把数据发送给客户端
    8.         PrintWriter out = resp.getWriter();
    9.         out.println(strNow);
    10.     }
    11. }

    二、用户名检测

            当鼠标离开账号输入框时，发送一个ajax检测账号是否存在

            2.1 页面

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <html>
    3. <head>
    4.     <title>注册title>
    5.     <script src="jslib/jquery-3.6.1.js">script>
    6. head>
    7. <body>
    8.     <form action="regservlet" method="post">
    9.         邮箱：<input name="email" id="email"><span id="emailInfo">span><br>
    10.         密码:<input type="password" name="password"> <br>
    11.         昵称：<input name="nikename"><br>
    12.         <input type="submit" value="注册"> <input type="reset" value="重置">
    13.     form>
    14.     <script>
    15.         $("#email").blur(function () {
    16.             //发送一个ajax请求
    17.             $.post("CheckEmailServlet",{em:this.value},function (data) {
    18.                 //alert("|"+data+"|");
    19.                 if(data == "f"){
    20.                     $("#emailInfo").css("color","green").html("恭喜你，此邮箱可以使用。")
    21.                 } else {
    22.                     $("#emailInfo").css("color","red").html("很遗憾，此邮箱已被占用。")
    23.                 }
    24.             });
    25.         });
    26.     script>
    27. body>
    28. html>

            2.2 Servlet

    1. @WebServlet("/CheckEmailServlet")
    2. public class CheckEmailServlet extends HttpServlet {
    3.     @Override
    4.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    5.         //1.接收请求参数
    6.         String email = req.getParameter("em");
    7.         //2.业务处理
    8.         UserDao userDao = new UserDaoImpl();
    9.         User user = userDao.queryUserByEmail(email);
    10.  
    11.         //3.响应
    12.         //原来一般是转向，而现在只响应数据
    13.         PrintWriter out = resp.getWriter();
    14.         if(user == null){
    15.             //邮箱不存在
    16.             out.print("f");
    17.         } else {
    18.             //邮箱存在
    19.             out.print("t");
    20.         }
    21.     }
    22. }

     

            知识点小结：

    1. ajax只是一种新的发送请求的方式，使用JavaScript实现的，可以实现异步请求局部刷新

    2. 实现：

            a.$get（"请求地址"，{请求参数}，function（data）{                      发送get请求

                    成功的回调函数，函数的参数是servlet发送过来的数据

            }）;

            

            b.$post（"请求地址"，{请求参数}，function（data）{                    发送post请求

                    成功的回调函数，函数的参数是servlet发送过来的数据

            }）;

            c.$ajax（{                                                                     更底层的方法，1.可以设置失败的情况的回调函数   2.可以配置是否异步

                    配置选项，查手册

                    配置选项名：选项值

                    配置选项名2：选项值

            }）

    三、搜索关键字提示

            3.1 页面

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <html>
    3. <head>
    4.     <title>Titletitle>
    5.     <style>
    6.         #container{
    7.             width: 400px;
    8.             border: 2px solid royalblue;
    9.             margin: 50px auto;
    10.         }
    11.         #keyword{
    12.             width: 400px;
    13.             height: 50px;
    14.             line-height: 50px;
    15.             font-size: 20px;
    16.         }
    17.     style>
    18.     <script src="jslib/jquery-3.6.1.js">script>
    19. head>
    20. <body>
    21.     <div id="container">
    22.         <div id="header">
    23.             <input id="keyword">
    24.         div>
    25.         <div id="content">div>
    26.     div>
    27.  
    28.     <script>
    29.         $("#keyword").keyup(function () {
    30.             //console.log(this.value);
    31.             //为了解决空白也请求，就会把所有内容都取出来,当用户没有输入或者是输入空白，不请求
    32.             let k = $.trim(this.value);
    33.             if(k != ""){
    34.                 //发送ajax请求
    35.                 $.post("suggest",{word:k},function (keywords) {
    36.                     console.log(typeof keywords)
    37.                     //把这个字符串拆分成数组
    38.                     let kws = keywords.split(",");
    39.                     //console.log(typeof kws)
    40.                     $("#content").html("");
    41.                     $("#content").show();
    42.                     for(let i=0;ilength;i++){
    43.                         let kw = kws[i];
    44.                         $("#content").append("
      "+kw+"
      "      );
    45.                     }
    46.                 });
    47.             } else {
    48.                 $("#content").hide();
    49.             }
    50.         });
    51.     script>
    52. body>
    53. html>

            3.2 Servlet

    1. @WebServlet("/suggest")
    2. public class SuggestServlet extends HttpServlet {
    3.     @Override
    4.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    5.         //1.获取请求参数
    6.         String keyword = req.getParameter("word");
    7.         //2.业务处理
    8.         UserDao userDao = new UserDaoImpl();
    9.         List list = userDao.queryByKeyword(keyword);
    10.         //为了能够让前端能够处理list里的数据，所以把list转成，分割的字符串
    11.         StringBuffer sb = new StringBuffer();
    12.         for (int i=0;i
    13.             String s = list.get(i);
    14.             sb.append(s);
    15.             if(i < list.size()-1){
    16.                 sb.append(",");
    17.             }
    18.  
    19.         }
    20.         System.out.println(sb);
    21.         //3.响应
    22.         PrintWriter out = resp.getWriter();
    23.         out.print(sb);
    24.  
    25.  
    26.     }
    27. }

            3.3 dao的接口

    List queryByKeyword(String keyword);

            3.4 dao的实现

    1.  @Override
    2.     public List queryByKeyword(String keyword) {
    3.         List list = new ArrayList<>();
    4.         List> lists = JdbcUtil.queryForList("select email from t_user where email like ?", keyword + "%");
    5.         for (List objects : lists) {
    6.             String email = (String) objects.get(0);
    7.             list.add(email);
    8.         }
    9.         return list;
    10.     }
      11.  

       
       

      四、JSON
       

       
 
              JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。
       

       

              4.1 对象
       

       
 
              对象是一个无序的“ ‘名称/值’ ”对集合。一个对象以  {  左括号开始，    } 右括号结束。  每个“名称”后跟一个 ：冒号； 
       
 
              “ ‘名称/值’ ”之间使用    ，   逗号分隔
       

       

      1. let u ={id:1,name:"jack"};
      2. alert(u.id+","+u.name)
       

              4.2 数组
       

       
 
              数组是值（value）的有序集合。一个数组以  [   左中括号开始，  ]    右括号结束。值之间使用   ，   逗号分隔。
       

       

      1. let users=[
      2.     {id:1,name:"andy},
      3.     {id:2,name:"jack"}
      4. ];
       

              4.3 把json字符串转成json对象
       

      1. let s = '{"id":10,"name":"Andy"}';
      2. //JSON.parse(s);要求里面的json字符串必须严格，属性名必须加双引号 ""
      3.  
      4. let user = JSON.parse(s);
       

       五、使用Ajax加载用户列表        
       

              5.1 页面
       

      1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
      2. <html>
      3. <head>
      4.     <title>用户列表title>
      5.     <style>
      6.         table{
      7.             width: 400px;
      8.             border-collapse: collapse;
      9.         }
      10.         td,th{
      11.             height: 30px;
      12.             border: 1px solid #2e2a80;
      13.         }
      14.     style>
      15.     <script src="jslib/jquery-3.6.1.js">script>
      16. head>
      17. <body>
      18.     <input type="button" value="加载用户列表" id="btn">
      19.     <table id="tbl">
      20.         <th>编号th>
      21.         <th>邮箱th>
      22.         <th>昵称th>
      23.     table>
      24.     <script>
      25.         $("#btn").click(function () {
      26.  
      27.             $.get("users",function (users) {
      28.                 console.log(typeof users)
      29.                 //把json字符串转成json对象
      30.                 let arrUsers = JSON.parse(users);
      31.                 let tbl = $("#tbl tbody");
      32.                 let arrStr = [];
      33.                 for (let i = 0; i < arrUsers.length; i++) {
      34.                     let user = arrUsers[i];
      35.                     //先把标签和用户的属性值放到数组里
      36.                     arrStr.push("")
      37.  
      38.                     arrStr.push("")
      39.                     arrStr.push(user.uid)
      40.                     arrStr.push("")
      41.  
      42.                     arrStr.push("")
      43.                     arrStr.push(user.email)
      44.                     arrStr.push("")
      45.  
      46.                     arrStr.push("")
      47.                     arrStr.push(user.nikename)
      48.                     arrStr.push("")
      49.  
      50.                     arrStr.push("")
      51.                 }
      52.                 tbl.append(arrStr.join(""));
      53.             });
      54.  
      55.         });
      56.     script>
      57. body>
      58. html>
       

              5.2 Servlet
       

      1. @WebServlet("/users")
      2. public class UsersServlet extends HttpServlet {
      3.     @Override
      4.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      5.         resp.setContentType("text/html;charset=utf-8");
      6.         //1.获取请求参数
      7.         //2.处理业务
      8.         UserDao userDao = new UserDaoImpl();
      9.         List users = userDao.queryAll();
      10.         //3.响应
      11.         //什么样的格式
      12.         //[{"id":1,email:"yccn@163.com","nikename":"Andy"},,,]
      13.         Gson gson = new Gson();
      14.         //转成json字符串
      15.         String s = gson.toJson(users);
      16.         System.out.println("s = " + s);
      17.  
      18.         PrintWriter out = resp.getWriter();
      19.         out.print(s);
      20.     }
      21. }
       

       

              总结：
       

       
 
              1.json：一个对象表示方式，用来在系统界面层和控制器之间的数据传递，或者多个系统的数据传递
       
 
                      两种类型：
       
 
                              A.对象：{属性：属性值，属性：属性值}，属性值：数字、boolean不需要加引号，字符串需要加引号
       
 
                              B.数组：[{}，{}]
       
 
              2. 如果响应的json,最好是在Servlet里添加响应类型为如下
       
 
                      
       
 
       resp.setContentType("application/json;charset=utf-8");
       
 
       

      
                
                    
                

                
    11. 

                    相关阅读:
      
                    
Vue面试题以及解答（持续扩展中.....）                            
      
D. Chip Move（思维，模拟）                            
      
使用PageHelper实现分页查询（详细）                            
      
小程序项目业务逻辑回忆4                            
      
100106. 元素和最小的山形三元组 I                            
      
Day02 Git命令【添加暂存区】                            
      
Leetcode—125.验证回文串【简单】                            
      
2023 年最后一波工具安利「GitHub 热点速览」                            
      
0：node的安装与环境配置                            
      
SpringCloud-Gateway网关实现入参统一解密                            
      
                          
                
      12. 
                
    12. 
                    原文地址：https://blog.csdn.net/wk3510/article/details/126758174
                
      13. 

            
        

        
      
            
        
                
      • 
                    最新文章
                
        • 
                
      • 
                    
攻防演习之三天拿下官网站群                            
        
数据安全治理学习——前期安全规划和安全管理体系建设                            
        
企业安全 | 企业内一次钓鱼演练准备过程                            
        
内网渗透测试 | Kerberos协议及其部分攻击手法                            
        
0day的产生 | 不懂代码的"代码审计"                            
        
安装scrcpy-client模块av模块异常，环境问题解决方案                            
        
leetcode hot100【LeetCode 279. 完全平方数】java实现                            
        
OpenWrt下安装Mosquitto                            
        
AnatoMask论文汇总                            
        
【AI日记】24.11.01 LangChain、openai api和github copilot                            
        
                            
                
        • 
            
      

            
        
                
      • 
                    热门文章
                
        • 
                
      • 
                    
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！                            
        
奉劝各位学弟学妹们，该打造你的技术影响力了！                            
        
五年了，我在 CSDN 的两个一百万。                            
        
Java俄罗斯方块，老程序员花了一个周末，连接中学年代！                            
        
面试官都震惊，你这网络基础可以啊！                            
        
你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法                            
        
心情不好的时候，用 Python 画棵樱花树送给自己吧                            
        
通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！                            
        
13 万字 C 语言从入门到精通保姆级教程2021 年版                            
        
10行代码集2000张美女图，Python爬虫120例，再上征途                            
        
                            
                
        • 
            
      

        
      
    




    
    
    
    

      
    
      
        
      
            
      
                
      
                    Copyright © 2022 侵权请联系2656653265@qq.com   
                    京ICP备2022015340号-1
                
      
                
      
                    正则表达式工具
                    cron表达式工具
                    密码生成工具
                
      
                
      
                    
                    
      京公网安备 11010502049817号