Ajax的应用

素颜马尾好姑娘i 2023-10-03 20:08 28阅读 0赞

**目录**

一、获取服务器时间

二、用户名检测

知识点小结：

三、搜索关键字提示

四、JSON

五、使用Ajax加载用户列表

总结：

--------------------

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

**JS是弱类型、动态类型**

**声明变量：let var**

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

## 一、获取服务器时间 ##

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

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

**1.1 页面**

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>获取服务器时间</title>
    </head>
    <body>
        <a href="GetTimeOldServlet">获取服务器时间</a>
        <br>
        现在时间是：${strNow}
    </body>
    </html>

**1.2 Servlet**

@WebServlet("/GetTimeOldServlet")
    public class GetTimeOldServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            Date now = new Date();
            String strNow = now.toLocaleString();
            req.setAttribute("strNow", strNow);
            req.getRequestDispatcher("gettime_old.jsp").forward(req, resp);
        }
    }

**现在我们采取新的方式**

**1. 页面**

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>获取服务器时间</title>
        <script src="jslib/jquery-3.6.1.js"></script>
        <script>
            $(function () {
    
                $("#btn").click(function () {
    
                    //使用ajax发送一个请求
                    $.get("GetTimeNewServlet",function (resData) {
                        //jquery对象
                        //dom对象
                        //$("#timer").innerHTML = resData;
                        $("#timer").html(resData);
                    });
    
                });
    
            })
        </script>
    </head>
    <body>
        <input><br>
        <input type="button" value="获取服务器时间" id="btn"><br>
        <div id="timer"></div>
    </body>
    </html>

>  **点击按钮获取服务器时间，现在就需要一种新的发送请求的方式**
> 
>  **AJAX=异步JavaScript和XML（Asynchronous JavaScript and XML）。**
> 
>  **Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式**
> 
> **编程语言是JavaScript，异步请求。（要使用JS发送请求就要Ajax）。**
> 
>  **优点：**
> 
>  *  **可以无需刷新整个页面，局部刷新**
>  *  **客户端不用等待服务器的响应完成，可以向下执行操作**
> 
>  **缺点：**
> 
>  *  **没有浏览历史，不能回退**
>  *  **存在跨域问题（同源）**
>  *  **SEO不友好（搜索引擎优化，对爬虫不好）**

**2. Servlet**

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

## 二、用户名检测 ##

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

**2.1 页面**

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>注册</title>
        <script src="jslib/jquery-3.6.1.js"></script>
    </head>
    <body>
        <form action="regservlet" method="post">
            邮箱：<input name="email" id="email"><span id="emailInfo"></span><br>
            密码:<input type="password" name="password"> <br>
            昵称：<input name="nikename"><br>
            <input type="submit" value="注册"> <input type="reset" value="重置">
        </form>
        <script>
            $("#email").blur(function () {
                //发送一个ajax请求
                $.post("CheckEmailServlet",{em:this.value},function (data) {
                    //alert("|"+data+"|");
                    if(data == "f"){
                        $("#emailInfo").css("color","green").html("恭喜你，此邮箱可以使用。")
                    } else {
                        $("#emailInfo").css("color","red").html("很遗憾，此邮箱已被占用。")
                    }
                });
            });
        </script>
    </body>
    </html>

**2.2 Servlet**

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

![f9cc2012f160431987f078e1b6e6da76.png][] ![df6f1cf3a0cc453c91c61d679f6c232b.png][]

#### 知识点小结： ####

> **1. ajax只是一种新的发送请求的方式，使用JavaScript实现的，可以实现异步请求局部刷新**
> 
> **2. 实现：**
> 
> **a.$get（"请求地址"，\{ 请求参数\}，function（data）\{ 发送get请求**
> 
>  **成功的回调函数，函数的参数是servlet发送过来的数据**
> 
>  **\}）;**
> 
>  **b.$post（"请求地址"，\{ 请求参数\}，function（data）\{ 发送post请求**
> 
>  **成功的回调函数，函数的参数是servlet发送过来的数据**
> 
>  **\}）;**
> 
> **c.$ajax（\{ 更底层的方法，1.可以设置失败的情况的回调函数 2.可以配置是否异步**
> 
> **配置选项，查手册**
> 
>  **配置选项名：选项值**
> 
>  **配置选项名2：选项值**
> 
>  **\}）**

## 三、搜索关键字提示 ##

![728e600c7b4d4e829b2a87721606e7a0.png][]

**3.1 页面**

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <style>
            #container{
                width: 400px;
                border: 2px solid royalblue;
                margin: 50px auto;
            }
            #keyword{
                width: 400px;
                height: 50px;
                line-height: 50px;
                font-size: 20px;
            }
        </style>
        <script src="jslib/jquery-3.6.1.js"></script>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <input id="keyword">
            </div>
            <div id="content"></div>
        </div>
    
        <script>
            $("#keyword").keyup(function () {
                //console.log(this.value);
                //为了解决空白也请求，就会把所有内容都取出来,当用户没有输入或者是输入空白，不请求
                let k = $.trim(this.value);
                if(k != ""){
                    //发送ajax请求
                    $.post("suggest",{word:k},function (keywords) {
                        console.log(typeof keywords)
                        //把这个字符串拆分成数组
                        let kws = keywords.split(",");
                        //console.log(typeof kws)
                        $("#content").html("");
                        $("#content").show();
                        for(let i=0;i<kws.length;i++){
                            let kw = kws[i];
                            $("#content").append("<div>"+kw+"</div>");
                        }
                    });
                } else {
                    $("#content").hide();
                }
            });
        </script>
    </body>
    </html>

**3.2 Servlet**

@WebServlet("/suggest")
    public class SuggestServlet extends HttpServlet {
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //1.获取请求参数
            String keyword = req.getParameter("word");
            //2.业务处理
            UserDao userDao = new UserDaoImpl();
            List<String> list = userDao.queryByKeyword(keyword);
            //为了能够让前端能够处理list里的数据，所以把list转成，分割的字符串
            StringBuffer sb = new StringBuffer();
            for (int i=0;i<list.size();i++) {
                String s = list.get(i);
                sb.append(s);
                if(i < list.size()-1){
                    sb.append(",");
                }
    
            }
            System.out.println(sb);
            //3.响应
            PrintWriter out = resp.getWriter();
            out.print(sb);
    
    
        }
    }

**3.3 dao的接口**

List<String> queryByKeyword(String keyword);

**3.4 dao的实现**

@Override
        public List<String> queryByKeyword(String keyword) {
            List<String> list = new ArrayList<>();
            List<List<Object>> lists = JdbcUtil.queryForList("select email from t_user where email like ?", keyword + "%");
            for (List<Object> objects : lists) {
                String email = (String) objects.get(0);
                list.add(email);
            }
            return list;
        }

![87d9707819f4449c92e2a0b7e220d4b9.png][] ![2dcad7f666544e5db0ad43007f91b30c.png][]![740c3b0b352b4d74894521d422fe13da.png][]

## 四、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 对象**

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

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

**4.2 数组**

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

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

**4.3 把json字符串转成json对象**

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

## 五、使用Ajax加载用户列表 ##

**5.1 页面**

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>用户列表</title>
        <style>
            table{
                width: 400px;
                border-collapse: collapse;
            }
            td,th{
                height: 30px;
                border: 1px solid #2e2a80;
            }
        </style>
        <script src="jslib/jquery-3.6.1.js"></script>
    </head>
    <body>
        <input type="button" value="加载用户列表" id="btn">
        <table id="tbl">
            <th>编号</th>
            <th>邮箱</th>
            <th>昵称</th>
        </table>
        <script>
            $("#btn").click(function () {
    
                $.get("users",function (users) {
                    console.log(typeof users)
                    //把json字符串转成json对象
                    let arrUsers = JSON.parse(users);
                    let tbl = $("#tbl tbody");
                    let arrStr = [];
                    for (let i = 0; i < arrUsers.length; i++) {
                        let user = arrUsers[i];
                        //先把标签和用户的属性值放到数组里
                        arrStr.push("<tr>")
    
                        arrStr.push("<td>")
                        arrStr.push(user.uid)
                        arrStr.push("</td>")
    
                        arrStr.push("<td>")
                        arrStr.push(user.email)
                        arrStr.push("</td>")
    
                        arrStr.push("<td>")
                        arrStr.push(user.nikename)
                        arrStr.push("</td>")
    
                        arrStr.push("</tr>")
                    }
                    tbl.append(arrStr.join(""));
                });
    
            });
        </script>
    </body>
    </html>

**5.2 Servlet**

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

![78d557b118a94c4d9bb2b938346cb342.png][]

#### 总结： ####

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

[f9cc2012f160431987f078e1b6e6da76.png]: https://img-blog.csdnimg.cn/f9cc2012f160431987f078e1b6e6da76.png
[df6f1cf3a0cc453c91c61d679f6c232b.png]: https://img-blog.csdnimg.cn/df6f1cf3a0cc453c91c61d679f6c232b.png
[728e600c7b4d4e829b2a87721606e7a0.png]: https://img-blog.csdnimg.cn/728e600c7b4d4e829b2a87721606e7a0.png
[87d9707819f4449c92e2a0b7e220d4b9.png]: https://img-blog.csdnimg.cn/87d9707819f4449c92e2a0b7e220d4b9.png
[2dcad7f666544e5db0ad43007f91b30c.png]: https://img-blog.csdnimg.cn/2dcad7f666544e5db0ad43007f91b30c.png
[740c3b0b352b4d74894521d422fe13da.png]: https://img-blog.csdnimg.cn/740c3b0b352b4d74894521d422fe13da.png
[JavaScript Programming Language]: http://www.crockford.com/javascript
[78d557b118a94c4d9bb2b938346cb342.png]: https://img-blog.csdnimg.cn/78d557b118a94c4d9bb2b938346cb342.png