Ajax的应用

一条要上岸的鱼

已于 2022-09-08 21:09:13 修改

阅读量631

点赞数

分类专栏： JavaWeb 文章标签： ajax javascript servlet

于 2022-09-08 21:08:12 首次发布

本文链接：https://blog.csdn.net/wk3510/article/details/126758174

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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");
        }
    }
}

知识点小结：

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

2. 实现：

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

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

        }）;



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

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

        }）;

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

                配置选项，查手册

                配置选项名：选项值

                配置选项名2：选项值

        }）

三、搜索关键字提示

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;
    }

四、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);
    }
}

总结：

        1.json：一个对象表示方式，用来在系统界面层和控制器之间的数据传递，或者多个系统的数据传递

                两种类型：

                        A.对象：{属性：属性值，属性：属性值}，属性值：数字、boolean不需要加引号，字符串需要加引号

                        B.数组：[{}，{}]

        2. 如果响应的json,最好是在Servlet里添加响应类型为如下
 resp.setContentType("application/json;charset=utf-8");

一条要上岸的鱼

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Ajax的应用

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

扫一扫